webpack学习笔记—plugins

plugins来啦~plugins是为了解决loader无法解决的事情~
plugins:Array
插件可以携带参数/选项，在config配置中，向plugins传入new实例。下面列举了一些常用plugin~

1.html-webpack-plugin：html入口文件
这个插件主要有两个用处：
1). 为html文件引入外部资源，如打包生成的js、css等，每次构建后不需要自己手动修改；
2). 生成创建html文件，一个html文件对应一个入口，可以配置N个html-webpack-plugin生成N个入口~也可以通过函数批量生成~

// html入口
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    plugins: [
        // 单个入口配置
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src/index.html'),
            filename: 'search.html',
            // 使用chunk,与注入的打包好的文件名对应
            chunks: ['search'],
            // 打包出的chunk自动注入
            inject: true,
            minify: {
                html5: true,
                // 删除空格和换行符，若preserveLineBreaks参数设为true，则保留了换行符
                collapseWhitespace: true,
                preserveLineBreaks: false,
                minifyCSS: true,
                minifyJS: true,
                removeComments: false
            }
        })
    ]
};

以上是单个入口的配置，若需要配置多个入口呢？可以依次添加多个，也可以通过函数生成，类似多文件入口的做法，在之前的entry篇提到过，这次就在之前函数的基础上进行扩展~

const setMPA = () => {
    const entry = {};
    const htmlWebpackPlugins = [];

    const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'));
    Object.keys(entryFiles).map(index => {
        const entryFile = entryFiles[index];
        const match = entryFile.match(/src\/(.*)\/index\.js/);
        const pageName = match && match[1];
        entry[pageName] = entryFile;
        const htmlWebpackPlugin = new HtmlWebpackPlugin({
            template: path.join(__dirname, `src/${pageName}/index.html`),
            filename: `${pageName}.html`,
            // 使用chunk
            chunks: [pageName],
            // 打包出的chunk自动注入
            inject: true,
            minify: {
                html5: true,
                // 删除空格和换行符，若preserveLineBreaks参数设为true，则保留了换行符
                collapseWhitespace: true,
                preserveLineBreaks: false,
                minifyCSS: true,
                minifyJS: true,
                removeComments: false
            }
        });
        htmlWebpackPlugins.push(htmlWebpackPlugin);
    });
    return {
        entry,
        htmlWebpackPlugins
    };
};

const {entry, htmlWebpackPlugins} = setMPA();

// 直接在plugins的值上进行拼接
module.exports = {
    plugins: [].concat(htmlWebpackPlugins)
};

2.optimize-css-assets-webpack-plugin：压缩CSS
配合cssnano使用，对CSS做多方面的优化，保证最终生成的文件体积是最小的。

// css压缩
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

plugins: [
    new OptimizeCSSAssetsPlugin({
        assetNameRegExp: /\.css$/g,
        cssProcessor: require('cssnano')
    })
]

3.mini-css-extract-plugin：抽离CSS为单独文件

// 将CSS抽离成单独文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports ={
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name]_[contenthash:8].css'
        })
    ]  
};

使用时需要和loader结合使用，解析CSS时先用CSS-loader进行解析，然后通过MiniCssExtractPlugin.loader将CSS抽离成单独文件~在服务端渲染推荐使用~

4.clean-webpack-plugin：清理构建产物
每次打包都会生成dist文件夹，执行构建之前不删除的话，dist目录会越来越大~解决这种请求，有两种方法：
1).在package.json中配置命令

// package.json
"scripts": {
    "build": "rm -rf ./dist && build"
}

2).使用插件clean-webpack-plugin
注意：node v8.0+ && webpack v3.0+

// 清理构建产物，新版按需引入，不能直接引入
// TypeError: CleanWebpackPlugin is not a constructor
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

plugins: [
    new CleanWebpackPlugin()
]

这里，需要注意下版本~老版本可以直接引入，新版需要按需引入~目前我引用的是3.0版本，需要按需引入~大家使用的时候可以注意下，如果比3.0版本旧的话，可以先尝试直接引入，如果报错TypeError: CleanWebpackPlugin is not a constructor，再修改为按需引入~

5.html-webpack-externals-plugin：基础库不打包，直接CDN引入
开发时，有时候需要引入一些基础库，如react开发时，每个组件都需要引入react和react-dom，我们打包时这两个基础库体积较大，导致构建出来的包提交变大~这个时候，我们可以考虑将react和react-dom在html中用CDN引入~

// wepack.config.js
// 基础库不打包，直接CDN引入
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');

module.exports = {
    new HtmlWebpackExternalsPlugin({
        externals: [
            {
                module: 'react',
                entry: 'https://11.url.cn/now/lib/16.2.0/react.min.js',
                global: 'React'
            },
            {
                module: 'react-dom',
                entry: 'https://11.url.cn/now/lib/16.2.0/react-dom.min.js',
                global: 'ReactDOM'
            }
        ]
    })
};

// index.html
<script type="text/javascript" src="https://11.url.cn/now/lib/16.2.0/react.min.js"></script>
<script type="text/javascript" src="https://11.url.cn/now/lib/16.2.0/react-dom.min.js"></script>

6.friendly-errors-webpack-plugin：构建日志优化提示
执行构建时，每次都输出好多内容，有的时候，我们其实是不关注构建过程和构建结果的，只关心构建是否成功。这个插件就是一个不错的选择~

// 构建日志优化提示
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

module.exports = {
    plugins: [
        new FriendlyErrorsWebpackPlugin()
    ]
};

还有一种方式可以改变输出内容，配置stats

module.exports = {
    stats: 'errors-only'
};

如果使用了webpack-dev-server，则stats这个配置项需要放在devServer中~

devServer: {
    contentBase: './dist/',
    hot: true,
    stats: 'errors-only'
}

暂时就到这里了~源码请移步demo