Webpack

什么是 webpack？

webpack 是一个前端模块化方案，更侧重模块打包，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过加载器和插件对资源进行处理，打包成符合生产环境部署的前端资源。
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

打包原理：将所有依赖打包成一个bundle.js，通过代码分割成单元片段，进行按需加载。

核心概念

entry： 打包入口，告诉 webpack 使用哪个模块作为构建项目的起点，可抽象成输入。
output： 打包出口，告诉 webpack 在哪里输出打包好的代码以及如何命名，默认为./dist
loader： 模块转换器，用于把模块原内容按照需求转换成新内容，并且引入到打包出的文件中。

• 常见 loader：babel-loader、css-loader、style-loader、file-loader

plugins： 插件，可以打包优化，资源管理和注入环境变量。

• 常见plugins ：html-webpack-plugin、clean-webpack-plugin

bundle： 是 webpack 打包出来的文件。
chunk： 是 webpack 在进行模块的依赖分析时，代码分割出来的代码块。
module： 是开发中的单个模块，一个模块对应着一个文件。webpack 会从配置的 entry 开始递归找出所有依赖的模块。

构建过程

1、从 entry 开始解析 entry 依赖的所有 module；
2、每找到一个 module，就根据配置的 loader 去找对应的转换规则；
3、递归解析出当前 module 依赖的 module；
4、这些模块会以 entry 为单位分组，一个 entry 和其所有依赖的 module 被分到一个组 Chunk；
5、webpack 会把所有 Chunk 转换成文件输出；
6、webpack 会在恰当的时机执行 plugin 里定义的逻辑。

功能

代码转换： 将 TypeScript 编译成 JavaScript、SCSS 编译成 CSS；
文件优化： 压缩 JavaScript、CSS、HTML 代码，压缩合并图片、字体等；
代码分割： 提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载；
模块合并： 在采用模块化的项目中有很多模块和文件，需要构建功能把模块分类合并成一个文件；
自动刷新： 监听本地源代码的变化，自动构建，刷新浏览器；
代码校验： 在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过；
自动发布： 更新完代码后，自动构建线上发布代码并传输给发布系统。

webpack 优化

tree shaking

tree shaking 是在打包中取出那些引入了但在代码中没有被用到的死代码，即去除无用代码。它依赖静态的 ES6 模块化语法，通过 import 和 export 导入导出。

缺点

1、不会对entry入口文件做 tree shaking。
2、不会对异步分割出去的代码做 tree shaking。

热更新

热更新只需要局部刷新页面上发生变化的模块，同时可以保留当前的页面状态，比如复选框的选中状态、输入框的输入等。

devServer: {
  contentBase: './dist',
  hot: true
},
plugins: [
  new webpack.HotModuleReplacementPlugin()
]

缓存

浏览器在用户访问页面的时候，为了加快加载速度会对用户访问的静态资源进行存储，webpack 中可以在 output 中指定 chunkhash，并且分离经常更新的代码和框架代码，可以根据文件内容是否修改来决定是否进行更新。

output: {
  filename: '[name].[chunkhash].js',
  chunkFilename: '[name].[chunkhash].js',
  path: path.resolve(__dirname, 'dist')
}

webpack 优势

1、提供模块化思想，可以把复杂的程序细化为小的文件；
2、支持异步模块加载；
3、webpack 有一个功能丰富的插件系统，来满足各式各样的需求；
3、webpack 使用异步 I/O（NodeJs）和多级“缓存”提高运行效率。

webpack 和 glup/grunt

Gulp / Grunt：强调的是前端开发的工作流程，可以通过配置一系列的 task，定义 task 处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让 gulp 执行这些 task，构建项目的整个前端开发流程。

Webpack：把项目当做一个整体，通过一个给定的主文件作为入口文件，webpack 将从这个文件开始找到项目所有依赖文件，使用 loaders 处理它们，最后打包为一个浏览器可识别的 JavaScript 文件。

参考文章：https://blog.csdn.net/Aria_Miazzy/article/details/106235716