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