Webpack 4踩坑记：我的 CSS 在 Production mode 下进入了黑洞

问题原因：在 Webpack 4 的生产模式（production mode）下，CSS 文件未被正确提取或打包，导致 CSS 资源“消失”。这可能与 sideEffects 配置和 CSS 提取插件（如 mini-css-extract-plugin）的交互有关。

详细分析：

1. sideEffects 的影响：

   在 package.json 中设置 "sideEffects": false 会告知 Webpack 所有文件都是无副作用的，可以进行 tree-shaking。

   但 CSS 文件（如 .css、.less、.scss）和 .vue 文件通常是有副作用的（它们会直接修改 DOM 或引入样式）。

   如果这些文件未被正确标记为有副作用，Webpack 可能会在生产模式下错误地优化掉它们。

2. CSS 提取插件的问题：

   在生产模式下，Webpack 默认会启用更多的优化，包括代码压缩和 tree-shaking。

   如果 mini-css-extract-plugin 或其他 CSS 提取插件的配置不正确，或者与 sideEffects 配置冲突，CSS 文件可能不会被正确提取到单独的文件中。

3. .vue 文件的特殊性：

   .vue 文件是 Vue 单文件组件，它们通常包含模板、脚本和样式。

   如果 .vue 文件被错误地标记为无副作用，其中的样式部分可能会被优化掉。

解决方案：

1. 调整 sideEffects 配置：

   在 package.json 中，明确指定哪些文件是有副作用的。例如：

   "sideEffects": [ "*.css", "*.less", "*.scss", "*.vue"]

   这样可以确保 Webpack 不会错误地优化掉这些文件。

2. 检查 CSS 提取插件的配置：

   确保 mini-css-extract-plugin 已正确安装和配置。

   在 Webpack 配置中，确保生产模式下使用了该插件：

   const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = { // ... module: { rules: [ { test: /.css$/, use: [ process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader' ] } // 类似地配置 .less 和 .scss ] }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }) ]};

3. 验证生产模式配置：

   确保在生产模式下，Webpack 的配置没有其他可能导致 CSS 被优化的设置。

   可以尝试在生产模式下禁用某些优化（如 optimization.minimize: false）来测试是否是优化过程导致的问题。

4. 检查其他插件和加载器：

   确保没有其他插件或加载器在生产模式下干扰 CSS 的提取和打包。

总结：问题主要是由于 sideEffects 配置不当导致的，它使得 Webpack 在生产模式下错误地优化掉了 CSS 文件。通过调整 sideEffects 配置并确保 CSS 提取插件的正确使用，可以解决这个问题。同时，这也提醒我们在配置 Webpack 时需要仔细考虑各个选项之间的交互和影响。