Webpack 会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。我们将 Webpack 输出的文件叫做 bundle，可以直接在浏览器段运行。

开始使用

1、项目目录

project-name# 项目根目录（所有指令必须在这个目录运行）

src# 项目源码目录

js# js 文件目录

count.js

sum.js

main.js# 项目主文件

package.json# 项目配置文件

config

webpack.config.js# Webpack 配置文件

build

build.js# 用以启动 Webpack 构建

2、创建文件

main.js

import count from "./js/count";
import sum from "./js/sum";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

count.js

export default function count(x, y) {
  return x - y;
}

sum.js

export default function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}

3、下载依赖

打开终端，来到项目根目录。执行以下操作：

• 初始化package.json

npm init -y

此时会生成一个基础的 package.json 文件。

• 下载依赖

npm i webpack webpack-cli -D

4、配置 Webpack

在项目根目录创建 webpack.config.js 文件。

大致代码如下：

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js", // 输出的文件名
    path: path.resolve(__dirname, "../dist"), // 输出的文件路径
  },
  module: {
    rules: [], // 暂时先不配置任何 rule
  },
  plugins: [], // 暂时先不配置任何 plugin
};

5、运行 Webpack

启用方式有两种：

1、通过 webpack 命令

通过运行 wepack 命令，使用 webpack 默认配置，可以传递参数

npx webpack ./src/main.js --mode=production

• npx webpack: 是用来运行本地安装 Webpack 包的。
• ./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。
• --mode=xxx：指定模式（环境）。

2、通过 node.js 执行构建文件

我们可以在项目下创建一个 build.js 文件，在文件中引入 webpack 包，来运行 webpack.config.js 文件。

const webpack = require("webpack"); // 引入 webpack 包
const webpackConfig = require("..config/webpack.config"); // 引入 webpack 配置文件
webpack(webpackConfig); // 启动构建

通过命令执行 node build/build.js 即可。

6、观察输出文件

默认 Webpack 会将文件打包输出到 dist 目录下，我们查看 dist 目录下文件情况就好了

扩展延伸

1、原生只支持 js

Webpack 本身功能比较少，只能处理 js 资源，一旦遇到 css、img 等其他资源就需要通过一些第三方包来处理。

后续我们提到loader 和 plugin 会涉及到。

2、显示构建信息

我们可以通过引入一些第三方的包，来在构建时显示一些构建进度等信息。

"use strict";
// 配置参数
process.env.NODE_ENV = "production";

const ora = require("ora"); // 引入 ora 包，用来显示终端 loading 效果
const rm = require("rimraf"); // 引入 rimraf 包，用来删除文件
const path = require("path"); // 引入 path 包，用来处理路径
const chalk = require("chalk"); // 引入 chalk 包，用来在终端输出带颜色的文字
const webpack = require("webpack"); // 引入 webpack 包
const webpackConfig = require("..config/webpack.config"); // 引入 webpack 配置文件

const spinner = ora("building for production..."); // 创建一个 ora 实例，用来显示终端 loading 效果
spinner.start(); // 启动 ora 实例

rm(
  // 删除上次构建的产物
  path.join(path.resolve(__dirname, "../dist"), "static"),
  (err) => {
    if (err) throw err;
    // 运行 webpack 进行构建
    webpack(webpackConfig, (err, stats) => {
      spinner.stop(); // 停止 ora 实例
      if (err) throw err;
      // 向控制台输出构建进度信息
      process.stdout.write(
        stats.toString({
          colors: true,
          modules: false,
          children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
          chunks: false,
          chunkModules: false,
        }) + "\n\n"
      );
      // 构建失败
      if (stats.hasErrors()) {
        console.log(chalk.red("  Build failed with errors.\n"));
        process.exit(1);
      }
      // 构建成功
      console.log(chalk.cyan("  Build complete.\n"));
      console.log(
        chalk.yellow(
          "  Tip: built files are meant to be served over an HTTP server.\n" +
            "  Opening index.html over file:// won't work.\n"
        )
      );
    });
  }
);

3、拆分生产环境

我们可以将 webpack.config.js 文件拆分成多个文件，分别用于开发环境和生产环境。

webpack.base.config.js# 基础配置

webpack.dev.config.js# 开发环境配置

webpack.prod.config.js# 生产环境配置

然后通过命令执行时，传递的一些参数，来启动不同的配置文件。

node build/build.js --mode=production

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24