在本小节中，我们将详细讲解如何配置 Webpack 以进行项目的开发、打包和发布。我们将通过配置 webpack.config.js 文件和 package.json 文件来管理这些过程。

1. Webpack 综合配置文件

我们需要一个 webpack.config.js 文件来定义项目的基本配置，在项目根目录下创建一个名为 webpack.config.js 的文件。

// 引入 Node.js 的路径模块，用于处理和转换文件路径
const path = require('path');
// 引入 html-webpack-plugin 插件
const HTMLPlugin = require('html-webpack-plugin');

module.exports = {
  // 配置 webpack 的打包模式
  mode: 'production', // 也可以是 'development' 或 'none'

  // 配置入口文件，即 webpack 开始构建依赖图的文件
  entry: './src/index.js',

  // 配置输出文件，即打包后的文件存放位置
  output: {
    // 指定打包后的文件存放目录，使用 path.resolve 将相对路径转换为绝对路径
    path: path.resolve(__dirname, 'dist'),
    // 指定打包后的文件名
    filename: 'bundle.js',
    // 自动清理打包目录，只保留当前这次打包的文件
    clean: true
  },

  // 配置模块处理规则
  module: {
    rules: [
      {
        // 匹配所有以 .css 结尾的文件
        test: /\.css$/i,
        // 使用的 loader，先使用 css-loader 解析 CSS 文件，然后使用 style-loader 将 CSS 插入到 DOM 中
        use: ['style-loader', 'css-loader']
      },
      {
        // 匹配所有以 .ts 结尾的文件
        test: /\.ts$/,
        // 使用 ts-loader 处理 02.TypeScript 文件
        use: 'ts-loader'
      },
      {
        // 匹配所有以 .jpg、.png 或 .gif 结尾的文件
        test: /\.(jpg|png|gif)$/i,
        // 使用 asset/resource 类型加载图像资源
        type: 'asset/resource'
      },
      {
        // 匹配 .js 或 .mjs 文件
        test: /\.m?js$/,
        // 排除 node_modules 和 bower_components 目录
        exclude: /(node_modules|bower_components)/,
        // 使用 babel-loader
        use: {
          loader: 'babel-loader',
          options: {
            // 使用 @babel/preset-env 预设进行转换
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },

  // 配置插件
  plugins: [
    new HTMLPlugin({
      // 设置 HTML 页面的 title
      title: 'Hello Webpack',
      // 指定 HTML 模板文件路径，自动引入打包后的 JS 脚本
      template: './src/index.html'
    })
  ],

  // 配置源码映射，方便调试打包后的代码
  devtool: 'inline-source-map',

  // 配置开发服务器
  devServer: {
    // 配置代理，用于解决跨域请求问题
    proxy: {
      '/api1': {
        target: 'http://localhost:5000', // 代理目标的基础路径
        changeOrigin: true, // 控制请求头中的 host 值
        pathRewrite: {'^/api1': ''}, // 重写路径，利用正则替换请求前缀
        ws: true // 用于支持 websocket
      },
      '/api2': {
        target: 'http://localhost:5001', // 代理目标的基础路径
        changeOrigin: true, // 控制请求头中的 host 值
        pathRewrite: {'^/api2': ''} // 重写路径，利用正则替换请求前缀
      }
    },
    // 设置开发服务器的端口号
    port: 3000,
    // 在服务器启动后自动打开浏览器
    open: true
  }
};

2. package.json 配置

在 package.json 文件中，我们可以定义一些脚本来简化命令的运行，例如启动开发服务器和打包项目。

在项目根目录下创建一个名为 package.json 的文件，并添加以下内容：

{
  "name": "my-project", // 项目名称
  "version": "1.0.0", // 项目版本
  "description": "A project configured with Webpack", // 项目描述
  "main": "index.js", // 项目主入口文件
  "scripts": {
    "start": "webpack serve --config webpack.config.js", // 启动开发服务器，使用 webpack.config.js 配置文件
    "build": "webpack --config webpack.config.js", // 打包项目，使用 webpack.config.js 配置文件
    "dev": "webpack serve --config webpack.config.js --mode development", // 启动开发服务器，使用开发模式和 webpack.config.js 配置文件
    "prod": "webpack --config webpack.config.js --mode production" // 打包项目，使用生产模式和 webpack.config.js 配置文件
  },
  "author": "", // 项目作者
  "license": "ISC", // 项目许可证
  "devDependencies": { // 开发依赖
    "@babel/core": "^7.14.6", // Babel 核心库
    "@babel/preset-env": "^7.14.5", // Babel 预设，用于将现代 JavaScript 转换为兼容的旧版本 JavaScript
    "babel-loader": "^8.2.2", // Webpack 的 Babel 加载器
    "css-loader": "^5.2.6", // Webpack 的 CSS 加载器
    "html-webpack-plugin": "^5.3.1", // 生成 HTML 文件并自动引入打包后的资源的插件
    "style-loader": "^2.0.0", // 将 CSS 注入到 DOM 中的加载器
    "ts-loader": "^9.2.2", // Webpack 的 02.TypeScript 加载器
    "typescript": "^4.3.5", // 02.TypeScript 编译器
    "webpack": "^5.38.1", // Webpack 核心库
    "webpack-cli": "^4.7.2", // Webpack 的命令行工具
    "webpack-dev-server": "^3.11.2" // Webpack 开发服务器
  }
}

3. 脚本命令解析

1. 启动开发服务器

"start": "webpack serve --config webpack.config.js"

• webpack：运行 Webpack 命令。
• serve：使用 webpack-dev-server 启动开发服务器。
• --config webpack.config.js：指定 Webpack 的配置文件路径。这里明确告诉 Webpack 使用项目根目录下的 webpack.config.js 文件。

作用：

• 启动 Webpack 开发服务器。
• 自动监听文件变动并进行实时编译。
• 提供热模块替换（HMR）功能，实时刷新浏览器以展示最新的代码更改。
• 开发服务器启动后，会自动打开浏览器并访问 http://localhost:3000（基于 webpack.config.js 文件中的配置）。

2. 打包项目

"build": "webpack --config webpack.config.js"

• webpack：运行 Webpack 命令。
• --config webpack.config.js：指定 Webpack 的配置文件路径。

作用：

• 使用 Webpack 按照 webpack.config.js 文件中的配置打包项目。
• 打包后的文件会输出到配置文件中指定的 dist 目录中。
• 适用于生产环境下的代码打包。

3. 开发模式下启动服务器

"dev": "webpack serve --config webpack.config.js --mode development"

• webpack：运行 Webpack 命令。
• serve：使用 webpack-dev-server 启动开发服务器。
• --config webpack.config.js：指定 Webpack 的配置文件路径。
• --mode development：指定 Webpack 的模式为开发模式。

作用：

• 启动 Webpack 开发服务器，并使用开发模式进行配置。
• 开发模式下，构建速度更快，并启用了更多的调试功能，如 source map 和模块热替换（HMR）。
• 开发服务器启动后，会自动打开浏览器并访问 http://localhost:3000（基于 webpack.config.js 文件中的配置）。
• 适用于日常开发过程中的调试和开发操作。

4. 生产模式下打包项目

"prod": "webpack --config webpack.config.js --mode production"

• webpack：运行 Webpack 命令。
• --config webpack.config.js：指定 Webpack 的配置文件路径。
• --mode production：指定 Webpack 的模式为生产模式。

作用

• 使用 Webpack 按照 webpack.config.js 文件中的配置打包项目，并使用生产模式进行优化。
• 生产模式下，会进行代码压缩和其他优化措施，以提高代码的性能和加载速度。
• 打包后的文件会输出到配置文件中指定的 dist 目录中。
• 适用于将代码发布到生产环境之前的打包操作。