angulaire.js - Webpack empaquetant un gros problème de configuration SPA

Question

Le projet actuel est une application multipage. L'outil frontal utilisé est angulaire1.x et Webpack. A convertir en SPA. Prévoyez d'utiliser angulaire-ui-router pour la gestion du routage.
Le problème est que regrouper tous les fichiers en un seul est trop volumineux. L'idée est de regrouper uniquement supplier.js dans une bibliothèque de troisième classe et app.js liés à certaines logiques métier
Par exemple, pour la page de connexion, je souhaite uniquement charger supplier.js et login.js puis me connecter à la page du tableau de bord. Je souhaite également charger uniquement supplier.js et dashborard.js. Semblable à ceci
Comment configurer angulaire-ui-router et webpack, merci.

Answer 1

Supposons que votre structure de répertoires soit comme ceci

src
  - common
    - utils.js
    
  - login
    - index.js
    
  - dashboard 
    - index.js
    

Blocs de code

common/utils.js

// 通用模块，逻辑。
console.log('utils....')

login/index.js

require('./common/utils') // 引入公共模块

// 自己的业务模块
console.log('login....')

tableau de bord/index.js

require('./common/utils') // 引入公共模块

// 自己的业务模块
console.log('dashboard....')

Pour obtenir les résultats que vous attendez, webpack.config.js configurez comme suit :

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'
        })
    ]
}

Le résultat final après emballage

 dist
    - js
        login.js
        dashboard.js
        
    vendor.js

Comme ci-dessus. . .

Answer 2

Partage du code de référence

Answer 3

Je peux maintenant utiliser webpack pour générer les js requis. Comment introduire divers js en combinaison avec angulaire-ui-router ? Merci

J'ai trouvé un article sur le chargement angulaire à la demande

http://www.cnblogs.com/ys-ys/..., basé sur ui-router, ocLazyLoad
semble répondre à mes besoins. Merci