Webpack 基础入门

Webpack 是一个前端构建工具，用于将项目中的各种资源（如 JavaScript、CSS、图片等）打包成浏览器可以识别的文件。

它的主要作用就是：以一个或多个文件为入口，分析依赖关系，将相关资源整合在一起输出成一个或多个打包文件（bundle），最终部署到浏览器运行。

Webpack 能做什么？

Webpack 的核心功能比较简单：

• 在 开发模式 下，它可以将使用 ES Module 语法的 JS 文件打包。
• 在 生产模式 下，除了打包 ES Module 外，还能对代码进行压缩优化。

注意：Webpack 本身只处理 JS，像 CSS、图片等资源需要使用“加载器（Loader）”来处理。

快速开始

1. 项目结构

假设我们有这样一个项目：

wp2/
├── src/
│   ├── js/
│   │   └── add.js
│   └── main.js

2. 编写源码

add.js

export default function (a,b) {
  return a+b
}

---

main.js

import add from "./js/add";

console.log(add(2, 1));

3. 初始化项目

打开终端进入项目根目录，运行：

npm init -y

根目录会自动生成一个 package.json 文件。

{
  "name": "wp1", // 项目名称
  "version": "1.0.0", // 项目版本
  "type": "module", // 项目中引入文件的方式 ESM、commonJS
  "exports": { // 在外部引入模块时，默认引入的路径
    "import": "./dist/index.mjs",
    "require": "./dist/index.cjs"
  },
  "scripts": {}, // 自定义命令脚本	
  "keywords": [], // 搜索关键词（用于 npm 搜索）
  "author": "", // 	作者信息
  "license": "ISC", // 开源协议
  "description": "", // 项目描述
  "dependencies": {}, // 项目运行所需的依赖，会被一起打包/发布
  "devDependencies": {} // 只在开发环境使用的依赖，打包后不存在
}

type 字段设置以后，项目内引入JS文件默认会变成设置的方式 如果想引入不同的类型 可以将文件名设置为 .mjs 或者是 .cjs

• .cjs 会被当成 CommonJS 模块解析
• .mjs 会被当成 ESM 模块解析

容易混淆

• type和exports字段并无关联
• type设置的是在内部文件中，引入js文件的模块时默认方式
• exports设置的是外部引入本模块时，不同方式下默认的路径

细节点

• type设置为module之后，内部在引入js文件时，后缀名不可以省略，需要写完整路径
• type设置为commonjs，js文件可以省略后缀名

4. 安装 Webpack

安装 Webpack 及其命令行工具：

npm i webpack webpack-cli -D

5. 打包项目

• 开发模式打包（不压缩，便于调试）：

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

• 生产模式打包（压缩优化后用于上线）：

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

命令解释

• npx webpack 使用本地安装的 webpack 执行打包
• ./src/main.js 指定入口文件
• --mode=xxx 指定打包模式（开发或生产）

6. 查看打包结果

执行打包命令后，会自动生成一个 dist/ 目录，里面就是 Webpack 打包输出的文件（bundle）。这些文件可以直接在浏览器中使用。

总结

Webpack 是一个很强大的打包工具，但默认只能处理 JavaScript 文件。

如果项目中包含：

• CSS / Less / Sass
• 图片 / 字体
• Vue / React 组件
• 等等……

就需要进行配置 Loader 和 Plugin