个人学习笔记,仅供参考
Webpack
它会以一个或多个文件作为打包的入口,将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件,就可以在浏览器段运行了。我们将 Webpack
输出的文件叫做 bundle
1.新建项目文件夹,按图示新建基本结构
2、创建js文件
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(2, 1));
console.log(sum(1, 2, 3, 4));
3、下载webpack依赖
打开终端,来到项目根目录。运行以下指令:
3.1初始化package.json
npm init -y
生成的package.json文件中的name 不可以命名为 webpack 否则运行会报错
下载webpack 依赖
npm i webpack webpack-cli -D
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
等其他资源就会报错。所以需要更多配置来处理资源