webpack4.15.1 学习笔记(九) — 最最基础的插件使用

2022-08-29 21:01:21 阅读：250 来源： 互联网

标签：index 插件 plugin webpack4.15 最最 js webpack html plugins

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());
  }
}

标签：index,插件,plugin,webpack4.15,最最,js,webpack,html,plugins
来源： https://www.cnblogs.com/echoyya/p/16637335.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack4.15.1 学习笔记(九) — 最最基础的插件使用

html-webpack-plugin

clean-webpack-plugin

webpack-manifest-plugin

HotModuleReplacementPlugin(内置)