plugin

plugin

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。 plugin选项用于以各种方式自定义 webpack 构建过程

1. HtmlWebpackPlugin 生成html文件，并自动引入打包生成的js文件
2. CleanWebpackPlugin在每次构建前清理 /dist 文件夹
3. NamedModulesPlugin
4. HotModuleReplacementPlugin/WebpackHotMiddleware
5. optimization.splitChunks

optimization:{
    splitChunks:{
      cacheGroups: {
        commons: {
          name: "commons",
          chunks: "initial",
          minChunks: 2
        }
      }
    }
  }
复制代码

6. 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 插件由以下组成：

1. 一个 JavaScript 命名函数。
2. 在插件函数的 prototype 上定义一个 apply 方法。
3. 指定一个绑定到 webpack 自身的事件钩子。
4. 处理 webpack 内部实例的特定数据。
5. 功能完成后调用 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();
  })
}
复制代码

转载于:https://juejin.im/post/5b33335fe51d45589f46a2fe