3. webpage4.0 mini-css-extract-plugin插件简单介绍

简介：

mini-css-extract-plugin 帮助我们从成的js中把css部分剥离出来，生成新的css文件。
使用方式简单，是extract-text-webpack-plugin的替代品

安装 npm i -D mini-css-extract-plugin
修改webpack.config.js

    const path= require ('path');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    module.exports = {
        entry:'./app.js', 
        output: {
        filename:'bundle.js',
        path: path.resolve( __dirname,'dist')
        },
        module:{
            rules:[
                {
                    test:/\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader'
                    ]

                }
            ]
        },
        plugins:[
            new MiniCssExtractPlugin(
                {
                    filename: `[name].css`
                }
            )
        ],
        mode: 'none'
    }

webpack4.0 推荐使用MiniCssExtractPlugin，对css进行处理。它会从bundle.js中提取css代码，在plugins指定生成的文件名称。MiniCssExtractPlugin相对于老版本的ExtractTextPlugin
使用方式也更好理解些。下面我们来回顾一下使用loader是怎么处理的。

    module:{
        rules:[
            {
                test:/\.css$/,
                use: ['style-loader', 'css-loader'], 
            }
        ]
    }

其实从形式上来看MiniCssExtractPlugin.loader就是替代style-loader，具体的实现了什么，我们后续再讨论。
既然是从bundle.js中剥离出css来，那总要生成文件吧，那么plugins的配置项就有存在的意义了。

修改index.html引入生成的文件

<!DOCTYPE html>
<html>
    <head> <meta charset="UTF-8"> </head> 
    <link href="./dist/main.css" rel="stylesheet" type="text/css" /> 
    <body> <div id="app" ></div>
         <script src="./dist/bundle.js"></script>
    </body>
</html>

可以查看dist 文件夹，已经生成了main.css，直接引用就行

上一篇 2.webpack入门使用loader处理css
下一篇 4. webpack4.0 热跟新webpack-dev-server的使用