Webpack 插件篇 plugins

plugin 作用

在特定的时刻，做特定的事情

• 在 webpack 运行的生命周期中会广播出许多的事件，plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 API 改变输出的结果
• plugin 是一个扩展器，它丰富了 webpack，本身针对的是 loader 结束后 webpack 打包的整个过程，它并不直接操作文件而是基于时间机制工作，监听 webpack 打包过程中的某些节点执行广泛的任务。
• plugin 的生成以及顺序：
  1.webpack 启动后在读取配置的过程中会执行 new MyPlugin 实例
  2.在初始化 compiler 对象后会通过 compiler.plugin(eventName, cb) 监听 webpack 广播出来的事件
  3.并可以通过 compiler 对象操作 webpack

plugin 是什么 ？有哪些常见的 Plugin ？

• define-plugin 定义环境变量，webpack4 之后会通过 mode 属性自动配置
• clean-webpack-plugin 打包之前删除 dist 目录
• html-webpack-plugin 打包结束后自动生成 html 模版文件，并把打包的结果注入

---

• ignore-plugin 忽略本地化内容，只打包核心功能
• uglifyjs-webpack-plugin 丑化压缩 js 代码，不支持 ES6 压缩（webpack4 以前）
• terser-webpack-plugin 支持 ES6 压缩（webpack4）
• webpack-parallel-uglify-plugin 开启多个子进程执行代码压缩，提升构建速度
• happypack 开启多个子进程打包，提升构建速度
• extract-text-wepack-plugin 分离样式文件，提取 css 为独立文件，支持按需加载（webpack4 移除）
• mini-css-extract-plugin 功能同上（webpack4 新加入并替换掉上述 extract-text-webpack-plugin 插件）
• CommonsChunkPlugin 提取公共业务与第三方类库代码（webpack4 中已经移除用 optimization.splitChunks 和 optimization.runtimeChunk 来代替）
• DllPlugin DllReferencePlugin 将指定版本的基本上不会修改的第三方依赖进行单独打包到 vendor 中去，并引用 manifest.json 把依赖映射到模板上，Dll 包是单独存在的只要不发生增减、升级，那么它的 hash 就不会变化，提升构建速度

---

• serviceworker-webpack-plugin 为网页应用增加离线缓存功能
• webpack.optimize.ModuleConcatenationPlugin 开启 Scope Hoisting 作用域提升，提升代码在浏览器中的执行速度
• speed-measure-webpack-plugin 速度测量的插件，可以看到整个打包的耗时、每个 plugin 和每个 loader 执行的耗时
• webpack-bundle-analyzer 分析 SPA 单页应用，可视化 webpack 输出文件的体积（业务组件、第三方模块）

TTK 前端开源框架 的 ttk-app-core 项目 用到的插件

• html-webpack-plugin:
  打包结束后自动生成 html 文件，并把打包结果注入。

const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入

    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', // 模板
        })
    ],

• clean-webpack-plugin:
  打包之前删除 dist。

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

    plugins: [
        new CleanWebpackPlugin()
    ],

• commonsChunkPlugin
  提取公共业务代码与第三方类库代码
  chunk指的就是一个代码块，即一个js文件。默认的情况下webpack只产生entry中指定的代码块，chunk的个数和entry中的key值个数相等，即单入口的情况下，默认只产出一个chunk。但是我们通常希望将入口之间的通用代码和第三方类库的代码提取出来，单独作为一个js文件来引用，第三方的文件一般很少变动，可以利用缓存机制把相关内容缓存起来，通用代码则可以避免重复加载。
  webpack4 中已经移除，换做 optimization.splitChunks 和 optimization.runtimeChunk 来代替

• extract-text-webpack-plugin：
  抽离引入的 css 样式，所以你的样式将不会内联到 JS bundle，而是在一个单独的 CSS 文件。压缩 js 文件 并与之一同加载。
  如果你的 webpack 版本是 4 建议用下面的 mini-css-extract-plugin

const ExtractTextPlugin = require("extract-text-webpack-plugin");

plugins.push(new ExtractTextPlugin(`[name].[hash:8].css`));

    rules: [{
        test: /\.(css|less)/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: [{
                loader: "css-loader",
                options: {
                    minimize: true
                }
            }, {
                loader: "less-loader"
            }]
        })
    }]

• mini-css-extract-plugin
  抽离引入的 css 样式 压缩 js 文件 并与之一同加载。

npm install -D mini-css-extract-plugin 

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

plugins.push(new MiniCssExtractPlugin({ // webpack 4
    filename: '[name].css',
    chunkFilename: '[id].css',
}))
// module 引入
        rules: [{
            test: /\.(css|less)/,
            use: [MiniCssExtractPlugin.loader, 'happypack/loader?id=css'] // webpack 4
        }

• ModuleConcatenationPlugin
  启用 scope hoisting 作用域提升，可以减少代码量，减少多个函数后内存占用减少，不用多次使用 __ webpack_require __ 调用模块，运行速度也会得到提升。只适用于使用 ES6 模块或使用异步 import();

new webpack.optimize.ModuleConcatenationPlugin();

• DllPlugin
  生成 manifest.json 文件，存储 runtime 的数据：在模块交互时，连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。

new webpack.DllPlugin({
    context: __dirname, // 上下文
    name: '[name]_lib', // 暴露的 Dll 的函数名 要与 output 的 library 保持一致
    path: path.join(__dirname, 'vendor', '[name].manifest.json'),
}),

• DllReferencePlugin
  通过引用 Dll 的 manifest 文件来把依赖的名称映射到模块的 id 之上，之后再在需要的时候通过内置的 __ webpack_require __ 函数来 require 他们

plugins.push(new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: merge(require('./vendor/vendor.manifest.json')),
}))

• es3ify-webpack-plugin-v2
  用于将 es5 最终输出 es3 的 webpack 插件，如果项目需要兼容 ie8 会用到它。

const es3ifyWebpackPlugin = require('es3ify-webpack-plugin-v2')

plugins.push(new es3ifyWebpackPlugin())

• HappyPack
  可以把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。代码以 css 为例如下：
  注：由于HappyPack 对file-loader、url-loader 支持的不友好，所以不建议对该loader使用。

const HappyPack = require('happypack')
const happyThreadPool = HappyPack.ThreadPool({ size: 12 });

plugins.push(new HappyPack({
    id: 'css',
    loaders: [{
        loader: 'css-loader',
    }, {
        loader: "less-loader",
        options: {
            "modifyVars": modifyVars,
            "javascriptEnabled": true 
        }
    }],
    threadPool: happyThreadPool,
}))

module: {
    rules: [{
        test: /\.(css|less)/,
        use: [MiniCssExtractPlugin.loader, 'happypack/loader?id=css'] 
    }]
},

• lodash-webpack-plugin
  去除 lodash 工具库中未引用的模块。

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')

plugins.push(new LodashModuleReplacementPlugin)

• MinChunkSizePlugin
  通过合并小于 minChunkSize 大小的 chunk，将 chunk 体积保持在指定大小限制以上。

plugins.push(new webpack.optimize.MinChunkSizePlugin({
    minChunkSize: 102400, // ~100kb
}))

• uglifyjs-webpack-plugin
  压缩 js 体积

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

optimization: {
    minimizer: [ 
        new UglifyJsPlugin({})
    ],
}

• optimize-css-assets-webpack-plugin
  压缩 css 体积

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

optimization: {
    minimizer: [ 
        new OptimizeCSSAssetsPlugin({})
    ],
}

• css-split-webpack-plugin
  IE9 will ignore any more than ~4000 selectors in your lovely generated CSS bundle.
  也就是说 IE9 浏览器会忽略超过 4000 个选择器的 css 文件，所以我们需要拆分 css 文件。

var CSSSplitWebpackPlugin = require("css-split-webpack-plugin").default;

plugins.push(new CSSSplitWebpackPlugin({ size: 3000 }));

• webpack-parallel-uglify-plugin
  并行压缩javascript文件(生产环境中使用，可以显著的提升构建速度)

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')

plugins.push(
    new ParallelUglifyPlugin({
        cacheDir: '.cache/',
        uglifyJS: {
            output: {
                comments: false
            }
        }
    })
)

• webpack-manifest-plugin
  生成一个 manifest.json 文件，并将所有源文件名称的映射映射到相应的输出文件

const ManifestPlugin = require("webpack-manifest-plugin");

plugins.push(new ManifestPlugin());