二十五、对线上CSS文件进行代码分割（打包成单独的CSS文件）------ 2019-07-20

一、之前我们已经处理过如果打包css文件以及其他类型的样式表文件：
那个时候我们打包项目的时候，项目中并没有生成对应的css文件，style-loader最终是将css文件挂载到了HTML的head部分，这时候webpack是将CSS的内容打包到JS文件中，这就是 CSS in JS的概念；
但是现在，我们现在想对CSS代码进行分割，以及生成对应的CSS文件；

二、使用MinCSSExtractPlugin插件对生产环境的代码进行CSS分割的插件使用：

   1、为什么这个插件只是在生产环境使用：因为这个插件不支持HMR（热模块替换），如果用在开发环境会影响我们的开发效率，因此这个插件最好是在生产环境中使用；

   2、MinCSSExtractPlugin的安装：npm install --save-dev mini-css-extract-plugin；

   3、MinCSSExtractPlugin的使用：

（1）在线上环境的配置文件中（webpack.prod.js）导入该插件：const MiniCssExtractPlugin = require('mini-css-extract-plugin');
（2）在plugins中使用插件：

const prodConfig = {
    mode: "production",
    // devtool: 'cheap-module-source-map',
    plugins:[
        new MiniCssExtractPlugin({})
    ]
}

（3）将webpack.common.js中的样式处理规则也就是module中的css对应的rules抽离出去，因为线上和开发环境的处理方式已经不一样了；

在生产环境的配置文件中新增module对象，将处理CSS和LESS的规则中的本来使用style-loader换成 MiniCssExtractPlugin.loader
 module: {
        rules: [
            // postcss-loader的配置 处理less文件
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2,
                            modules: true
                        }
                    },
                    'sass-loader',
                    'postcss-loader'
                ],
            },
            // 处理css文件
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2,
                            modules: true
                        }
                    },
                    'postcss-loader'
                ],
            },
        ]
    },

同样，在开发环境中的对应的规则直接挪过来使用，只是为了分离生产环境和开发环境；
 module: {
        rules: [
            // postcss-loader的配置 处理less文件
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2,
                            modules: true
                        }
                    },
                    'sass-loader',
                    'postcss-loader'
                ],
            },
            // 处理css文件
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2,
                            modules: true
                        }
                    },
                    'postcss-loader'
                ],
            },
        ]
    },

同时把webpack.common.js中对应的配置规则删除；

（4）此时，我们对项目进行打包，发现并没有打包出单个的CSS文件，还是将CSS打包到了JS中，这是因为我们在webpack中启用了 Tree Shaking ，此时只需要在package.json 中，将Tree Shaking影响的文件中将CSS文件排除；

"sideEffects": [
    "*.css"
  ],

三、optimize-css-assets-webpack-plugin插件对CSS代码进行压缩
1、安装：npm install --save-dev optimize-css-assets-webpack-plugin；
2、在生产环境中导入：const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
3、在生产环境的配置项 optimization 中使用插件：

  optimization: {
        minimizer: [new OptimizeCSSAssetsPlugin({})],
    },

这时webpack打包时，打包出的CSS代码是压缩后的代码；