简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
angular.js - webpack打包大型SPA配置问题
怪我咯
怪我咯 2017-05-15 17:13:06
0
3
762

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

怪我咯
怪我咯

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

répondre à tous (3)
phpcn_u1582
phpcn_u15822017-05-15 17:15:06 3 plancher

假设你的目录结构是这样

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

如上。。。

Comme+0
Ajouter une réponse
    刘奇
    刘奇2017-05-15 17:15:06 2 plancher

    参考code splitting

    Comme+0
    Ajouter une réponse
      左手右手慢动作
      左手右手慢动作2017-05-15 17:15:06 1 plancher

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

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

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

      Comme+0
      Ajouter une réponse
        Sujets populaires
        Plus>
        Articles populaires
        Tutoriels populaires
        Plus>
        Tutoriels associés
        Recommandations populaires
        Derniers cours
        Derniers téléchargements
        Plus>
        effets Web
        Code source du site Web
        Matériel du site Web
        Modèle frontal
        À propos de nous Clause de non-responsabilité Sitemap
        Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！