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頁面中，問題解決，撒花✿✿ヽ(°▽°)ノ✿。