angular.js - webpack打包大型SPA配置问题
本文介绍了angular.js - webpack打包大型SPA配置问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
目前项目是多页面应用。使用的是angular1.x 前端工具是Webpack。要转换成SPA。打算使用angular-ui-router做路由管理。
问题是把所有的文件打包成一个太大了。想法是只打包成一个第三个类库的vendor.js和某业务逻辑相关的app.js
比如登录页面我只想加载vendor.js和login.js登录后进到dashboard页面。我也只想加载vendor.js和dashborard.js。类似这样
请问该如何配置angular-ui-router和webpack呢,谢谢。
解决方案
假设你的目录结构是这样
src
- common
- utils.js
- login
- index.js
- dashboard
- index.js
代码块
common/utils.js
// 通用模块,逻辑。
console.log('utils....')
login/index.js
require('./common/utils') // 引入公共模块
// 自己的业务模块
console.log('login....')
dashboard/index.js
require('./common/utils') // 引入公共模块
// 自己的业务模块
console.log('dashboard....')
要得到你期望的结果,webpack.config.js
配置如下:
var webapck = require('webpack')
module.exports = {
entry:{
login:'./src/login/index.js',
dashboard:'./src/dashboard/index.js'
},
output:{
publicPath:'/',
path: __dirname + '/dist',
filename:'js/[name].js',
chunkFilename:'js/[id].js'
},
plugins:[
new webpack.optimize.CommonsChunkPlugin({
// 通过这个模块,就可以提取公共的模块 common/utils
name:'vendor',
filename: '[name].js'
})
]
}
最终打包后的结果
dist
- js
login.js
dashboard.js
vendor.js
如上。。。
这篇关于angular.js - webpack打包大型SPA配置问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文