问题标签 [webpack-4]

我正在寻找关于 webpack 中这两个选项之间区别的清晰解释。我已经阅读了这里的描述，但区别并不明显。引用描述：

将 optimization.splitChunks.chunks 选项设置为“all”初始块将受到它的影响（即使是那些未动态导入的块）。这种方式甚至可以在入口点和按需加载之间共享块。

我构建的块的大小太大，所以我试图将它们分成更小的块。当我在 a 上设置minChunks 条件cacheGroup时，它会阻止该组构建，而不会提供任何错误。我在我的配置中做错了什么？

没有minChunks

和minChunks

我正在尝试找到一种在 npm 中使用本地模块的好方法，或者一种构建大型应用程序的方法，以便可以将其捆绑到可能位于或可能不在单独存储库中的模块中。

每个本地模块都有自己的 package.json 和已安装的依赖项。

我的要求是这些模块是用 ES6 编写的，并且只作为正在构建的主项目的一部分进行编译（所以我没有很多依赖项不断地独立构建）。

项目结构

我目前正在研究通过在我的 package.json 中指定一个本地文件来使用本地模块，如下所示：

你可以在这里看到整个项目：https ://github.com/SamStonehouse/webpack-local-modules-test

我正在使用带有 babel-loader 的 webpack，它不需要任何额外的设置即可使用此表单，甚至可以在模块文件完成时查看更改和重建，这太棒了。

问题：一旦构建 lodash 被包含在构建包中 4 次以上，每个需要它的模块一个，即使它们都需要相同的版本并且所有源代码是同时编译的。

• 我试过使用 splitChunkPlugin 但无济于事
• 我尝试在本地模块中将 lodash 设置为 devDependency （这是我不想做的事情，但它无论如何都没有用）

有人对此有解决方案吗？

或者以类似方式捆绑本地模块的另一种方法

我正在尝试使用以下命令从 .tsx 中的 .json 文件导入数据：

但我得到了错误

找不到模块'data/mockup.json'

我的 webpack 配置如下所示：

我认为 .json 默认情况下是内置在 webpack4 中的，所以我的 webpack 配置可能有问题？

使用的版本：webpack：v4.4.1 打字稿：2.7.2

目前我正在尝试构建我的想法的原型，并在 Themeforest 上购买了 Bootstrap 主题。作为我的前端菜鸟，我似乎无法找到具体信息如何生成vendor.js以及vendor.css从主题提供的资产目录中。

到目前为止，这些似乎是最可靠的来源：

• https://webpack.js.org/plugins/split-chunks-plugin/
• https://medium.com/@hpux/webpack-4-in-production-how-make-your-life-easier-4d03e2e5b081
• https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366

任何配置示例或某种详细指南都会非常有帮助！

谢谢！

我在 webpack 4 中使用 extract-text-webpack-plugin 提取 css。CSS 被提取，但是当我运行 npm run build 时，css 被提取，但我在屏幕上收到一条消息

入口点未定义 = extract-text-webpack-plugin-output-filename。

整个堆栈跟踪如下：

Package.json文件是：

webpack.config.js

webpack.config.js

产品一个文件28024a27808de6fae79a1f5596584d3e.js，但实际上内容哈希是9c757e82e0a41d8e51228532a109a0d7

尝试了不同的方法在 webpack 4 中加载自定义的 Gugi/Roboto 字体。似乎没有一个可以正确加载字体。

但是，当我在系统中安装字体时，它按预期工作 - 表明 Css 和应用程序工作正常。因此，这似乎是一个我无法理解的 webpack 问题。

index.js

Webpack 配置

我在 React 中使用 mui-next，它应该可以与 Roboto 字体一起使用。（如果它在系统中可用，该字体就完美了 - 安装在 Windows 左右。）

此外，尝试了不同的方法 - 通过 font.css 加载字体，并通过 gulp 复制 woff2 文件。奇怪 - 似乎没有一个选项有效。

谢谢你的帮助！

我正在尝试从 3 升级到 Webpack 4，并且在共享包的关闭时遇到问题。

我的 webpack 设置为创建一个在和shared.js之间共享我的代码的文件。特别是，在包中，有一个带有变量的索引文件。我们只导出一个名为 的函数，它返回. 这种呼吁发生在我们和文件的不同地方。a.jsb.jsshared.jsstoregetStore()storegetStorea.jsb.js

我们页面上的脚本阵容如下所示：

在 Webpack 3 中，当第一次调用（调用来自）getStore()中的代码时，它会创建一个实例，然后调用从调用返回。对from 的任何后续调用，它不再创建 的实例，而是从 . 返回相同的值。然后在完成并运行之后，当调用时，它不会实例化，而是使用与使用相同的实例。在这种情况下，麻烦和是相同的实例。shared.jsa.jsstorestoregetStore()getStore()a.jsstoregetStore()a.jsb.jsb.jsgetStore()storea.jsstorea.jsb.js

但是在 Webpack 4 中，行为有所不同。当a.js调用 中的代码时shared.js，当代码第一次引用 时getStore()，和之前类似，它会创建一个新的 实例store，并且在a.js运行和调用getStore()时返回相同的实例。但是，当b.js对代码进行初始引用时shared.js，它不会使用相同的实例a.js，而是创建一个新实例，store并且在整个b.js脚本运行过程中，它会store在调用getStore(). 在这种情况下，有 的两个实例，每个实例对于和store都是唯一的。a.jsb.js

不确定导致此问题的 Webpack 4 有什么不同。我们从使用CommonChunksPluginWebpack 3 切换到现在使用内置的优化设置。以下是它们的配置方式。

网页包 3：

网页包 4：

两种 Webpack 配置都输出大致相同大小的文件，在调试和查看调用堆栈时，调用getStore()来自各自的 a/b.js 文件。

是否有解释为什么a.js并在 Webpack 4 中获取对象的b.js单独实例与shared.js store在 Webpack 3 中获取相同实例的原因？当脚本相互依赖时，它们的闭包/作用域应该如何处理共享代码？

在设置 Webpack 4 + Browsersync 时需要一些帮助。尝试时出现以下错误，webpack --watch但无法确定是我的配置有问题还是 browsersync-webpack-plugin 未更新以支持 v4。

webpack.config.js

包.json