問題描述

目前項目是多頁面應用。使用的是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 - jslogin.jsdashboard.js vendor.js

如上。。。

參考code splitting

搜到一篇angular按需加載的文章

http://www.cnblogs.com/ys-ys/...，基于ui-router，ocLazyLoad看來能滿足我的需求。謝謝