模块与依赖原创
# 模块与依赖
# 介绍
- 支持各种模块引入方式
- 解析原理:使用内置的module和loader将常见的js,css,img,等文件转换为模块化的文件
# 模块解析(resolve)
- webpack就是同Resolvers实现了模块间的依赖和引用
# enhanced-resolve模块路径解析
- 绝对路径解析:/ 表示当前项目的根目录
- 相对路径解析:./ 表示当前目录
- 模块路径解析:“lodash” 表示node-module
- 对于多层级文件查找,不管是绝对路径还是相对路径都可能过长
- 因此可在webpack.config.js中配置resolve项,设置其alias,为健值对。
resolve:{
alias:{
// 快捷符,和路径
"&":path.resolve(__dirname,"./src")
},
// 自动查找模块时匹配的文件扩展名,优先级从左往右依次递减
extensions: [".json",".js",".vue"]
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# externals
- 用于配置导入第三方模块的cdn链接
- 无需下载导入第三方模块
- 缩小打包体积,减少首屏加载时间
externalsType: "扩展模块的类型(此处为script)",
externals:{
jquery:[
"cdn链接",
"第三方模块暴露的标识符"
]
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 依赖图
- webpack在打包时会从我们配置的入口开始,递归构建一个文件依赖图
- 不只是模块,所依赖的图片,字体等同样被打包形成依赖图
- 将所有的模块打包为一个bundle(捆)
- 使用插件webpack-bundle-analyzer可以可视化的观察打包生成的依赖图