• Plugin
  • Hot-Module-ReplacementPlugin(热更新插件)
  • html-webpack-plugin(生成 html 文件)

转自

前端壹栈

Plugin

• 概念

  • 专注处理webpack在编译过程中的某个特定的任务功能模块，称为插件。plugin是一个扩展器，丰富了webpack本身，针对loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务。

• 特点

  • 是一个独立的模块
  • 模块对外暴露一个 js 函数
  • 函数的原型(prototype)上定义一个注入compiler对象的apply方法apply函数中需要有通过compiler对象挂载的webpack事件钩子，钩子的回调中能拿到当前编译的compliation对象，如果是异步编译插件的话可以拿到回调callback
  • 完成自定义子编译流程并处理compliation对象的内部数据
  • 如果异步编译插件的话，数据处理完成后执行callback回调

---

Hot-Module-ReplacementPlugin(热更新插件)

• Hot-Module-Replacement的热更新是依赖于webpack-dev-server，后者是在打包文件改变时更新打包文件或者reload刷新整个页面，HRM是只更新修改的部分。
• Hot-Module-Replacement-Plugin是webpack模块自带，引入webpack后在plugins配置项中直接使用即可。

const webpack = require('webpack');

const produce = {
  /* ... */
  plugins: [
    new webpack.HotModuleReplacementPlugin(), //热更新插件
  ],
  /* ... */
};

module.exports = produce;

---

html-webpack-plugin(生成 html 文件)

• 将webpack中entry配置的相关入口chunk和extract-text-webpack-plugin抽取的css样式插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个html文件，具体插入方式是将样式link插入到head元素中，script插入到head或者body中。

const HtmlWebpackPlugin = require('html-webpack-plugin')
const produce = {
    /* ... */
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.join(__dirname, '/index.html')
            minify: {   // 压缩
                removeComments: true // 移除注释
                collapseWhitesspace: true // 删除空白符与换行
                minifyCss: true // 压缩内联css
            },
            inject: true
        })
    ]
}

inject有四个选项值

• true：默认值，script标签位于html文件的body底部
• body：script标签位于html文件的body底部(同true)
• head：script标签位于head标签内
• false：不插入生成的js文件，只是单纯的生成一个html文件

---