webpack之常用plugin的配置和使用

Posted 2020-12-19

概述

webpack中的插件主要是用来完成loader和配置无法完成的事情

常见的几种Plugins

htmlWebpackPlugin

• 参考文档
• html-webpack-plugin插件默认会创建一个HTML模板，并自动引入打包生成的几个主要的chunk包
• 也可以通过template属性配置自己的模板
• 通常在模板中使用jsp语法获取配置等信息，需要注意的是在模板中使用htmlWebpackPlugin（与插件名大小写不同）来获取属性 （eg. 通过使用htmlWebpackPlugin.options获取插件配置属性）
• 使用minify属性可以配置压缩选项
• 更多详细配置参考文档

安装

npm i -D html-webpack-plugin

使用

module.exports = {
    plugins: [
      new HtmlWebpackPlugin({
            // 复制./src/js/index.html 文件
            template: ‘./src/js/index.html‘,
            title: ‘webpack build‘, // template设置时或者使用html loader时 不起作用
            filename: ‘index.html‘,
            minify: {
                collapseWhitespace: true, // 移除空格
                removeComments: true // 删除html文件注释 打包时有效
            }
       })
    ]
}

MiniCssExtractPlugin

• 参考文档
• 该插件用于分割css chunk包
• 使用该插件时需要搭配MiniCssExtractPlugin.loader使用

安装

npm i -D mini-css-extract-plugin

使用

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: ‘[name].[contenthash].css‘,
      chunkFilename: ‘[name].[contenthash].css‘,
    })
  ],
  module: {
    rules: [
      {
        test: /.css$/,
        use: [MiniCssExtractPlugin.loader, ‘css-loader‘]
      }
    ]
  }
};

OptimizeCssAssetsWebpackPlugin

• 参考文档
• 该插件用于压缩css代码

安装

npm i -D optimize-css-assets-webpack-plugin

使用

module.exports = {
  plugins: [
    new OptimizeCssAssetsWebpackPlugin(),
  ]
};

NamedChunksPlugin

• 该插件包含在webpack中，不需要额外引用
• 使用该插件可以修改打包时的chunkName,在进行chunk缓存优化时，十分有用

使用

module.exports = {
  plugins: [
    new webpack.NamedChunksPlugin()
  ]
};

ProvidePlugin

• 该插件包含在webpack中，不需要额外引用
• 在全局引入模块 无需重复引入 代码中可以直接使用模块 （但使用的模块 仍需要是需要安装的哦）

使用

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({ // 
        $: ‘jquery‘,
        jQuery: ‘jquery‘
    })
  ]
};

注

• webpack插件文档
• 还有很多有用的插件，其它的以后补充