Webpack初体验：基础配置

1.前言

在笔者的印象里，从入门前端开始，用的构建工具好像一直是vite。

诚然，vite在中小型项目里，无论是启动速度 还是 模块热更新体验，都遥遥领先于webpack

但是，webpack在复杂项目的兼容性、插件生态方面有很大的优势。

相比于 Vite 主要依赖 Rollup 进行生产构建，Webpack 不仅提供了 更灵活的构建生命周期（如编译、优化、打包、输出等阶段），还拥有 强大的插件机制，使得其在 复杂项目和企业级应用中 更具优势。

同时,我过去的学习过程更多是基于 页面拼接与功能实现，而缺少对 模块化构建和项目架构设计 的深度理解。因此，通过学习 Webpack，我希望能够进一步掌握 模块依赖分析、资源优化、按需加载等前端核心架构能力

因此，我开启了这个系列，旨在记录我的学习过程

fetch API 进阶用法仍在酝酿中，敬请期待 😄

2.Webpack是什么

Webpack 是一个模块打包器，它通过解析项目中的模块依赖关系，构建完整的依赖图（Dependency Graph），并最终将资源（JavaScript、CSS、图片等）统一打包为静态文件。

Webpack的核心以以下五个关键部分组成

1. Entry（入口）

• 作用： 指定打包的入口文件，Webpack 会从这个文件出发，构建整个依赖图。
• 常见配置：

module.exports = {
  entry: './src/index.js', // 单入口
  // entry: { app: './src/app.js', admin: './src/admin.js' } // 多入口
};

---

2. Output（出口）

• 作用： 指定构建后文件的输出路径和文件名。
• 常见配置：

module.exports = {
  output: {
    path: __dirname + '/dist', // 输出目录
    filename: '[name].bundle.js', // 输出文件名
    clean: true, // 构建前清理旧文件
  },
};

---

3. Loaders（加载器）

• 作用： 用于转换模块，让 Webpack 能识别除 JS 以外的文件，如 CSS、图片、字体等。
• 常见 Loaders：
  • babel-loader：将 ES6+ 转换为 ES5。
  • css-loader：加载 CSS 文件。
  • style-loader：将 CSS 插入到 DOM 中。
  • file-loader：处理图片、字体等文件。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

---

4. Plugins（插件）

• 作用： 扩展 Webpack 功能，比如优化打包、资源管理、注入环境变量等。
• 常见 Plugins：
  • HtmlWebpackPlugin：自动生成 HTML 文件并引入打包后的 JS。
  • MiniCssExtractPlugin：分离 CSS 文件。
  • TerserPlugin：压缩 JS 代码。

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

---

5. Mode（模式）

• 作用： 决定构建模式，内置三种模式：
  • development：开发模式，开启 Source Map，不压缩代码。
  • production：生产模式，自动优化、压缩代码。
  • none：不做任何优化，仅打包。

module.exports = {
  mode: 'development',
};

3*. 从0开始 webpack应用的创建到基本配置

webpack应用的创建

首先 我们创建项目文件夹

mkdir webpack-demo
cd webpack-demo

在这个项目文件夹中 第一步 我们需先创建package.json

pnpm init

pnpm 会快速生成基本package.json文件

随后 安装webpack(核心打包工具) 和 webpack-cli(命令行工具，用于执行 Webpack 命令)

npm install webpack webpack-cli --save-dev

为什么要 --save-dev？

因为 Webpack 只在开发过程中使用，打包后的生产环境并不需要 Webpack 运行。

然后 在项目的根目录下 创建src文件夹

在src文件里 创建index.js 作为整个项目的入口文件

随便写点简单的js吧

然后 我们需要创建webpack的配置文件

touch webpack.config.js

然后我们就需要对这个配置文件进行编辑

首先 因为webpack默认采用CommonJS模块规范

我们需要使用这样的结构导出

module.exports = {

}

还记得之前说过的入口文件吗

我们通常以相对路径来配置它

module.exports = {
	entry: "./src/index.js"
}

配置完入口 我们自然而然会想到 这个项目构建完的产物需要放在哪里 即出口

但是由于指定的是文件输出路径 必须使用绝对路径进行配置

这时候我们就需要用到node.js提供的path模块来提供绝对路径

const path = require("path") //导入node.js的path模块

module.exports = {
	entry: "./src/index.js"
	output: {
		path: path.resolve(__dirname,'dist') //path.resolve用于拼接并解析出绝对路径
		// __dirname是node的内置常量 指向当前文件夹
		filename: "bundle.js" //单入口项目通用写法
    }
}

注：多入口项目的写法这篇博客不会介绍 敬请期待

配置完这些 我们还需要让我们的包管理器能找到webpack

所以我们需要在package.json中加入

"scripts": {
  "build": "webpack",
},

一个最基础的webpack应用就构建完成了

引入开发服务器 实现热重载

在开发过程中 我们肯定会对热重载有需求 但是前面部署的都是静态打包相关内容

于是我们今天更进一步 为我们的webpack应用安装webpack-dev-server

首先 安装相关依赖

npm install webpack-dev-server --save-dev

然后 我们需要在webpack.config.js中加入devServer相关内容

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname,"dist"),
        filename: 'bundle.js'
    },
    mode: "development",
    devServer: {
        static: path.join(__dirname,'dist'), //静态文件目录
        //path.join => 拼接多个路径
        port: 8080, //开发端口
        open: true, //自动打开浏览器
        hot: true //支持热重载
    }
}

为了方便启动 我们还需要在package.json里添加相关脚本

"scripts": {
    "build": "webpack",
    "dev": "webpack server" //启动开发服务器
  },

至此 我们的基本配置就完成了！

4. 写在最后

这篇文章只是一个开始，旨在帮助大家完成 Webpack 的基础配置与应用初体验。

但 Webpack 远不止于此。

在后续文章中，我将逐步深入，分两个方向继续分享我的 Webpack 学习过程：

• 应用实战： 从基础配置到多入口配置、插件集成、生产环境优化，带你一步步构建完整的 Webpack 项目。
• 原理剖析： 梳理 Webpack 的启动链路，从 pnpm run build 开始，到 webpack.config.js 的完整解析过程，深入剖析 CLI 模块、Compiler 模块、Compilation 模块 的内部工作原理。

此外，关于 打包优化、模块分割、缓存策略 等高级优化方法，我也将陆续更新，敬请期待。

📦 项目源码： Webpack Demo - GitHub