什么是Webpack
webpack是一个打包工具-模块解析器，因为浏览器只能识别js和json文件，其他的不能识别，而我们项目又有很多其他文件，这时候，webpack就起作用了，把这些浏览器不能识别的文件解析成js或序列化string和buffer等，然后在嵌入到js代码中
总结下，webpack是一个打包模块化的Javascript工具，它会从入口模块出发，识别出源码的模块化导入语句，递归的找出入口文件的所有依赖，将入口和其所有依赖打包到一个单独的文件中
Webpack安装
-
全局安装
npm install webpack webpack-cli -g不推荐！！！- 全局安装 版本会固定！ 升级需要手动！！！
- 加入手上有多个项目（新的、旧的，导致webpack版本不一致有的3.x 4.x 5.x）
-
局部安装-项目安装 推荐！
- 安装最新的4.x稳定版本，因为5.x存在一些bug
- yarn add webpack@4.43.0 webpack-cli@3.3.12 -D 开发依赖
- 校验安装成功 npx webpack -v
Webpack启动与构建
1、webpack4支持零配置启动
- 默认配置文件名webpack.config.js
- 默认入口文件src/index.js，出口dist/main.js
2、如果默认配置文件改名如config.js，则启动命令为npx webpack --config ./config.js或者在package.json中scripts配置选项中配置命令"build": "webpack --config ./config.js"
3、webpack默认支持JS和JSON模块、支持CommonJS ES-module AMD等模块类型
Webpack配置核心概念
1、entry-入口起点，用来告诉webpack用哪个文件作为构建依赖图的起点，webpack会根据entry递归的去寻找依赖，每个依赖都被它处理，最后输出到打包成果中
- 可以是string、array和object三种类型
- string类型最终会被转换成object类型，默认key值为main
- 单入口应用spa，单页面应用 PC端 seo-搜索引擎优化 sem-搜索引擎营销
- 多入口应用mpa，多页面应用
2、output-出口，描述了webpack打包后的输出配置，包含输出文件的命名、位置等信息
- 多个入口对应多个出口
- 打包后代码、文件的存放位置，绝对路径
- path属性-
path.resolve(__dirname, './dist') - filename属性-
main.js或者占位符[name].js（name对应的是entry对象中的key值）
3、mode-打包模式
- none不启用任何优化
- development开发模式，注重开发体验、代码不会被压缩、输出信息比较多
- production生产模式，启动TerserPlugin插件压缩代码，为模块和chunk启用混淆模式
4、chunk-代码片段，一个chunk可能有多个模块组合而成，也用于代码合并和分割，如entry入口中的index.js是一个chunks，与之关联的文件代码是一个个的chunk
5、bundle-最终输出的文件，打包后的产物，如dist文件下的bundle.js等
6、loader-默认情况下，webpack仅支持.js、.json文件，而其他文件如.vue、.tsx等类型可以通过loader解析为js文件或string序列化和buffer等，然后内置在js代码中。理论上只要有相应的loader，就可以处理任何类型的文件
- loader是对chunk的二次加工
- 处理非js和json的文件
7、plugin-loader的主要作用是让webpack识别更多的文件类型，而plugin的职责是让其可以控制构建流程，从而执行一些特殊的任务，扩展功能，做些输出优化
8、module-模块，nodeJS万物皆模块
- 一个chunks至少包含一个模块
- 一个bundle包含一个chunks
- chunk是代码片段
- bundle是文件
最后总结一张图如下：
