【webpack】webpack 常用插件集合

1. extract-text-webpack-plugin

webpack默认会将css当做一个模块打包到一个chunk中，extract-text-webpack-plugin的作用就是将css提取成独立的css文件

首先安装和引入：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

注册：

new ExtractTextPlugin({
    filename: 'css/[name].css',
})

注册之后，还要在css的loader中使用：

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        use: ['css-loader','postcss-loader','less-loader'],
        fallback: 'vue-style-loader',  #使用vue时要用这个配置
    })
},

ExtractTextPlugin.extract参数解释：

use：指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
fallback：编译后用什么loader来提取css文件
publicfile：用来覆盖项目路径,生成该css文件的文件路径

该插件的最新版最高支持webpack3，如果需要支持webpack4，这样安装

yarn add extract-text-webpack-plugin@next

2. CommonsChunkPlugin

CommonsChunkPlugin 主要是用来提取第三方库（如jQuery）和公共模块(公共js，css都可以)，常用于多页面应用程序，生成公共 chunk，避免重复引用。

CommonsChunkPlugin 是webpack集成的优化插件，可以直接使用，使用方式：

{
    entry: {
        vendor: 'index.js'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['vendor','runtime'],
            filename: '[name].js'
        }),
    ]
}

参考地址：这里

webpack4已经移除了该插件，用 SplitChunksPlugin 替代

3. html-webpack-plugin

这个插件很重要，作用一是创建HTML页面文件到你的输出目录，作用二是将webpack打包后的chunk自动引入到这个HTML中

首先安装和引入：

const HtmlPlugin = require('html-webpack-plugin')

如果是单页面应用，用法很简单了：

new HtmlPlugin({
    filename: 'index.html',
    template: 'pages/index.html'
}

template 是模板文件的地址，filename 是根据模板文件生成的html的文件名

如果是多个html页面的话，就需要多次实例化HtmlPlugin。比如现在有index.html和login.html两个页面：

{
    entry: {
        index: './src/index.js',
        login: './src/login.js'
    },
    plugins: [
        new HtmlPlugin({
            filename: 'index.html',
            template: 'pages/index.html',
            excludeChunks: ['login'],
            chunksSortMode: 'dependency'
        },
        new HtmlPlugin({
            filename: 'login.html',
            template: 'pages/login.html',
            excludeChunks: ['index'],
            chunksSortMode: 'dependency'
        }
    ]
}

需要着重关注两个参数：excludeChunks和chunksSortMode

前面说了，该插件的作用二是将webpack打包后的chunk自动引入到生成的html中。上面的配置有两个入口文件，所以打包后会有index和login两个chunk，而在生成的两个html页面中都会引入这两个chunk。事实上一个html文件中只需要引入相应的chunk就够了，比如index.html只需要引入index的chunk。

excludeChunks就是解决上面问题的。其作用是指定生成的页面中不引入某个chunk，当然了还有一个chunks参数表示指定引入某个chunk。

多页面中一般会提取公共部分的chunk，这个时候一个html页面会引入多个chunk，而这些chunk之间是有依赖关系的。即必须按照顺序用script标签引入。chunksSortMode是用来指定这种顺序的排序规则。dependency是指按照依赖关系排序。

4. ModuleConcatenationPlugin

ModuleConcatenationPlugin插件用于开启 Scope Hoistng ，可以让打包出来的代码文件更小，运行更快！

ModuleConcatenationPlugin 是webpack集成的优化插件，可以直接使用，使用方式：

{
    resolve: {
        mainFields: ['jsnext:main','browser','main']
    },
    plugins: [
        new webpack.optimize.ModuleConcatenationPlugin()
    ]
}

如果你使用webpack4，mode已经自动集成了

{
    mode: 'production'
}