Webpack之Plugins

概念

plugin可以在Webpack运行到某个时刻的时候，来自动做一些事情，类似于React里的生命周期函数。

HTMLWebpackPlugin

这个插件的主要功能是在打包结束之后，自动在输出目录下生成一个html文件，并把打包生成的JS文件自动的引入到这个html文件中。

使用

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports ={
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    module: {
        rules: [{
            test: /\.(webp|jpg|png)$/,
            use:{
                loader: 'url-loader',
                options: {
                    limit: 2048,
                    name: '[name].[ext]',
                    outputPath: 'images/'
                }
            }
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                 {
                     loader: 'css-loader',
                     options: {
                         modules: true
                     }
                 }
            ]
        }],
        plugins: [new HTMLWebpackPlugin()]
    }
};

先安装html-webpack-plugin，然后在配置文件中引入，然后配置一个plugins字段。

这样打包出来的html是一个空的html，仅仅引入了打包后的JS文件，如果我希望它按照一个模板来生成一个html，只是将打包后的JS文件引入，该怎么做？

很简单，new HTMLWebpackPlugin()这个构造函数接受一个对象参数，传入{template: 'src/index.html'}即可以按照我所传入的模板页面来生成一个新的html文件了。

clean-webpack-plugin

有些时候，我们更改了配置文件，例如修改了打包后的文件名，重新打包后会看到旧的文件依然存在，我们就会想如果Webpack能帮助我们先把上次打包的文件进行删除，然后再打包该多好。

这个心愿可以通过clean-webpack-plugin这个插件来实现：

使用

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports ={
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    module: {
        rules: [{
            test: /\.(webp|jpg|png)$/,
            use:{
                loader: 'url-loader',
                options: {
                    limit: 2048,
                    name: '[name].[ext]',
                    outputPath: 'images/'
                }
            }
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                 {
                     loader: 'css-loader',
                     options: {
                         modules: true
                     }
                 }
            ]
        }],
    },
    plugins: [
        new HTMLWebpackPlugin({template: 'src/index.html'}),
        new CleanWebpackPlugin()
    ]
};

这样就可以实现之前想要的效果了。在默认情况下，该插件就是删除output内指定的文件夹的。