Webpack5插件示例，Webapck5 从入到精（一）

2023-10-05 22:58:25

理解 Webpack 插件

在构建前端项目时，Webpack 作为最流行的模块打包工具之一，提供了强大的插件机制。通过编写和使用插件，可以实现诸如代码压缩、环境变量注入、自动清理输出目录等功能。本文将介绍如何编写并应用四个常用的 Webpack5 插件实例。

安装与配置

在开始编写插件前，首先需要安装 Webpack 及其 CLI 工具：

npm install --save-dev webpack webpack-cli

接着，在项目根目录下创建一个 webpack.config.js 文件用于配置打包任务。基础的配置文件可以包含一些常见的设置，如入口（entry）、输出（output）等。

插件编写实例

1. 自动清理插件

自动清理插件在每次构建前删除指定的输出目录，确保生成的是最新版本的内容。使用时，需安装 clean-webpack-plugin：

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

配置示例如下：

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

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

2. 环境变量插件

在开发和生产环境中，可能需要不同的环境变量。webpack-environment-variables 插件可以用来注入这些变量。

安装插件：

npm install --save-dev webpack-environment-variables

配置示例：

const EnvironmentVariables = require('webpack-environment-variables');

module.exports = {
  plugins: [
    new EnvironmentVariables({
      variables: {
        NODE_ENV: process.env.NODE_ENV,
        API_URL: process.env.API_URL || 'http://localhost',
      },
    }),
  ],
};

3. 代码压缩插件

为了优化生产环境下的性能，通常需要对生成的 JavaScript 文件进行压缩。TerserWebpackPlugin 是一个常用的工具，它基于 Terser 的功能进行了封装。

安装并配置：

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

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

4. HTML 自动插入插件

在构建过程中自动生成并注入 HTML 文件，html-webpack-plugin 是一个常见的选择。这个插件可以自动创建 HTML 文件，并将生成的打包资源链接到其中。

安装与配置：

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

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 源HTML模板路径
    }),
  ],
};