angular.js - webpack打包大型SPA配置问题
怪我咯
怪我咯 2017-05-15 17:13:06
0
3
759

目前项目是多页面应用。使用的是angular1.x 前端工具是Webpack。要转换成SPA。打算使用angular-ui-router做路由管理。
问题是把所有的文件打包成一个太大了。想法是只打包成一个第三个类库的vendor.js和某业务逻辑相关的app.js
比如登录页面我只想加载vendor.js和login.js登录后进到dashboard页面。我也只想加载vendor.js和dashborard.js。类似这样
请问该如何配置angular-ui-router和webpack呢,谢谢。

怪我咯
怪我咯

走同样的路,发现不同的人生

모든 응답(3)
phpcn_u1582

假设你的目录结构是这样

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

如上。。。

刘奇

参考code splitting

左手右手慢动作

我现在会用webpack生成所需js了。结合angular-ui-router该怎么引入各个js呢? 谢谢

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

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

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!