其他分享
首页 > 其他分享> > webpack4.15.1 学习笔记(九) — 最最基础的插件使用

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

作者:互联网

目录

处理 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.htmllogin.html 同时引入了 index.bundle.jslogin.bundle.js,而通常只希望 index.html 中只引入 index.bundle.jslogin.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