问题
有没有Webpack配置专家能告诉我为什么在运行npm run build
时,我不能将我的css提取到dist文件夹中?
存储库在这里: https://github.com/damodog/webpack4-boilerplate
更多信息
总结一下,我一直在按照Webpack指南文档的要求工作,一切都很顺利。 js和css通过<link>
和<script>
标签注入到我的index.html文件中。我安装了各种加载器、插件等,并将我的配置拆分成共同(共享)、开发和生产文件(根据文档),生活很美好。
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读者们。你们是我的唯一帮助...
mode: 'production'
与mini-css-extract-plugin一起使用会给我带来这个错误。 如果在我的webpack.prod.js配置文件中将其更改为mode: 'none'
,则CSS将被正确捆绑并添加到dist文件夹中。 尽管Webpack建议使用mode: 'production'
,但这似乎是一种hack方法! - Damodognew CleanWebpackPlugin(['dist'])
再放置new MiniCssExtractPlugin({...})
,会发生什么? - axm__