webpack 基础篇 ？

一 webpack 配置五大重要概念？

1.entry：入口文件
2.output:出口文件
3.loader：翻译官
4.plugin：插件
5.mode："development','production'

二 webpack 常用的loader

1.处理样式 ： [style-loader,css-loader,postcss-loader,sass-loader]。生产环境下不采用style-loader，改用 MiniCssExtractPlugin.loader。 postcss-loader 用于处理css兼容性问题，需要通过postcss.config.js 对需要兼容的浏览器版本进行配置

2.处理图片资源：url-loader; url-loader是基于file-loader的 ，url-loader能配置limit 属性，当图片大小 低于limit值，就会生成base64 文件嵌入文档中。大于limit值，就会采用file-loader进行处理，将按照原文件格式输出到指定的文件夹下，并可以重命名。

3.处理html中的图片文件： html-loader

4.处理js，ts，jsx，tsx
--> eslint-loader ,先进行检查，需要配置enforce：'pre',以及 .eslintrc文件。配置 .prettierrc文件，配合eslint 编译器，webstorm能采用快捷键(shift + ctrl + alt + p)，快速修复当前文档所有存在问题的es-lint报错

--> babel-loader ， 将ts、tsx，jsx 或者高版本的 es标准 编译成浏览器能够识别的 es5版本。采用preset corejs 按需加载兼容性配置，@babel/preset-typescript 和 处理 jsx 或者tsx的插件进行编译。

5.处理其他文件：采用file-loader，按照原文件格式输出。一般放在loader处理的最末尾。

三 常用的 plugins

1.html-webpack-plugin ： 可配置 template ，以某个html文件为模板创建一个html文件，通过配置minify 属性对html进行压缩和去除注释

2.mini-css-extract-plugin ： 将css 单独打包成一个文件进行输出

3.optimiza-css-asset-webpack-plugin : 将css文件进行压缩

4...

四 webpack 常见的优化

开发环境

1.开发环境下： HMR - 热模块替换（hot module replace），更改一个模块，只对该模块进行重新打包，不会影响到其他模块。css-loader内置了HMR功能，所以一般修改css文件，webpack-dev-server不会重启。html 文件只有一个，不需要HMR功能。js 文件默认没有HMR功能，需要在js文件插入代码方式实现。

2.开发环境下配置： tooldep：('' | 'evel','cheap','inline' ，'hide','none'...)'source-map' ,用于创建source-map文件，支持打包后文件与源文件进行关联 方便找出错误位置。

生产环境

1.缓存
给babel-loader 配置 cacheDirectory ：true。开启babel-loader缓存，能加快第二次的构建速度。
runtime缓存： 打包文件名采用 [contenthash:10].[ext] 方式进行命名. (hash ,chunkhash , contenthash 的区别，为什么要用contenthash)

2.tree-shaking 树摇 ： 去除无用代码
开启条件： mode：'production', 使用Es6模块 。 注意，引入的css文件，没有在代码中使用，默认会被树摇当作无用代码清除 。需要在package.json文件中配置 sideEffects：[.css,.scss,*.less]

3.代码分割
多入口分割
按需加载分割：懒加载，预加载方式

import(/*webpackChunkName:'test'*/'./test.js').then.catch  // 懒加载
import(/*webpackChunkName:'test',webpackPrefetch:true*/'./test.js').then.catch  // 预加载

optimization 配置 进行代码分割： splitChunks， 将node_modules中代码单独打包成一个chunk

4.PWA模式 ： 渐进式网络开发应用程序。让网页在断网情况下依旧可以访问。

5.多进程打包 ： thread-loader，一般多js文件很多时候对babel-loader可开启多进程打包。（开启多进程打包会有一定量的消耗不可乱用，可手动配置进程数量）

6.externals 配置哪些库不需要打包，而是采用cdn的方式引入

7.dll技术，新建一个 dll的webpack配置，先将 node_modules中的文件进行打包。 后续构建打包只对修改文件进行，就会大大加快速度。

五 其他配置

resolve配置
简写路径 alias{@：resolve（ __dirname,‘src’）}
省略后缀名 extension：[‘js’,’json’,’jsx’]

devserve 配置：
contentBase - 启动代码目录build，wathchContentBase - 监视build，reload
compress - 压缩，port，hot （HMR），
clientLOgLevel：none- 不要显示启动日志
quiet：true,除了一些基恩启动信息之外，不打印
proxy:代理 {‘/api’:{target:‘http:请求转发’,pathRewrite:{‘^/api’:api}}}

resolveLoader：modules：[resolve(__dirname,‘../node_modules’)，resolve(__dirname, 'loaders')]告诉webpack解析模块去哪个目录找 ,有时知道它在哪一层时候，写绝对定位，不然它会一层一层的找，可以优化构建速度（自定义loader模块去哪里找）

六 webpack的执行流程

1. 初始化 Compiler：webpack(config) 得到 Compiler 对象

2. 开始编译：调用 Compiler 对象 run 方法开始执行编译

3. 确定入口：根据配置中的 entry 找出所有的入口文件。

4. 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行编译，再找出该模块依赖的模块，递归直到所有模块被加载进来

5. 完成模块编译： 在经过第 4 步使用 Loader 编译完所有模块后，得到了每个模块被编译后的最终内容以及它们之间的依赖关系。

6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表。（注意：这步是可以修改输出内容的最后机会）

7. 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统