没有使用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文件中。 我已经安装了各种加载器，插件等，并将我的配置拆分为常见的（共享的），dev和prod文件（根据文档），而且生活还不错。

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

怎么了

当我运行监视任务npm start styles.scss文件（导入到主index.js文件中），将gets编译为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有关，但是我已经按照文档使用高级配置示例进行了配置 （我将示例拆分为一个配置文件，因为我有单独的配置开发和生产文件）。

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

Answer 1

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

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

和

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

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