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 - jslogin.jsdashboard.js vendor.js

如上。。。

参考code splitting

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

http://www.cnblogs.com/ys-ys/...，基于ui-router，ocLazyLoad看来能满足我的需求。谢谢