关于大前端的笔记（2）前端构建工具

xiaok1988
2026年4月18日2026年4月18日
未分类

关于大前端的笔记（2）前端构建工具

为什么需要构建工具：1. 模块化带来的效率问题和兼容性问题；2. 可维护性、可扩展性、协作、测试等工程问题；3. 区分开发环境和生产环境

构建工具的功能需求：模块打包器、模块加载器、代码拆分、支持各种静态资源的打包。

几种包管理工具的比较。

webpack的工作方式是把项目当做一个整体，通过一个给定的主文件如main.js, webpack从这个文件开始找到项目的所有依赖文件，使用Loader处理它们，最后打包为一个或多个浏览器可识别的js文件。

webpack的核心概念：

Entry：入口文件

Output：出口路径

Module: 在webpack中任何文件都可以作为一个模块，会根据配置使用不同的Loader进行加载和打包。

Chunk：代码块，可以根据配置将所有模块代码合并成一个或多个代码块，以便按需加载提高性能。

Loader: 模块加载器，进行各种文件类型的加载与转换。通过不同的loader, webpack有能力调用外部的脚本或工具，实现对不同格式文件的处理，例如将scss转换为css,或者把ES6+转换为现代浏览器兼容的js文件，把react中的jsx文件转为js文件。

Plugin: 扩展插件。可以通过webpack的事件钩子，介入打包过程的任意环节，对代码按需修改。

解析ES6+：Babel, js编译器，将ES6+转成浏览器识别的代码。

{
  test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
  type: "asset",
}

webpack5推荐的用法。在webpack4的url-loader和file-loader之间自动选。

一些高级用法：

webpack-bundle-analyzer: 可以可视化各模块占用大小

编译阶段提速：编译模块阶段的效率提升，有IgnorePlugin(忽略第三方包指定目录），DllPlugin和DllReferencePlugin提高构建速度（对不会修改的依赖，让它和自己的代码分开打包，只需要打包自己的文件即可）。DLLPlugin是在一个额外的Webpack设置中创建一个只有dll的bundle, 在根目录下新建一个webpack.dll.config.js文件，作用是除了把所有的第三方依赖打包到一个bundle的dll文件里，还会生成一个manifest.json, 作用是把DllRefernecePlugin映射到相关依赖上。而DllReferencePlugin会在webpack.config.js中使用，作用是把在webpack.dll.config.js中打包生成的dll引用到需要的预编译的依赖上。

优化构建体积：1. tree shaking, 通过mode:production开启。作用是摇掉代码中的未引用部分，优化项目代码。 2. 删除无效css， purgeCSS

编写自定义Loader: Loader有同步、异步之分，打个处理，可以直接使用同步模式。但如果需要多个处理，需要在异步loader中使用this.async告诉上下文这是个一异步loader, 需要Loader Runner等待异步处理的结果，在异步处理完之后在调用this.callback()传递给下一个loader执行。