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

Question

问题

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

更多信息

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

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

发生了什么

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

当我运行 npm run build应将 css 文件复制到 dist 文件夹中，应添加哈希 ID 并缩小 css。这是有效的(就像我上面说的)，我可以在构建步骤中看到 css 文件(见下面的第一个 Assets 。顺便说一句，忽略这里的 js 捆绑文件与下一个屏幕截图的区别。这是我在玩代码拆分的时候).

现在，当我运行它时，css 没有捆绑(见下文)。

我认为这可能与 mini-css-extract-plugin 有关，但我已经根据文档使用 advanced configuration example 配置了它(我已经将他们的示例拆分成一个配置文件，因为我有单独的开发和生产配置文件)。

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

Answer 1

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

A "side effect" is defined as code that performs a special behavior when imported, other than exposing one or more exports. An example of this are polyfills, which affect the global scope and usually do not provide an export.

和

Note that any imported file is subject to tree shaking. This means if you use something like css-loader in your project and import a CSS file, it needs to be added to the side effect list so it will not be unintentionally dropped in production mode

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