十一：生产环境—分离 css，开发环境不需要分离

    在之前的版本中，分离 css 一直用的是 extract-text-webpack-plugin，但是如果在 webpack4.x 上继续使用，你会发现它会报错的，要想继续使用这个插件，
必须 npm i extract-text-webpack-plugin@next -D 才可以，这样下载的就是最新的版本，而不是稳定版本，在写本文时，就是 4.0beta 版本，当然如果这个版本已经是稳定版本了，那就不用加 @next 了~
当然 webpack 团队专门针对 webpack4.x 又另外写了一个插件来做这件工作，那就是 mini-css-extract-plugin

1：安装插件

npm i mini-css-extract-plugin -D

2：修改 webpack.prod.conf.js 文件

需要用到该插件的是生产环境，开发环境，我们不需要去把 CSS 单独分离出来
先引入：
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

3：修改 css scss less 所使用的 loader

{
    test: /\.css$/,
    use: [
        MiniCssExtractPlugin.loader,
        {
            loader: 'css-loader'
        },{
            loader: 'postcss-loader',
            options: {
                sourceMap: true,
                config: {
                    path: 'postcss.config.js'
                }
            }
        }
    ]
},
{
    test: /\.scss$/,
    use: [
        MiniCssExtractPlugin.loader,
        {
            loader: 'css-loader', 
        },
        {
            loader: 'postcss-loader',
            options: {
                sourceMap: true,
                config: {
                    path: 'postcss.config.js'
                }
            }
        },
        {
            loader: 'sass-loader', 
            options: { sourceMap: true }
        }
    ],
    exclude: /node_modules/
},
{
    test: /\.less$/,
    use: [
        MiniCssExtractPlugin.loader,
        {
            loader: 'css-loader', 
            options: {
                importLoaders: 1,
            }
        },
        {
            loader: 'postcss-loader',
            options: {
                sourceMap: true,
                config: {
                    path: 'postcss.config.js'
                }
            }
        },
        {
            loader: 'less-loader', 
            options: { 
                sourceMap: true,
            }
        }
    ]
},
可以看出，和开发相比，我们只是把 style-loader 的引用整体改为了 MiniCssExtractPlugin.loader

4：在 plugins 中添加引用

new MiniCssExtractPlugin({
    filename: 'css/[name].[hash].css',
    chunkFilename: 'css/[name].[hash].css',
})

到此，我们分离 CSS 就算全部完成了，运行命令 npm run build 查看效果我们打开 bin 文件夹，可以看到 css 文件夹下已经生成了 app.css 文件，而且 index.html 文件中也已经自动引入了该文件

直接在浏览器打开该文件，一切显示正常，说明分离成功~