webpack插件之extract-text-webpack-plugin

此插件在webpack中文官网的地址：

https://webpack.docschina.org/plugins/extract-text-webpack-plugin/

说明：
此插件主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。
安装：

$ npm install extract-text-webpack-plugin --save-dev

如果直接安装的话，会安装"extract-text-webpack-plugin": “^3.0.2”，执行webpack打包命令时会报错,因为extract-text-webpack-plugin支持webpack3.x版本的，面对webpack4.0版本，只能安装：

$ npm install extract-text-webpack-plugin@next --save-dev
//会下载到4.0的
//"extract-text-webpack-plugin": "^4.0.0-beta.0",

代码：

var path = require("path");
// 1、引入ExtractTextWebpackPlugin
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
module.exports = {
    entry: {
        index: "./src/index.js"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        publicPath: "dist/",
        filename: '[name].bundle.js',
        chunkFilename: "[name].bundle.js"// 指定打包文件的块名称
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextWebpackPlugin.extract({ 
                    // 2、使用ExtractTextWebpackPlugin
                    // 不提取的时候，使用什么样的配置来处理css
                    // fallback是指编译后用什么loader编译代码
                    fallback: {
                        loader: 'style-loader',
                        options: {
                            //此属性一般是在style-loader中使用，
                            //是指将多个css文件的代码统一合并到一个style标签中
                            singleton: true
                        }
                    },
                    use: [ 
                        // 提取的时候，继续用下面的方式处理
                        {
                            loader: 'css-loader',
                            options: {
                                //是否开启压缩功能
                                minimize: true
                            }
                        }
                    ]
                })
            }
        ]
    },
    plugins: [
        new ExtractTextWebpackPlugin({ 
            //3、 在plugins中配置属性
            filename: '[name].min.css', // 配置提取出来的css名称
            //true表示会把所有的css都提取出来，false只会把初始化的提取，默认是false
            allChunks:false,
            //
            
        })
    ]
}

extract-text-webpack-plugin多实例应用：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
// 创建多个实例
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: extractCSS.extract(['css-loader', 'postcss-loader'])
            },
            {
                test: /\.less$/i,
                use: extractLESS.extract(['css-loader', 'less-loader'])
            },
        ]
    },
    plugins: [
        extractCSS,
        extractLESS
    ]
};

此外，extract-text-webpack-plugin插件的优缺点分析，