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呢,谢谢。
问题解答
回答1:假设你的目录结构是这样
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
如上。。。
回答2:参考code splitting
回答3:我现在会用webpack生成所需js了。结合angular-ui-router该怎么引入各个js呢? 谢谢搜到一篇angular按需加载的文章
http://www.cnblogs.com/ys-ys/...,基于ui-router,ocLazyLoad看来能满足我的需求。谢谢
相关文章:
1. angular.js - angular内容过长展开收起效果2. debian - docker依赖的aufs-tools源码哪里可以找到啊?3. dockerfile - 为什么docker容器启动不了?4. Docker for Mac 创建的dnsmasq容器连不上/不工作的问题5. 前端 - angular报错?6. docker镜像push报错7. 在windows下安装docker Toolbox 启动Docker Quickstart Terminal 失败!8. docker内创建jenkins访问另一个容器下的服务器问题9. golang - 用IDE看docker源码时的小问题10. docker网络端口映射,没有方便点的操作方法么?