(一)webpack简介
1.webpack是一个打包模块化javascript的工具，它会从入口模块出发，识别出源码的模块化导入语句，递归的找出入口文件的所有依赖，将入口和其所有的依赖打包到一个单独的文件中。
2.webpack默认支持JS模块和JSON模块；支持CommonJS Esmodule AMD等模块类型；webpack4支持零配置，但是很弱，稍微复杂些的场景都需要额外扩展。
(二)webpack配置的核心概念
注意：
1.webpack有默认的配置文件：webpack.config.js
2.不使⽤⾃定义配置⽂件： ⽐如webpackconfig.js，可以通过--config webpackconfig.js来指定webpack使⽤哪个配置⽂件来执⾏构建
1.entry:指定webpack打包入口文件：webpack执行构建的第一步将从Entry开始。可抽象成输入。
2.output：打包转换后的文件输出到磁盘位置：输出结果，在webpack经过一系列处理并得出最终想要的代码后输出结果。
3.mode：用来指定当前的构建环境。production development none.设置mode可以自动触发webpack内置的函数，达到优化的效果。
开发阶段的开启有利于热更新的处理，识别哪个模块的变化
生产阶段的开启会帮助模块的压缩，处理副作用等一些功能。
4.loader：模块解析，模块转换器，⽤于把模块原内容按照需求转换成新内容。
webpack是模块打包⼯具，⽽模块不仅仅是js，还可以是css，图⽚或者其他格式
但是webpack默认只知道如何处理js和JSON模块，那么其他格式的模块处理，和处理⽅式就需要
loader了
常见loader:
5.module:模块，在 Webpack ⾥⼀切皆模块，⼀个模块对应着⼀个⽂件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。 当webpack处理到不认识的模块时，需要在webpack中的module处进⾏配置，当检测到是什么格式的 模块，使⽤什么loader来处理。
6.plugins:可以在webpack运⾏到某个阶段的时候，帮你做⼀些事情，类似于⽣命周期的概念
扩展插件，在 Webpack 构建流程中的特定时机注⼊扩展逻辑来改变构建结果或做你想要的事情。
作⽤于整个构建过程
HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并打包生成的js模块引入到该html中。在生产环境具有压缩代码的功能
clean-webpack-plugin
(三)webpack环境搭建 1.使用国内淘宝源安装依赖（新建.npmrc文件）
2.postcss处理css兼容性的问题（样式自动加前缀：npm i postcss-loader autoprefixer -D）
2.1新建postcss.config.js文件
2.2配置webpack.config.js文件
3.mini-css-extract-plugin将css拆分成独立文件
4.html-webpackPlugin生成html文件，不同的html引入不同的css(添加chunks)
5.file-loader:处理静态资源
原理：把打包入口中识别出的资源模块，移出到输出目录，并且返回一个地址名称。
场景：当我们需要模块，仅仅是从源代码挪移到打包目录，就可以使用file-loader来处理，txt,svg，csv,excel，图片资源等等。
6.url-loade
内部使⽤了file-loader,所以可以处理file-loader所有的事情，但是遇到jpg格式的模块，
会把该图⽚转换成base64格式字符串，并打包到js⾥。对⼩体积的图⽚⽐较合适，⼤图⽚不合
适
7.hash，contenthash,Chunkhash的区别
hash:代码发生变化，hash就会改变
contenthash:自身内容发生变化才会更新
chunkhash:在同一个chunk中的内容发生变化，才会更新
8.自定义loader(loader有顺序，从右到左，从下到上)
loader就是一个函数，声明式函数，不能用箭头函数。
处理loader的路径问题
9.自定义plugin(plugin是⼀个类，⾥⾯包含⼀个apply函数，接受⼀个参数，compiler)
webpack 在编译代码过程中，会触发⼀系列 Tapable 钩⼦事件，插件所做的，就是找到相应的钩⼦，往 上⾯挂上⾃⼰的任务，也就是注册事件，这样，当 webpack 构建的时候，插件注册的事件就会随着钩⼦ 的触发⽽执⾏了
10.多页面打包方案
10.前后端分离项目
(四)webpack性能优化
1.Babel（npm i babel-loader @babel/core @babel/preset-env -D）新建.babelrc文件或者Webpack.config.js里面的options
babel是JavaScript编译器，能将ES6代码转换成ES5代码，让我们开发过程中放⼼使⽤JS新特性⽽不⽤担
⼼兼容性问题。并且还可以通过插件机制根据需求灵活的扩展。
Babel在执⾏编译的过程中，会从项⽬根⽬录下的 .babelrc JSON⽂件中读取配置。没有该⽂件会从
loader的options地⽅读取配置。
babel-loader是webpack与babel的通信桥梁，不会做把es6转化成es5的工作，这部分需要用到@babel/preset-env里包含了6,7,8转es5的转化规则。
默认的Babel只⽀持let等⼀些基础的特性转换，Promise等⼀些还没有转换过
来，这时候需要借助@babel/polyfill，把es的新特性都装进来，来弥补低版本浏览器中缺失的特性
按需加载，减少冗余,使用useBuiltIns: "entry"按需注⼊(会发现打包的体积⼤了很多，这是因为polyfill默认会把所有特性注⼊进来)
2.优化开发体验(打包构建的时间)；优化输出质量（打包后的体积：体积小，没有冗余的代码） 2.1loader加上include或者exclude，缩小范围，减少查找的时间。
所有loader都从该目录下查找。
extensions['js','json'] import的时候不用写后缀；官方建议不要省略写后缀，减少查找的时间。
2.2引入环境变量 (1)cross-env (npm install cross-env -D)此方法可抹平mac和window的差异 获取变量：process.env
（2）--env.development
获取变量：
2.3压缩css
(1)post-css (npm install cssnano -D)
(2)optimize插件（npm instll optimize -css -assets-webpack-plugin -D）
2.4去掉冗余的代码tree-shaking（框架ui,使用按需加载） (1)去除无用css(静态css进行摇树) npm install glob-all purify-css purifycss-webpack -D
(2)摇js
注意：防止import的less,css被js摇下去，开启白名单
2.5网站性能优化分析工具chrome lighthouse (npm install lighthouse -g) lighthous是一个开源的自动化工具，用于改进网络应用的质量，只要为Lighthous提供一个需要审查的网址，他将针对此运行一连串的测试，然后生成一个有关页面性能的报告，对网站进行分析，将分析结果以可视化的方式展示给开发者，甚至还指出了可以优化的地方。
