9 Webpack中的配置-Plugins

Plugins

Webpack通过集成Tapable这个库（Library），实现了自己的生命周期，比如构建开始前，构建进行中，构建结束等等。使得Webpack在构建中，在合适的生命周期中广播出相关的事件，而各种Plugin在收到自己感兴趣的事件后，就会去执行相应的逻辑操作。集成各种扩展插件是Webpack中一个重要的能力之一，开发者可以开发各种插件以此来解决许多Webpack本身不能处理的问题。

本节不会针对Plugin做出详细的介绍，只是介绍一下如何在Webpack中使用相关的插件。后面会有文章进行详细的介绍。

HtmlwebpackPlugin

在此之前，我们构建好的代码，需要手动在HTNML文件中通过script标签引入的方式才能使用。使用Html-webpack-plugin插件，可以根据HTML文件模板自动生成对应HTML文件，同时在生成的HTML文件注入输出资源的引用。

const HtmlwebpackPlugin = require("html-webpack-plugin");

module.exports = {
    
    
    plugins: [
        new HtmlwebpackPlugin({
    
    
            template: './src/index.html'
        })
    ]
}

CleanwebpackPlugin

多次执行构建的时候，输出目录中会保留之前构建的结果（如果output.filename中使用相关hash，来设置输出文件名称），之前的构建资源都是无效的，导致了输出目录体积变大。使用Clean-webpack-plugin插件，可以在构建的时候删除之前构建的结果，去除无用的资源：

module.exports = {
    
    
    mode: 'production',
    output: {
    
    
        filename: '[chunkhash:5].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlwebpackPlugin({
    
    
            template: './src/index.html'
        }),
        new CleanwebpackPlugin(),
    ]
}

在这里引入了新的依赖，在此之前需要安装相关依赖，命令如下：
npm i html-webpack-plugin clean-webpack-plugin -D

本章节提供案例源码下载：https://gitee.com/mvc_ydb/webpack/blob/master/plugins.zip