本文主要是介绍webpack4.15.1 学习笔记(九) — 最最基础的插件使用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

• html-webpack-plugin
• clean-webpack-plugin
• webpack-manifest-plugin
• HotModuleReplacementPlugin(内置)

处理 webpack 在编译过程中的某个特定任务的功能模块，plugins 选项用于以各种方式自定义 webpack 构建过程。其中webpack 附带了各种内置插件，可以通过 webpack.[plugin-name] 访问这些插件。

webpack 打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听 webpack 打包过程中的某些节点，执行广泛的任务。

html-webpack-plugin

简化了html文件的创建，以便为webpack包提供服务。该插件将生成一个 HTML5 文件，所有的 bundle 会自动添加到 html 中。

具体插入方式是将样式link插入到head元素中，script插入到head或者body中。

npm install html-webpack-plugin --save-dev

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

module.exports = {
    // ...
    plugins: [
      new HtmlWebpackPlugin({
        title: 'HtmlWebpackPlugin 插件学习',
        minify: {  
           removeComments: true, // 移除HTML中的注释
           collapseWhitespace: true, // 删除空白符与换行符
           minifyCSS: true, // 压缩内联css
        },
        inject: "head",  // 表示script标签插入位置，true(默认值), body, head, false(不插入)
      })
    ],
};

多页应用打包：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: {
    index: './src/index.js',
    login: './src/login.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({  
       filename: 'index.html',  // 多个HtmlWebpackPlugin, filename字段不可缺省，否则默认生成的都是 index.html。
    }),
    new HtmlWebpackPlugin({
       filename: 'login.html',  
    }),
  ],
}

但是会发现 index.html 和 login.html 同时引入了 index.bundle.js 和 login.bundle.js，而通常只希望 index.html 中只引入 index.bundle.js，login.html 只引入 login.bundle.js。
HtmlWebpackPlugin 提供了一个 chunks 的参数，可以接受一个数组，配置此参数仅会将数组中指定的 js 引入到 html 文件中

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', 
      chunks: ['index'],   // index.html 中仅引入了 index.js 文件
    }),
    new HtmlWebpackPlugin(
      filename: 'login.html', 
      chunks: ['login'],  // login.html 中仅引入了 login.js 文件
    }),
  ],
}

clean-webpack-plugin

在每次构建前清理 /dist 文件夹，用于生产环境，因为生产环境会生成许多bundle文件，不及时清理的话每次都生成新的，导致文件夹比较大，打包前清理上一次生成的 bundle 文件是比较推荐的做法，因此只会生成用到的文件。

npm install clean-webpack-plugin --save-dev

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

module.exports = {
    // ...
    plugins: [
         new CleanWebpackPlugin({
            // cleanStaleWebpackAssets 清除过时的网页包资产
            cleanStaleWebpackAssets: false   // 防止监听到改变时把没有改变的文件给清除了(当文件改变后不删除index.html文件)
        })
    ],
};

webpack-manifest-plugin

能够对「模块映射到输出 bundle 的过程」保持追踪。可以将数据提取到一个 json 文件中；说白了就是生成一个manifest.json 默认文件名， 是一个文件清单， 内容是打包前文件对应打包后的文件名。

npm install webpack-manifest-plugin --save-dev

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

module.exports = {
    // ...
    plugins: [
        new WebpackManifestPlugin() // 可以接受一个options 参数，默认在dist目录下生成 manifest.json
    ]
};

HotModuleReplacementPlugin(内置)

允许在运行时更新各种模块，而无需进行完全刷新。不适用于生产环境，意味着应当只在开发环境使用。启用HMR实际上就是更新 webpack-dev-server的配置，及使用 webpack 内置的 HMR 插件。

const webpack = require('webpack');
module.exports = {
    plugins: [
         new webpack.HotModuleReplacementPlugin(),
    ],
    devServer: {
        hot: true
    },
};

webpack要完全启用HMR需要使用webpack.HotModuleReplacementPlugin。如果webpack或webpack-dev-server 通过命令行添加 --hot 选项启动，该插件会自动添加，因此不需要将它添加到webpack.config.js中

但是经实际使用 webpack-dev-server 时发现，在webpack.config.js中仅仅配置了devServer.hot:true，并未添加上述插件时仍然实现了HMR
原来 webpack-dev-server 内部自动帮我们完成了这个事情。通过在Github 的 webpack-dev-server 搜索，找到以下源码：

if (options.hot || options.hotOnly) {
  config.plugins = config.plugins || [];
   // 判断了配置的插件中是否包含名为HotModuleReplacementPlugin的插件，如果没有则添加。
  if (
    !config.plugins.find(
      // Check for the name rather than the constructor reference in case
      // there are multiple copies of webpack installed
      (plugin) => plugin.constructor.name === 'HotModuleReplacementPlugin'
    )
  ) {
    config.plugins.push(new webpack.HotModuleReplacementPlugin());
  }
}

这篇关于webpack4.15.1 学习笔记(九) — 最最基础的插件使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！