基本使用
webpack 是一个静态资源打包工具
它会以一个或多个文件作为打包入口,将我们的整个项目的所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件,就可以在浏览器端运行了。我们将webpack输出的文件叫做bundle
功能介绍
webpack 本身功能是有限的:
- 开发模式: 仅能编译js中的
ES module语法。 - 生产模式: 能编译js中的
ES module语法,还可以压js代码。
webpack 基本使用
下载依赖
- 初始化package.json
npm init
生成package.json文件
tip:package.json文件的name不能叫做webpack,否则下一步会报错
- 下载
webpack
npm install webpack webpack-cli
- 启用
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,还会将main.js中的依赖项一起打包。
- 查看输出文件
默认webpack会将文件打包输出到dist目录下。
webpack本身功能比较少,只能处理js资源,一旦遇到css等其他资源就会报错。所以我们要学习如何使用webpack处理其他资源。