最近一个小项目是用webpack来进行构建的。其中用到了webpack分包异步加载的功能。今天抽时间看了下webpack打包后的文件,大致弄明白了webpack分包及异步加载的套路。
由于这个小项目是用自己写的一个路,由路由定义好了不同路径对应下的模板及逻辑代码:
webpack配置文件:
var=路径需要(“路径”),
DashboardPlugin=要求(“webpack-dashboard/插件”),
HtmlWebpackPlugin=要求(“html-webpack-plugin”),
webpack=要求(“webpack”),
ExtractTextPlugin=要求(“extract-text-webpack-plugin”);={var路径
应用:路径。加入(__dirname“src”),
经销:路径。加入(__dirname,“距离”)
}
var PKG=要求('/package.json。');
var=process.env.npm_lifecycle_event目标;//获取当前正在运行的脚本名称
var isProduction=function () {
process.env返回。NODE_ENV===吧?
}
模块。出口={
条目:{
“指数”:路径。加入(__dirname ' src/index.js '),
“自由”:[’。/src/lib/js/index.js '),
},//文件名是主入口文件的名称,即对应的条目//chunkFilename对应的是非主入口文件的名称,块
输出:{
路径:PATHS.dist,
publicPath:/静态/出租车司机/,//publicPath的话是打包的时候生成的文件链接,如果是在生产环境当然是用服务器地址,如果是开发环境就是用本地静态服务器的地址
文件名:“js/注册/[名字]. js”,
chunkFilename:“js/注册/[名字]. js”,//TODO:构建文件中加入散列值
},//生成源映射文件
devtool: isProduction & # 63;空:“源图”,
devServer: {
代理:{
“/api/*”: {
目标:http://localhost: 3000,
安全:假
}
}
},
模块:{
加载器:(
{
测试:/\ . js/美元,
排除:/node_modules | picker.min.js/,
装载机:“巴别塔”
},
{
测试:/\ .less/美元,
装载机:ExtractTextPlugin。提取(“风格”,“少css !”)
},
{
测试:/\ . html/美元,
装载机:‘生’
},
{
测试:/\ . css/美元,
装载机:ExtractTextPlugin。提取(“风格”,“css”)
},
{
测试:/\ . json/美元,
装载机:“json”
}
]
},
解决:{
别名:{
src:路径。加入(__dirname“src”),
模块:路径。加入(__dirname src/模块),
lessLib:路径。加入(__dirname ' src/lib/少'),
jsLib:路径。加入(__dirname ' src/lib/js '),
组件:路径。加入(__dirname src/组件)
},
扩展:[",”。js ', '。”、“少。html ', ' . json),
},
插件:[
新HtmlWebpackPlugin ({
标题:“认证资料”,
模板:“。/dist/资产/info.html”,
注射:“身体”,
文件名:‘页/注册/索引。html的//输出html文件的位置
}),
新DashboardPlugin (),
新ExtractTextPlugin (css/注册/style.css)//将引入的样式文件单独抽成style.css文件并插入到头标签当中,带有路径时,最后打包
新webpack.optimize.CommonsChunkPlugin ({
名称:“常见”,
文件名:“js/注册/common.js”,
minChunks: 3
})
]
}
之前
接下来是定义好的路由文件:
const路由器=新路线();
路线
.addRoute ({
路径:“path2”,
viewBox:“.public-container”,
模板:要求(模块/path2/index . html),
pageInit () {//webpack提供的分包的API。require.ensure
要求。确保([],()=比;{
让控制器=要求(“模块/path2/控制器”);
路由器。registerCtrl (path2,新的控制器(' .public-container '));
},“path2”);
}
})
.addRoute ({
路径:“path3”,
viewBox:“.public-container”,
模板:要求(模块/path3/index . html),
pageInit () {
要求。确保([],()=比;{
让控制器=要求(“模块/path3/控制器”);
路由器。registerCtrl (path3,新的控制器(' .public-container '));
},“path3”);
}
});
之前
最后webpack会将这2个需要异步加载的模块,分别打包成path2.js和path3.js。
当页面的路径为:
http://localhost: 8080/页面/注册/#/path2时,会加载path2。js文件
http://localhost: 8080/页面/注册/#/path3时,会加载path3.js文件。
再来看看webpack打包后的文件:
其中在常见。js中,webpack定义了一个全局函数webpackJsonp。这个全局函数在项目一启动后就定义好。
