概述

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

常见的几种Plugins

HtmlWebpackPlugin

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

安装

1
npm i -D html-webpack-plugin

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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使用

安装

1
npm i -D mini-css-extract-plugin

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[name].[contenthash].css',
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  }
};

OptimizeCssAssetsWebpackPlugin

安装

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

使用

1
2
3
4
5
module.exports = {
  plugins: [
    new OptimizeCssAssetsWebpackPlugin(),
  ]
};

NamedChunksPlugin

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

使用

1
2
3
4
5
module.exports = {
  plugins: [
    new webpack.NamedChunksPlugin()
  ]
};

ProvidePlugin

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

使用

1
2
3
4
5
6
7
8
module.exports = {
  plugins: [
    new webpack.ProvidePlugin({ // 
        $: 'jquery',
        jQuery: 'jquery'
    })
  ]
};

注