Webpack原理与实践
2021-01-18 12:34:44 372 举报AI智能生成
Webpack
作者其他创作
大纲/内容
核心作用
更高效地管理和维护前端项目中的每一个资源
模块化进程
Stage 1 - 文件划分方式
缺点
污染全局作用域
成员可以在模块外部被修改
无法管理模块之间的依赖关系
很难分辨每个成员所属的模块
Stage 2 – 命名空间方式
优点
避免命名冲突
Stage 3 – IIFE(立即执行函数)
优点
避免全局作用域污染
避免命名冲突
Stage 4 - IIFE 依赖参数
优点
避免全局作用域污染
避免命名冲突
有利于管理模块之间的依赖关系
Stage5 - 模块化规范
CommonJS(同步的方式加载模块)
AMD(异步的当时加载模块)
使用方式复杂
CMD(类似于 CommonJS)
Stage6 - 模块化的标准规范
Node.js 环境-CommonJS
浏览器环境 -ES Modules
问题
各个浏览器对ES Modules 不兼容
ES6编译为ES5
ES Modules的方式导致零散模块过多
将多个ES6模块文件打包成一个文件
HTML 和 CSS 等其他资源文件也需要被模块化
模块打包工具
Webpack
核心作用
模块打包工具(多个模块文件打包成一个文件)
通过 Loader 机制转换ES6代码
支持以模块化的方式载入任意类型的资源文件(转换为JS)
打包原理
打包后得文件-bundle.js
是一个立即执行函数
优点
避免全局作用域污染
避免命名冲突
__webpack_modules__(数组)
存储多个参数列表相同的函数
一个函数就是一个JS模块
__webpack_module cache_(对象)
用于存放或者缓存加载过的模块
__webpack require_(函数)
加载指定的JS模块
执行__webpack require_(函数)
Loader
出现的原因
Webpack 内部默认只能够处理 JS 模块代码,加载其他类型的模块就需要配置不同的 Loader
配置了Loader了，源代码会先经过Loader(处理为JS模块代码)，然后再交给webpack进行打包
配置方式
加载CSS模块
css-loader
将CSS代码转换为JS模块
style-loader
把 css-loader 转换后的结果通过 style 标签追加到页面上
资源文件加载方式比较
HTML
通过Script加载JS模块
通过Link 加载CSS模块
图片文件模块
image标签加载
css加载
js动态加载
字体文件模块
css加载
js动态加载
........
webpack
在JS 代码中通过 import 的方式加载所有类型的资源文件
开发一个 Loader
开发: 声明并导出一个有返回值的函数(eg：my-loader.js)
source参数
原始的资源文件内容
return 处理后的结果
返回的结果必须是一段标准的 JS 代码字符串
使用
Plugin
出现的目的-作用
Loader 负责完成项目中各种各样资源模块的加载，从而实现整体项目的模块化
Plugin 则是用来解决项目中除了资源模块打包以外的其他自动化工作，增强了 Webpack 在项目自动化构建方面的能力
常用插件及配置方式
实现自动在打包之前清除 dist 目录（上次的打包结果）
clean-webpack-plugin
自动生成应用所需要的 HTML 文件
html-webpack-plugin
根据不同环境为代码注入类似 API 地址这种可能变化的部分
拷贝不需要参与打包的资源文件到输出目录
copy-webpack-plugin
压缩 Webpack 打包完成后输出的文件
将JS模块中的CSS代码提取出来生成单独的CSS文件
自动发布打包结果到服务器实现自动部署
开发一个Plugin
原理:钩子机制
含义:Webpack 几乎在每一个环节都埋下了一个钩子,在不同的钩子上挂载我们的插件，就可以扩展webpack的能力
大致有哪些环节
构建前
读取webpack的某一个配置时
............
构建中
............
构建后
构建失败时
构建成功时
............
官方预先定义好的钩子
Compiler Hooks
Compilation Hooks
JavascriptParser Hooks
开发:声明并导出一个有 apply方法的类
使用
运行机制与核心工作原理
检查CLI命令是否符合规范，不规范则报错
createCompiler()
resolveConfig()
如果传入了配置文件的路径，则使用此配置文件
如果没有传入文件路径，则使用默认的配置文件
如果传入了 merge指令，则将对应的配置文件进行合并
applyOptions()
读取entry
读取output
读取target
读取devtool
读取mode
....
applyCLIPlugin()
数组(多模块打包)-为每一个模块加载插件
对象(单模块打包)-为该模块添加插件
调用 webpack模块-生成 compiler对象
webpack()
判断 options参数是数组还是对象
数组:多路打包-createMultiCompiler()
对象:单线打包-createCompiler()
注册已配置的插件
触发特定的hook
Compiler()
run()
this.compile(onCompiled);
webpack-dev-server
作用
启动本地服务器
自动编译
自动刷新
原理
内部会启动一个 HTTP Server，为打包的结果提供静态文件服务
自动使用 Webpack 打包
监听源代码的变化，一旦文件发生变化，立即重新打包
配置
静态资源访问:contentBase
接口代理:proxy
指定启动端口:port
.......
Source Map
作用
构成
version
指定所使用的 Source Map 标准版本
sources
转换前的源文件名称，
因为有可能出现多个文件打包转换为一个文件的情况，
所以这里是一个数组
因为有可能出现多个文件打包转换为一个文件的情况，
所以这里是一个数组
names
源代码中使用的一些成员名称，
我们都知道一般压缩代码时会将我们开发阶段编写的有意义的变量名替换为一些简短的字符，
这个属性中记录的就是原始的名称
我们都知道一般压缩代码时会将我们开发阶段编写的有意义的变量名替换为一些简短的字符，
这个属性中记录的就是原始的名称
mappings
是一个叫作 base64-VLQ 编码的字符串，里面记录的信息就是转换后代码中的字符与转换前代码中的字符之间的映射关系
file
转换后的文件名
webpack的devtool配置
开发环境用什么
eval-cheap-module-source-map
原因
用框架的情况下，Loader 转换后差别都很大，使用此模式可以调试 Loader 转换前的源代码
定位到行到位置足够了
webpack-dev-server 都是在监视模式下重新打包，它重新打包的速度非常快
生产环境用什么
（省略 devtool 选项） - 不生成 source map
各种模式的区别是啥???
模块热替换-HMR(hot module replacement)
其他几种概念
live reloading
监听文件的改动，触发整个应用重新加载
hot reloading-HMR的简称
作用
原理???
优化
打包结果优化
Tree-shaking(生产环境自动开启)
压缩代码
删除无用代码
sideEffects(生产环境自动开启)
Tree-shaking 只能移除没有用到的代码成员，
而想要完整移除没有用到的模块，那就需要开启 sideEffects 特性了
而想要完整移除没有用到的模块，那就需要开启 sideEffects 特性了
Code Splitting
实现方式
多入口打包(多页面应用)
配置多个entry
配置多个html模板
提取公共模块
按需加载
魔法注释
插件
mini-css-extract-plugin
将 CSS 代码从JS打包结果中提取为CSS文件
optimize-css-assets-webpack-plugi
压缩CSS文件里面的代码
构建速度优化
编写不同环境的配置文件
webpack.common.js
公共配置
webpack.dev.js
开发模式配置
webpack.prod.js
生产模式配置
0 条评论
下一页
