使用Webpack 4和MiniCssExtractPlugin时，CSS未被添加到/dist文件夹中。

Question

问题

有没有Webpack配置专家能告诉我为什么在运行npm run build时，我不能将我的css提取到dist文件夹中？ 存储库在这里: https://github.com/damodog/webpack4-boilerplate

更多信息

总结一下，我一直在按照Webpack指南文档的要求工作，一切都很顺利。 js和css通过<link>和<script>标签注入到我的index.html文件中。我安装了各种加载器、插件等，并将我的配置拆分成共同（共享）、开发和生产文件（根据文档），生活很美好。

我碰巧进行了一些调整，包括查看代码分割动态导入，为路径添加别名，将js移动到js文件夹中等。当我运行构建npm run build时，我注意到我的css突然没有添加到dist文件夹中。我撤销了试验性的动态导入更改并尝试还原其他更改，但仍然遇到同样的问题。令人恼火的是，在这一点上我还没有添加git，因此无法清楚地了解我所做的“调整”以确定我更改了什么。

发生了什么

当我运行我的观察任务npm start时，styles.scss文件（导入主要的index.js文件）会被编译成css，并且生成的app.css文件在本地主机中查看index.html页面时被注入。所有都很顺利。 <link href="css/app.css" rel="stylesheet">

当我运行npm run build时，CSS文件应该被复制到dist文件夹中，添加哈希ID并且CSS应该被压缩。这个过程之前是可以正常工作的（就像我上面所说的一样），在构建步骤中可以看到CSS文件（请参见下面的第一个资产）。顺便说一下，这里与下一个截图中捆绑的JS文件的差异无关。这是我在尝试代码分割时的情况。

现在当我运行这个时，CSS没有被捆绑起来（如下所示）。

我认为这可能与mini-css-extract-plugin有关，但我已经按照文档使用高级配置示例进行了配置（我将它们的示例拆分成了一个配置文件，因为我有单独的开发和生产配置文件）。

我真的看不出为什么会发生这种情况。 帮帮我吧，Stack Overflow读者们。你们是我的唯一帮助...

- Damodog

---

在我的当前配置中，使用mode: 'production'与mini-css-extract-plugin一起使用会给我带来这个错误。 如果在我的webpack.prod.js配置文件中将其更改为mode: 'none'，则CSS将被正确捆绑并添加到dist文件夹中。 尽管Webpack建议使用mode: 'production'，但这似乎是一种hack方法！ - Damodog

如果你在插件数组中先放置 new CleanWebpackPlugin(['dist']) 再放置 new MiniCssExtractPlugin({...})，会发生什么？ - axm__

Answer 1

我克隆了您的存储库并进行了实验。在您的package.json中，您设置了：sideEffects: false。这会导致被导入的样式表在树摇晃过程中丢失。文档中描述了这一点：

“副作用”是指当导入时执行特殊行为的代码，除了公开一个或多个导出之外。其中一个例子是Polyfill，它影响全局范围，并且通常不提供导出。

以及

请注意，任何导入的文件都有可能被树摇晃。这意味着如果您在项目中使用类似于css-loader的东西并导入CSS文件，则需要将其添加到副作用列表中，以使其在生产模式下不会被意外删除

因此，请将您在package.json中的副作用更改为"sideEffects： [“./src/scss/styles.scss”] "，这样在生产模式下就会输出到目标文件夹中。

- axm__

---

谢谢 @axm__，问题已经解决了。如果我再次尝试 Tree Shaking，我会记住这一点的。 :-) - Damodog