plugin
loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。 plugin选项用于以各种方式自定义 webpack 构建过程
- HtmlWebpackPlugin 生成html文件,并自动引入打包生成的js文件
- CleanWebpackPlugin在每次构建前清理 /dist 文件夹
- NamedModulesPlugin
- HotModuleReplacementPlugin/WebpackHotMiddleware
- optimization.splitChunks
optimization:{
splitChunks:{
cacheGroups: {
commons: {
name: "commons",
chunks: "initial",
minChunks: 2
}
}
}
}
复制代码
- DefinePlugin 定义全局常量
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
复制代码
编写一个插件
webpack 插件由以下组成:
- 一个 JavaScript 命名函数。
- 在插件函数的 prototype 上定义一个 apply 方法。
- 指定一个绑定到 webpack 自身的事件钩子。
- 处理 webpack 内部实例的特定数据。
- 功能完成后调用 webpack 提供的回调。
function MyPlugin (){
//命名函数
}
//apply方法
MyPlugin.prototype.apply = function(compiler){
//钩子事件
compiler.plugin('webpacksEventHook',function(compilation/* 处理 webpack 内部实例的特定数据。*/,callback){
console.log("This is an example plugin!!!");
// 功能完成后调用 webpack 提供的回调。
callback();
})
}
复制代码