基本使用

Webpack 是一个静态资源打包工具。它会以一个或者多个文件作为打包的入口，将我们整个项目所有文件编译组合整一个或多个文件输出出去。

输出的文件是编译好的文件，就可以在浏览器端运行了

我们将 Webpack 输出的文件叫做 bundle。

功能介绍

Webpack 本身功能是有限的：

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

开始使用

资源目录

webpack_code # 资源根目录（所有指令必须在这个目录下运行）
    └── public # 静态资源目录
        └── index.html # 项目入口文件
    └── src # 项目源代码目录
        ├── js # js文件目录
        |   ├── count.js
        |   └── sum.js
        └── main.js # 项目主文件

创建文件

count.js

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

sum.js

export default function sum(x, y) {
  return x + y;
}

main.js

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

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>Hello World Webpack</div>
    <script src="../src/main.js"></script>
  </body>
</html>

提示错误信息：Uncaught SyntaxError: Cannot use import statement outside a module

下载依赖

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

初始化package.json

npm init -y

此时会生成一个基础的package.json文件。需要注意的事package.json中name字段不能叫做webpack，否则下一步会报错。

下载依赖

npm i webpack@^5.77.0 webpack-cli@^5.0.1

启用 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:指定模式(环境)

观察输出文件

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

小结

Webpack本身功能比较少，只能处理js资源，一旦遇到css等其他资源就会报错。所以我们学习Webpack，主要是学习如何处理其他资源。