webpack 是一个静态资源打包工具。

他会以一个或多个文件作为打包的入口,将我们整个项目所有文件编译组合成一个或多个文件输出出去。
输出的文件就是编译好的文件,就可以在浏览器端运行了。
我们将 webpack 输出的文件叫做 bundle
(将浏览器不识别的语法编译成识别的语法)

功能介绍

webpack本身功能是有限的:

  • 开发模式:仅仅能变易js中的 ES Module 语法。
  • 生产模式:能变易js中的 ES Module 语法,还能压缩代码。

开始使用

1、资源目录

├── dist# 打包目录│ └── main.js# 打包文件├── package-lock.json├── package.json# 包配置文件├── public# 静态资源目录│ └── index.html└── 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(5, 2);console.log(sum(1, 2, 3, 4));

3、下载依赖

打开终端,进入项目根目录,运行命令:
● 初始化 package.json

npm init -y

此时,会生成一个基础的package.json文件。
需要注意的是package.json中的name字段不能叫做webpack,否则下一步会报错(你的项目目录也不能叫package

● 下载依赖

npm i webpack webpack-cli -D

ps: -D 加入项目依赖

4、启用Webpack

● 开发模式(development)

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

● 生产模式(production

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

npx webpack:是用来运行本地安装webpack包的。
./src/main.js:是制定webpackmain.js文件开始打包,但不会打包main.js,还会将其他依赖也一起打包进来。
--mode=xxx:指定模式(环境)。

5、观察输出文件

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

小结

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