创见博客
webpack 的基本使用
七崽爱吃小饼干2026/09/15阅读 0专栏 webpack 构建指南

为什么要使用 webpack

在前端工程化出现之前，我们通常用 <script> 标签逐个引入 JS 文件，样式则直接写在 HTML 里。当项目变大后，这种方式会暴露出一系列问题：

  • 依赖顺序难维护：脚本之间强依赖，加载顺序稍有不慎就会报错，手动管理成本极高。
  • 全局污染严重：没有模块系统，变量全挂在全局作用域上，容易互相覆盖。
  • 资源请求过多：每个文件一次 HTTP 请求，页面加载性能差。
  • 无法处理非 JS 资源：CSS、图片、字体等无法被当作模块来引用和处理。
  • 开发体验差：改完代码要手动刷新，缺少热更新、Source Map 等调试手段。

webpack 正是为解决这些问题而生的静态模块打包工具（module bundler）。它从入口文件出发，递归分析模块依赖，把所有资源（JS、CSS、图片等）看作模块，最终打包成浏览器可用的产物。它带来的核心价值包括：

  1. 模块化开发：支持 ES Module、CommonJS 等规范，用 import / require 组织代码。
  2. 按需处理资源：借助 loader 把 CSS、图片、字体等纳入构建流程。
  3. 性能优化：通过代码分割、Tree Shaking、文件指纹等优化加载性能。
  4. 强大的开发体验：dev-server 热更新、Source Map、自动刷新等。
  5. 生态完善：丰富的插件体系，几乎能覆盖所有构建需求。

webpack 的基本使用

1. 安装

webpack 需要同时安装核心包和命令行工具：

bash
npm init -y
npm install webpack webpack-cli --save-dev

2. 基础目录结构

demo/
├── src/
│   ├── index.js
│   └── utils.js
├── public/
│   └── index.html
├── package.json
└── webpack.config.js

3. 编写入口与依赖模块

src/utils.js：

js
export function sum(a, b) {
  return a + b;
}

src/index.js：

js
import { sum } from './utils.js';

console.log('1 + 2 =', sum(1, 2));

4. 配置文件

在项目根目录创建 webpack.config.js：

js
const path = require('path');

module.exports = {
  // 打包模式：development | production | none
  mode: 'development',
  // 入口文件
  entry: './src/index.js',
  // 输出配置
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true, // 每次打包前清空 dist
  },
};

5. 执行打包

bash
npx webpack

打包完成后会在 dist 目录生成 bundle.js，在 HTML 中引入即可：

html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>webpack demo</title>
  </head>
  <body>
    <script src="../dist/bundle.js"></script>
  </body>
</html>

6. 处理 CSS 资源

webpack 默认只认识 JS 和 JSON，处理其他资源需要 loader：

bash
npm install style-loader css-loader --save-dev
js
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        // 从右到左执行：先 css-loader 解析，再 style-loader 插入页面
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

之后在 JS 中直接引入样式即可：

js
import './style.css';

7. 使用 dev-server 提升开发效率

bash
npm install webpack-dev-server --save-dev
js
module.exports = {
  // ...
  devServer: {
    static: './dist',
    open: true,   // 自动打开浏览器
    hot: true,    // 热更新
    port: 8080,
  },
};

在 package.json 中添加脚本：

json
{
  "scripts": {
    "build": "webpack",
    "dev": "webpack serve --mode development"
  }
}

之后：

bash
npm run dev    # 启动开发服务器
npm run build  # 生产环境打包

小结

webpack 通过「入口 → 依赖图 → 输出」的核心模型，把零散的前端资源统一纳入模块化构建流程，解决了依赖管理、资源处理、性能优化等一系列痛点。掌握 entry、output、loader、plugin、devServer 这几个核心配置项，就足以应对大多数日常项目的构建需求。

评论
0/100