入口和出口
出口：针对资源列表的文件名或路径的配置，出口通过 output 进行配置；入口：入口是对 chunk 的配置，入口通过 entry 进行配置；
var path = require("path");
module.exports = {
mode: "production",
entry: {
main: "./src/index.js", // chunk 的名字 为 main， 属性值：入口模块（启动模块）
subject: ["./src/a.js", "./src/index.js"] // chunk 的名字 为 subject，入口模块有两个
},
output: {
path: path.resolve(__dirname, "target"), // 必须配置一个绝对路径，表示资源放置的文件夹，默认是 dist
filename: "[name].[chunkhash:5].js" // name 是 chunk 的名字，配置的合并的 js 文件的规则
},
devtool: "source-map"
}
最佳实践
一个页面一个 JS
这种方式适用于页面之间的 功能差异巨大、公共代码较少 的情况，这种情况下打包出来的最终代码不会有太多重复；
利用多入口进行打包；
-
源码结构
![]( "一个页面一个JS")
|—— src |—— pageA 页面A的代码目录 |—— index.js 页面A的启动模块 |—— ... |—— pageB 页面B的代码目录 |—— index.js 页面B的启动模块 |—— ... |—— pageC 页面C的代码目录 |—— main1.js 页面C的启动模块1 例如：主功能 |—— main2.js 页面C的启动模块2 例如：实现访问统计的额外功能 |—— ... |—— common 公共代码目录 |—— ... -
webpack 配置
module.exports = { entry:{ pageA: "./src/pageA/index.js", pageB: "./src/pageB/index.js", pageC: ["./src/pageC/main1.js", "./src/pageC/main2.js"] }, output:{ filename: "[name].[chunkhash:5].js" } }
一个页面多个 JS
这种方式适用于页面之间有一些 独立、相同 的功能，专门使用一个 chunk 抽离这部分 JS 有利于浏览器更好的缓存这部分内容；
利用多入口进行打包；
-
源码结构
![]( "一个页面多个JS")
|—— src |—— pageA 页面A的代码目录 |—— index.js 页面A的启动模块 |—— ... |—— pageB 页面B的代码目录 |—— index.js 页面B的启动模块 |—— ... |—— statistics 用于统计访问人数功能目录 |—— index.js 启动模块 |—— ... |—— common 公共代码目录 |—— ... -
webpack 配置
module.exports = { entry:{ pageA: "./src/pageA/index.js", pageB: "./src/pageB/index.js", statistics: "./src/statistics/index.js" }, output:{ filename:"[name].[chunkhash:5].js" } }
单页应用
所谓单页应用，是指整个网站 （或网站的某一个功能块） 只有一个页面，页面中的内容全部靠 JS 创建和控制；
使用单入口打包；
-
源码结构
![]( "单页应用")
|—— src |—— subFunc 子功能目录 |—— ... |—— subFunc 子功能目录 |—— ... |—— common 公共代码目录 |—— ... |—— index.js -
webpack 配置
module.exports = { entry: "./src/index.js", output:{ filename:"index.[hash:5].js" } }
打赏作者
您的打赏是我前进的动力
微信
支付宝
webpack 核心功能👉 编译过程
上一篇
评论
