Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。如图描述：
1.png
核心概念：
入口（entry）：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
输出（output）：指示 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。
模块转换器（loader）：webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块以供应用程序使用，以及被添加到依赖图中。【在module里面配置】
插件（plugin）：loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
模式（mode）：通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。
基本配置
1、拆分配置和merge
2.png
3.png
2、启用本地服务【devServer】
4.png
3、处理Es6
处理Es6 一般在common里面处理， 通过babel-loader处理
5.png
涉及到babel 需要单独配置.babelrc文件
4、处理样式
处理样式 一般也在common里面处理， 通过loader 如 [‘style-loader’, 'css-loader', 'less-loader', 'postcss-loader']
6.png
postcss-loader : 处理兼容性的， 比如处理一些前缀， 需要配置postcss.config.js
7.png
5、处理图片
可以分为dev和pro环境：
8.png
9.png
高级配置
1、多入口
1.png
2.png
3.png
2、抽离css文件（*）
背景: 抽离之前是同通过style-loader 插到<style>...</style>,抽离之后打包成单独的css，通过link 引入
插件：mini-css-extract-plugin
4.png
2、抽离公共代码（*）
a、第三方引用单独拆出去 例如 import _ from ‘lodash’
b、公共引用单独拆出去 【多地方引入同一个方法等】
5.png
3、懒加载 - 比较大的文件
import('...')
可以联想一下 Vue、React中的懒加载，用到了才加载。
4、处理JSX和处理Vue 【主要是分别用babel-loader 和 Vue-loader】
module、chunk、bundle区别
module：各个源码文件，webpack一切皆为模块
chunk：多模块合并成的，entry、splitchunk、import()
bundle：最终的输出文件
性能优化 - 打包构建速度
1、优化babel-loader 【因为babel转译es6到es5蛮消耗时间的】
6.png
开启缓存，当Es6代码没有改变的时候，就不会再次编译，include和exclude 设置范围
2、IgnorePlugin 【避免引入无用模块】
7.png
9.png
8.png
3、noParse 【避免重复去打包】
如果代码里面包含一些x.min.js 已经是打包压缩好的，就不用重复去打包了
3.png
4、happyPack 【开启多进程打包js/css
】
5、ParalelUglifyPlugin【开启多进程压缩js】
6、自动刷新【不能用于生产环境】
开启dev-server 会默认开启刷新浏览器
7、热更新【不能用于生产环境】
HotModuleReplacementPlugin
4.png
5.png
8、DllPlugin 【针对一些大的库、三方插件，没必要每次打包都打包一遍，可以提前打包好，引用它】----动态链接库
背景：前端框架如Vue、react体积大、构建慢；比较稳定，不经常升级版本， 同一版本之构建一次就可以， 不用每次去重新构建。【不能用于生产环境】
-- webpack已经内置支持Dllplugin
-- Dll打包出dll文件
--DllReferencePlugin -使用dll文件
6.png
7.png
性能优化 - 优化产出代码
目标： 体积更小；合理分包、不重复加载；速度更快、内存使用更少
1、pro 小图片base64编码 【减少网络请求】
1.png
2、打包出来的bundle加hash
如果代码有修改、则会重新加载文件，若代码没有修改，hash值不会变，就会命中缓存，加载更快
3、懒加载 【如上】
4、提取公共代码【splitChunks 如上】
5、IngorePlugin 【如上】
6、使用CDN加速 --- 修改静态文件url的前缀【如 cdn 域名】
需要配合把静态文件放到自己公司的cdn上面
2.png
7、开启Production模式 --- mode ：production
a、自动开启压缩代码
b、 Vue、React 等自动删掉调试代码 【开发环境的warining】
c、启动Tree-Shaking 【必须用es6 module才能让其生效， common.js就不行（require）】无用代码 删掉
8、 Scope Hosting -- 多个函数合并成一个函数 有点如下：
a、代码体积更小
b、创建函数作用域更少
c、代码可读性更好
3.png
4.png
5.png
为什么要进行打包和构建
带代码层面
1、体积更小(压缩、合并、tree-shaking)，加载更快
2、编译高级语言或语法 （ts、Es6+、less）
3、兼容性和错误检查(postcss、eslint、polyfill)
流程方面
1、统一高效的开发环境
2、统一的构建流程和产出标准
3、集成公司构建规范（提测、上线等）
vite --- 也是一个前端打包工具， Vue作者发起的
优点： 开发环境下无需打包，启动快。
开发环境使用ES6 Module, 无需打包 ---- 非常快
生产环境使用rollup, 并不会快很多
