什么是 Webpack、Webpack 打包核心流程、使用 Webpack、理解 Loader、理解插件、学习方法
前端项目由许多不同类型的文件、资源构成,比如:
我们当然可以手动管理这些资源,而且在旧时代我们也的确是这样做的,比如:
但是,会有许多潜在问题:
这些都是旧时代非常突出的问题,对开发效率影响非常大,直到… 出现了很多的工程化工具,比如:webpack、vite、esbuild、rollup.js 等等
某种程度上,正是这些工具的出现,才有了 “前端工程” 这一概念
webpack 本质上是一种前端资源编译、打包工具:
简单示例:
安装: npm install webpack
编辑配置文件: webpack.config.js
const path = require('path');
module.exports = {
}
执行编译命令: npx webpack
核心流程:
使用 Webpack 的好处:
关于 Webpack 的使用方法,基本都围绕 “配置” 展开,而这些配置大致可划分为两类:
Loader 有什么作用?为什么这里需要用到 css-loader、style-loader?
与旧时代 —— 在 HTML 文件中维护 css 相比,这种方式会有什么优劣处?
有没有接触过 Less、Sass、Stylus 这一类 CSS 预编译框架?如何在 Webpack 接入这些工具?
Babel:一个 JS 的降级化转义器,为了让 ES6 等新语言特性能够兼容尽量多的浏览器,需要将 ES6 等新语言特性装换成 ES5 等兼容性更强的代码
接入 Babel:
安装依赖: npm i -D @babel/core @bebel/preset-env babel-loader
声明产物出口 output
:
执行 npx webpack
Babel 具体有什么功能?
Babel 与 Webpack 分别解决了什么问题?为何两者能协作到一起了?
当各种资源文件都已经由 Webpack 统一管理后,HTML 也不必要我们自己维护,可以使用 Webpack 插件生成
接入 html-webpack-plugin
:
相比于手工维护 HTML,使用 Webpack 自动化有什么优缺点?
开启 HMR
module.exports = {
// 其他配置项...
devServer: {
hot:true
},
watch: true // 持续监听本地文件变化并即时构建
}
…
删除未被使用的代码(Dead Code):
使用:
mode = "production"
和 optimization.usedExports = true
即可PS:对工具类库,如 Lodash 有奇效
缓存、SourceMap、性能监控、日志、代码压缩、分包等等
devtool/cache/stat
等
为什么需要 Loader:因为 Webpack 只认识 JS,所以为了处理非标准 JS 资源,设计出资源翻译模块 ——Loader,用于将资源翻译为标准 JS
Loader 特性:链式调用、支持异步执行、分 normal/pitch 两种模式
以 Less 语法文件的解析为例:
Loader 输入是什么?要求的输出是什么?
Loader 的链式调用是什么意思?如何串联多个 Loader ?
Loader 中如何处理异步场景?
很多知名工具,如:
等等,都设计了所谓 “插件” 架构,为什么?
工具的源码和工作原理是一个特别复杂的过程,那么∶
插件架构精髓:对扩展开放,对修改封闭
钩子的核心信息∶
Webpack 进阶知识体系