一. 路径前提知识:
node中的./表示: 在模块化代码中, 表示当前js文件的目录;
在路径处理中, 表示node运行目录;webpack打包时,是指webpack.config.js所在的目录
__dirname:当前js文件所在的目录, 是绝对路径;
path.resolve("./","x","y"): 返回组合后的绝对路径 , 并且用的左斜杠, 能兼容不同系统 即: D:lessonwebpack_1whyxy
二. 输出配置output
1.path: 要手动配的话, 必须是绝对路径. 一般用node的path函数来配置, 一般不需要配置;用默认的dist就好
2. filename: 对生成的js文件,而不是.map文件进行配置.可以用相对路径, 一般用占位符等动态规则配置, 占位符就相当于字符串中替换的内容;
hash占位符: 解决浏览器缓存问题, 写成"[name].[hash:5].js" 或者"[name].[chunkhash:5].js"等
浏览器缓存问题原因: 浏览器会把加载的文件内容缓存起来, 如果后端改了js文件, 没有修改文件名, 则浏览器不知道, 并不会请求新的js文件
hash和chunkhash的不同: hash是总的资源重新赋给hash值, chunkhash只是对改变了的chunk作出修改.
id作为占位符不要用, 因为生产环境和开发环境的id不一样.
三 入口entry
配置的是chunk: 是一个对象{chunk名称(默认是main): chunk的入口文件名(相对路径)}
chunk入口文件可以是一个数组, 表示同时把数组内的文件都作为入口文件.
多个入口, output必须用动态配置;
入口和出口配置的最佳实践:
分三种情况: 一个页面对应一个js, 一个页面对应多个js, 单页面应用
1. 一个页面一个js: 这种方式适合页面之间功能差异巨大, 打包出来的公共代码很少的情况
|---src
|---pageA 目录
|---index.js pageA启动模块
|---...
|---pageB目录
|---index.js pageB启动模块
|---...
|---pageC目录
|---main1.js pageC启动模块1
|---main2.js pageC启动模块2
|---...
|---common 公共代码目录
|---... 工具函数...
webpack配置:
1 module.exports={ 2 entry:{ 3 pageA:"./src/pageA/index.js", 4 pageB:"./src/pageB/index.js", 5 pageC:["./src/pageC/main1.js","./src/pageC/main2.js"] 6 7 }, 8 output:{ 9 filename:"[name].[chunkhash:5].js" 10 }
注意:1. common目录中的公共代码, 可能会打包到不同的chunk中, 造成了打包后的代码出现重复, 但这并不影响维护.
也就是说, 我们编写的代码是不重复的, 是好维护的, 只需要维护common目录中的代码就可以, 不需要管打包后的代码重复不重复
2.如果打包后的公共代码比较多, 造成的问题是传输问题, 即浏览器获取和缓存的有很多是重复的代码.而不是维护问题
2. 一个页面多个js: 这种方式适合有独立的模块功能, 如统计访问人数.
|---src
|---pageA 目录
|---index.js pageA启动模块
|---...
|---pageB目录
|---index.js pageB启动模块
|---...
|---statics 目录
|---index.js 统计人数启动模
|---...
|---common 公共代码目录
|---... 工具函数...
module.exports = { entry: { pageA: "./src/pageA/index.js", pageB: "./src/pageB/index.js", statics: ["./src/statics/index.js"]// 将统计模块作为单独入口打包, 在每个html中都可以引用 }, output: { filename: "[name].[chunkhash:5].js" }
2. 单页面应用:
|---src
|---subFunc 目录
|---...
|---subFunc 目录
|---...
|---subFunc 目录
|---...
|---index.js
module.exports = { entry: "./src/index.js", output:{ filename: "index.[hash:5].js" }