Webpack 是一个前端构建工具,项目打包工具,用来管理和打包前端项目
1、Webpack 的核心概念
1、Entry
入口指示,Webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图
2、Output
输出指示,Webpack 打包后的资源 bundles 输出到哪里去,以及如何合并
3、Loader
Loader 让 Webpack 能够处理那些非 js 文件(Webpack 只能理解 js 文件)
4、Plugins
Plugins 让 Webpack 能够做到更强大的功能,扩展了 Webpack 的使用
5、Mode
2、Webpack 的基本使用
1、首先进行环境初始化
npm init
2、引入 Webpack 依赖
npm i webpack webpack-cli
3、打包文件
开发模式:
webpack 入口文件地址 -o 出口文件地址 --mode=development
生产模式:
webpack 入口文件地址 -o 出口文件地址 --mode=production
4、结论
- Webpack 能处理 js、json 资源,不能处理 css、img 等其他资源
- 生产环境和开发环境将 ES6 模块化编译成浏览器能够识别的模块化
- 生产环境比开发环境多一步压缩 js 代码