CSS没有使用Webpack 4和MiniCssExtractPlugin添加到/ dist文件夹
Issue
任何Webpack配置专家都能告诉我为什么我在运行npm run build
时无法将我的CSS提取到dist文件夹中?回购在这里:
Further info
总而言之,我一直在通过Webpack Guide docs工作,一切进展顺利。 js和css分别通过<link>
和<script>
标签注入我的index.html文件。我已经安装了各种加载器,插件等,并将我的配置分成普通(共享),开发和prod文件(根据文档),生活很好。
我碰巧做了一些调整,其中包括查看code splitting dynamic imports,为路径添加别名,将js移动到js文件夹等,并注意到当我运行构建npm run build
突然我的CSS没有被添加到dist文件夹。我为动态导入内容恢复了我的试用版更改并尝试恢复其他更改,但仍然遇到同样的问题。令人讨厌的是,我还没有添加git,所以没有清楚地描述我为找到我改变的内容所做的'调整'。
What happens
当我运行我的监视任务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文件(请参阅下面的第一个资产.Btw忽略了js捆绑文件与下一个屏幕截图的区别。这是我在玩代码分割的时候)。
现在当我运行这个时,css没有捆绑(见下文)。
我认为这可能与mini-css-extract-plugin有关,但我已根据使用advanced configuration example的文档配置了这个(我将它们的示例拆分为一个配置文件,因为我有单独的配置文件开发和生产)。
我真的不明白为什么会这样。帮助我SO读者。你是我唯一的帮助......
回答如下:我克隆了你的回购并试验了它。在你的package.json
,你已经设置:sideEffects: false
。这会导致导入的样式表在树抖动过程中丢失。这是described in the docs:
“副作用”定义为在导入时执行特殊行为的代码,而不是公开一个或多个导出。一个例子是polyfill,它影响全局范围,通常不提供导出。
和
请注意,任何导入的文件都会受到树抖动的影响。这意味着如果您在项目中使用类似css-loader的东西并导入CSS文件,则需要将其添加到副作用列表中,以便在生产模式下不会无意中将其删除
因此,将package.json
中的副作用更改为"sideEffects: ["./src/scss/styles.scss"]
,并在生产模式下将其输出到目标文件夹。