目前項(xiàng)目是多頁面應(yīng)用。使用的是angular1.x 前端工具是Webpack。要轉(zhuǎn)換成SPA。打算使用angular-ui-router做路由管理。
問題是把所有的文件打包成一個太大了。想法是只打包成一個第三個類庫的vendor.js和某業(yè)務(wù)邏輯相關(guān)的app.js
比如登錄頁面我只想加載vendor.js和login.js登錄后進(jìn)到dashboard頁面。我也只想加載vendor.js和dashborard.js。類似這樣
請問該如何配置angular-ui-router和webpack呢,謝謝。
走同樣的路,發(fā)現(xiàn)不同的人生
假設(shè)你的目錄結(jié)構(gòu)是這樣
src
- common
- utils.js
- login
- index.js
- dashboard
- index.js
common/utils.js
// 通用模塊,邏輯。
console.log('utils....')
login/index.js
require('./common/utils') // 引入公共模塊
// 自己的業(yè)務(wù)模塊
console.log('login....')
dashboard/index.js
require('./common/utils') // 引入公共模塊
// 自己的業(yè)務(wù)模塊
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按需加載的文章
http://www.cnblogs.com/ys-ys/...,基于ui-router,ocLazyLoad
看來能滿足我的需求。謝謝