webpack 常用插件

HtmlWebpackPlugin

该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle

npm install --save-dev html-webpack-plugin

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  entry: "index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  plugins: [new HtmlWebpackPlugin()],
};

HotModuleReplacementPlugin

启用热模块更换，也称为 HMR。

HMR

永远不要在生产环境( production )下启用 HMR

webpack.config.js

const path = require("path");

module.exports = {
  entry: "index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
};

DefinePlugin

DefinePlugin 允许在 编译时 将你代码中的变量替换为其他值或表达式

webpack.config.js

const path = require("path");
const dotenvExpand = require("dotenv-expand");

module.exports = {
  entry: "index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": JSON.stringify(dotenvExpand.expand(env).parsed),
    }),
  ],
};

CleanWebpackPlugin

删除/清理构建文件夹

npm install --save-dev clean-webpack-plugin

webpack.config.js

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

module.exports = {
  entry: "index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  plugins: [new CleanWebpackPlugin()],
};

MiniCssExtractPlugin

将 CSS 提取到单独的文件中

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

webpack.config.js

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

module.exports = {
  entry: "index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
      chunkFilename: "css/[name].[contenthash:5].css",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css/,
        use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader"],
        exclude: /node_modules/,
      },
      {
        test: /\.less/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          "css-loader",
          "less-loader",
        ],
        exclude: /node_modules/,
      },
    ],
  },
};

TerserPlugin

用来优化 js 体积，包括重命名变量，甚至是删除整个的访问不到的代码块。

npm install --save-dev terser-webpack-plugin

webpack.config.js

const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  entry: "index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        test: /\.js(\?.*)?$/i, //匹配参与压缩的文件
        parallel: true, //使用多进程并发运行
        terserOptions: {
          //Terser 压缩配置
          output: { comments: false },
        },
        extractComments: true, //将注释剥离到单独的文件中
        terserOptions: {
          compress: { pure_funcs: ["console.log"] },
        },
      }),
    ].filter(Boolean),
  },
};

CssMinimizerPlugin

压缩 css

npm install --save-dev css-minimizer-webpack-plugin

webpack.config.js

const path = require("path");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  entry: "index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        parallel: true,
      }),
    ].filter(Boolean),
  },
};