CSS 未使用 Webpack 4 和 MiniCssExtractPlugin 添加到 /dist 文件夹

Question

问题

是否有任何 Webpack 配置专家能够告诉我为什么在运行 npm run build 时无法将我的 css 提取到 dist 文件夹中？ 回购在这里：https://github.com/damodog/webpack4-boilerplate

更多信息

总而言之，我一直在处理Webpack Guide docs，一切进展顺利。 js 和 css 分别通过 <link> 和 <script> 标签注入到我的 index.html 文件中。我已经安装了各种加载器、插件等，并将我的配置拆分为通用（共享）、开发和生产文件（根据文档），生活很好。

我碰巧做了一些调整，包括查看code splitting dynamic imports、为路径添加别名、将 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 有关，但我已根据文档使用 advanced configuration example 进行了配置（我已将他们的示例拆分为一个配置文件，因为我dev 和 prod 有单独的配置文件）。

我真的不明白为什么会这样。 帮助我的读者。你是我唯一的帮助...

Answer 1

我克隆了您的存储库并进行了实验。在您的package.json 中，您设置了：sideEffects: false。这会导致导入的样式表在摇树过程中丢失。这是described in the docs：

“副作用”定义为执行特殊行为的代码 进口时，除了暴露一个或多个出口。一个例子 这是 polyfill，它会影响全局范围，通常不会 提供一个出口。

和

请注意，任何导入的文件都会受到树抖动的影响。这意味着如果 您在项目中使用类似 css-loader 的东西并导入 CSS 文件，它需要添加到副作用列表中，所以它不会 在生产模式下意外掉线

所以将package.json中的副作用更改为"sideEffects: ["./src/scss/styles.scss"]，在生产模式下它将输出到目标文件夹。