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

Question

问题

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

更多信息

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

我碰巧做了一些调整，包括查看代码拆分动态导入、添加路径别名、将 js 移动到 js 文件夹等，并注意到当我npm run build突然运行构建时，我的 css 没有被添加到 dist 文件夹中。我恢复了动态导入内容的试用更改并尝试恢复其他更改，但仍然遇到相同的问题。令人恼火的是，此时我还没有添加 git，所以没有清楚地了解我为定位我所做的更改所做的“调整”。

发生什么了

当我运行我的 watch 任务时npm start，styles.scss 文件（导入到主 index.js 文件中）被编译成 css，并且在我的本地主机中查看时，生成的 app.css 文件被注入到 index.html 页面中。都是肉汁。 <link href="css/app.css" rel="stylesheet">

当我运行npm run buildcss 文件时，应该将 css 文件复制到 dist 文件夹中，应该添加一个哈希 ID，并且应该缩小 css。这是有效的（就像我上面说的那样）并且我可以在构建步骤中看到 css 文件（请参阅下面的第一个资产。顺便说一句，与下一个屏幕截图相比，这里忽略了 js 捆绑文件中的差异。这是我在玩代码拆分时）。

现在，当我运行它时，css 没有捆绑在一起（见下文）。

我认为这可能与 mini-css-extract-plugin 有关，但我已经使用高级配置示例根据文档对其进行了配置（我已将他们的示例拆分为一个配置文件，因为我有单独的配置dev 和 prod 的文件）。

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

Answer 1

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

“副作用”被定义为在导入时执行特殊行为的代码，而不是暴露一个或多个导出。一个例子是polyfills，它影响全局范围并且通常不提供导出。

和

请注意，任何导入的文件都会受到树摇动的影响。这意味着如果您在项目中使用类似 css-loader 的东西并导入 CSS 文件，则需要将其添加到副作用列表中，这样它就不会在生产模式下无意中删除

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