Webpack
1.为什么要使用webpack?
随着前端越来越复杂，单独建几个文件来写业务代码，这样的方式已经无法保证项目的可维护性，所以我们就想把不同的业务逻辑拆成模块，然后去分开引入这些模块，每个模块自己做自己的，这样就保证项目的维护性和可扩展性，但假如你有几千个模块，那你能引入几千个js文件么？当项目大到这个程度上，我们就得借助工具来管理模块，webpack就是这样的工具，帮助我们管理复杂项目的一种工具。
- 与webpack类似的还有很多工具
Gulp Grunt browserify等等
但这两年，webpack工具的使用率直线上升，比如说：
Vue React Angular
这三大框架的脚手架工具都开始使用webpack来做底层代码的构建，这益于webpack可以提供其他工具无法实现的一个特性，比如说：Tree Shaking 懒加载 代码分割
用 webpack来做代码的管理工具，已经是越来越多做前端的共识了
2.webpack4有什么优点
- 相比之前，速度更快，大型项目节约90%构建时间
- 内置了更多默认配置，变更了许多API
3.webpack究竟是什么？
有人认为webpack就是js的翻译器，这个认识是错误的，它称不上翻译器，webpack只认识import这样的语句，其它js高级语法一概不认识，所以把它叫做js翻译器是错误的
webpack实际上是一个模块打包工具
核心定义：模块打包工具
webpack它能够把你引入的模块打包到一起生成一个js文件
webpack不仅可以识别ES Module模块，还有node用的CommonJS模块引入，CMD、ADM都可以识别
webpack最早是js模块打包工具，现在可以打包任何形式模块，还可以打包css文件 jpg文件
4.搭建webpack环境
1.搭建webpack环境
webpack是基于node.js开发的模快工具，所以他本质上是由node实现的
- 安装node.js
- 检查是否安装node node-v
- 检查npm npm-v
- 创建一个文件夹 webpack-demo
- 进入文件夹
- 输入npm init 一路配置生成一个package.json
2.安装webpack
两种方式：全局 项目安装两种方式
全局：npm install webpack webpack-cli -g
卸载：npm uninstall webpack webpack-cli -g
项目安装：打开创建的项目 webpack-demo项目
安装webpack：npm install webpack webpack-cli --save-dev
然后用npx webpack -v 搜索webpack
npx会帮助我们在当前项目的node_modules文件夹里去找webpack
npx可以在目录下运行存在于目录里的webpack
**项目安装的好处：**就是在不同的项目中，我们可以使用不同的webpack版本
1.看webpack的版本是否存在
npm info webpack
2.安装指定版本
npm install webpack@4.16.5 webpack-cli -D
3.查看版本
npx webpack -V
5.webpack的配置文件
当你引入一个图片，一个js的时候，打包的流程是不一样的
假如你引入一个js文件，那直接拿过js引入就可以了，但是加入你引入的是一个图片，只需要拿到图片地址就行，不用把图片整个文件打包到js里去
-
创建一个weboack.config.js文件
-
配置
-
然后npx webpack打包它
如果想换名称可以这样
npx webpack --config webpackconfig.js
还有一种打开pack.json文件，找到scripts里配置："bundle":webpack,当你运行bundle命令时，会自动帮你运行webpack命令
6.webpack打包知识点：
- Hash:代表本次打包对应的唯一一个hash值
- Version:打包使用的版本
- Time:当前这个包整体打包时耗时的77毫秒
- Built: Asset bundle.js 表示打包出一个bundle.js文件
- Size 1.36kib 文件大小
- Chunks 0 每一个js文件对应的id
- Chunks Names 每一个js文件对应的名字
- main 放的webpack.config.js文件里entry的main
