基本使用

webpack 是一个静态资源打包工具。 它会以 一个 或 多个文件 作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器段运行了。我们将 webpack 输出的文件叫做 bundle

功能介绍

Webpack 本身功能是有限的:

• 开发模式：仅能编译JS 中的 ES Module 语法
• 生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码

开始使用

1. 资源目录

webpack_code # 项目根目录（所有指令必须在这个目录运行）
    │
    └─ src # 项目源码目录
        │
        ├─ js # js文件目录
        │  │
        │  ├─ count.js
        │  │
        │  └─ sum.js
        │
        └─ main.js # 项目主文件

2. 创建文件

• 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);
    }
  

• main.js

    import count from "./js/count"
    import sum from "./js/sum"
    console.log(count(1, 2))
    console.log(sum(1, 2, 3, 4))
  

3. 下载依赖

打开终端，来到项目根目录。运行以下指令

• 初始化 package.json

# 会生成一个基础的 package.json 文件。
npm init -y
npx webpack ./src/main.js --mode=development

注意

package.json中 name 字段不能与 package.json 中配置的包名一致，否则报错

4. 启用 Webpack

• 开发模式

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

• 生产模式

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

  npx webpack： 是用来运行本地安装 webpack 包的。

  ./src/main.js：指定 webpack 从 main.js 文件开始打包，不但会打包main.js，还会将其依赖也一起打包进来。

  --mode=xxx：指定模式(环境)。

5. 观察输出

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

小结

webpack 本身功能比较少，只能处理 js 资源，一旦遇到 css 等其他资源就会报错。

所以我们学习 webpack ，就是主要学习如何处理其他资源。