Plugin 插件

插件更多着眼于自动化的工作。例如，生成了打包后的js文件，自动生成适当的html文件，并在内部引入打包文件。

clean-webpack-plugin

这个插件可以清理输出目录中不用的资源。

const path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
  mode: 'none',
  entry: path.join(__dirname, '../src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, '../output'),
    publicPath: 'output/'
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
  ]
}

html-webpack-plugin

用于在输出目录生成符合条件的html文件

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

module.exports = {
  mode: 'none',
  entry: path.join(__dirname, '../src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, '../output'),
    publicPath: 'output/'
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: '自动生成',
      meta: {
        viewport: 'width=device-width'
      }
    }),
    new HtmlWebpackPlugin({
      filename: 'xxx.html'
    }),
  ]
}

多次调用对象可以创建多个页面。

/**
 * 1. webpack加载webpack.config.js中所有配置。此时会new TestPlugin()，执行插件的constructor
 * 2. webpack创建compiler对象
 * 3. 遍历所有plugins中的插件, 调用插件的apply方法
 * 4. 执行剩下编译流程(触发各个hooks事件)
 */
class TestPlugins{
  constructor(){}

  apply(compiler){}
}

module.exports = TestPlugin;

MiniCssExtractPlugin

npm install --save-dev mini-css-extract-plugin

为每一个包含了 CSS 的 JS 文件创建一个 CSS 文件。

可以考虑较大的CSS再去单独导出。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 'style-loader',      // 替换，由这个loader处理
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin()
  ]
}

OptimizeCssAssetsWebpackPlugin

压缩CSS文件。

官方建议，压缩类的插件放到minimizer选项中，通过可配置的方式进行处理。

npm install --save-dev optimize-css-assets-webpack-plugin npm install terser-webpack-plugin --save-dev

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin')

module.exports = {
  // ...
  optimization: {
    minimizer: [
      new OptimizeCssAssetsWebpackPlugin(), // 但是配置在这里，默认的js压缩会不生效，需要再手动添加
      new TerserWebpackPlugin(),
    ]
  },
  plugins: [
    // new OptimizeCssAssetsWebpackPlugin()
  ]
}