webpack4---生产环境css样式丢失问题

相信有很多人跟我一样看webpack4官方文档进行学习配置，但是在配置的过程中遇到一个非常奇怪的问题——“明明开发环境显示的好好地样式，在生产环境就不生效了”。

项目目录

//webpack.prod.js  
    plugins:[
        new HtmlWebpackPlugin({
            title:'production CSS分离',
            filename: 'index.html',
            template:'index.html',
            hash: true
        }),
        new MiniCssExtractPlugin({
            filename: "[name].[contenthash:4].css",
            chunkFilename: "[id].[contenthash:4].css"
        }),
    ],
    module:{
        rules:[
            {
                test:/\.css$/,
                exclude: /node_modules/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            }
        ]
    }

 运行npm run build后查看生成的dist文件夹，我们可以看到，dist文件夹下未生成css样式文件。

问题原因：

 在webpack官方文档中介绍了tree shaking :

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export

大致意思就是webpack4中tree-shaking会默认移除 JavaScript 上下文中的未引用的代码，用来达到减轻重量的思想，tree-shaking通过 package.json 的 "sideEffects" 属性判定哪个文件具有副作用，当 "sideEffects" ：false时，项目中未被引用到的文件会被移除判定均无副作用，就会把没有被引用的代码从环境中自动移除，这也是造成生产环境样式丢失的关键所在（生产环境和开发环境不同的 css配置方式也有一部分原因，在文章中不表示出来，会在下一篇文章中写到两个环境的不同css配置）。

解决办法：

定位问题之后，我们可以知道没有dist文件夹中没有css文件是因为默认判定未被引用被移除，因此将css文件添加到“sideEffects”数组中，就可以看到页面样式在生产环境中显示了。

//package.json

    //改前
  "sideEffects": false,  
    //改后
  "sideEffects": [*.css"]

改完之后build一下：  

可以看到css文件被打包了并且被引用我们生成的index页面中，问题解决，撒花✿✿ヽ(°▽°)ノ✿。