【node】webpack使用

介绍

webpack 是一个模块打包工具，用于将多个模块打包成一个或多个文件。通过 Loader 和 Plugin 等工具，可以对不同类型的文件进行处理和转换。以下是基本使用及配置方法，更多配置参考官方文档。

文档地址：https://webpack.js.org

安装

1
npm install -D webpack webpack-cli

基本配置

webpack.config.js 以下是一个基本的 webpack 配置示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
const path = require("path");

module.exports = {
  // 模式（production 或 development）一般通过命令行参数指定
  mode: "production",

  // 单入口文件
  entry: "./src/index.js",

  // // 多入口文件
  // entry: {
  //   index: "./src/index.js",
  // },

  // 输出配置
  output: {
    path: path.resolve(__dirname, "dist"), // 输出目录
    filename: "[name].[chunkhash].bundle.js", // 输出文件名
  },

  // 模块规则（loader 配置）
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配 .js 文件
        exclude: /node_modules/, // 排除 node_modules 目录
        use: "babel-loader", // 使用 babel-loader 处理
      },
      {
        test: /\.css$/, // 匹配 .css 文件
        use: ["style-loader", "css-loader"], // 使用 style-loader 和 css-loader 多个 Loader 按照从右到左的顺序依次处理文件
      },
      {
        test: /\.(png|jpg|gif)$/, // 匹配图片文件
        use: "file-loader", // 使用 file-loader 处理
      },
    ],
  },

  // 插件配置
  plugins: [],

  // 开发服务器配置
  devServer: {
    static: "./dist", // 静态文件目录
    hot: true, // 启用热更新
  },
};

npm 脚本

基本脚本示例：

1
2
3
4
5
6
7
{
  "scripts": {
    "build:prod": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "serve": "webpack serve --mode development"
  }
}

常用 Loader

Loader 用于处理模块的源代码。它们将非 JavaScript 文件（如 CSS、图片、字体等）转换为 Webpack 能够处理的模块。以下是一些常用的 Loader

文档：https://webpack.js.org/loaders/

Babel Loader

用于将 ES6+ 代码转换为浏览器可识别的 JavaScript 代码。

安装

1
npm install -D babel-loader @babel/core @babel/preset-env

配置

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
    ],
  },
};

在项目根目录下创建 .babelrc 文件：

1
2
3
{
  "presets": ["@babel/preset-env"]
}

CSS Loader 和 Style Loader

用于处理 CSS 文件。

安装

1
npm install -D css-loader style-loader

配置

1
2
3
4
5
6
7
8
9
10
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

File Loader

用于处理文件（如图片）。

安装

1
npm install -D file-loader

配置

1
2
3
4
5
6
7
8
9
10
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: "file-loader",
      },
    ],
  },
};

常用 Plugin

Plugin 用于扩展 Webpack 的功能，处理构建过程中的特定任务。Loader 无法实现的功能，可以通过 Plugin 来实现。以下是一些常用的 Plugin

文档：https://webpack.js.org/plugins/

HtmlWebpackPlugin

自动生成 HTML 文件并注入打包后的资源。

安装

1
npm install -D html-webpack-plugin

配置

1
2
3
4
5
6
7
8
9
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html", // 模板文件
    }),
  ],
};

CleanWebpackPlugin

在每次构建前清理输出目录。

安装

1
npm install -D clean-webpack-plugin

配置

1
2
3
4
5
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

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

MiniCssExtractPlugin

将 CSS 提取为独立的文件。

安装

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

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "styles.css",
    }),
  ],
};

WebpackDevServer

Webpack 提供一个开发服务器，用于实时刷新和热更新。

安装

1
npm install -D webpack-dev-server

配置

1
2
3
4
5
6
7
module.exports = {
  devServer: {
    static: "./dist", // 静态文件目录
    hot: true, // 启用热更新
    open: true, // 自动打开浏览器
  },
};

启动开发服务器

1
webpack serve