angular.js - pembungkusan webpack masalah konfigurasi SPA besar

Question

Projek semasa ialah aplikasi berbilang halaman. Alat bahagian hadapan yang digunakan ialah angular1.x dan Webpack. Untuk menukar kepada SPA. Rancang untuk menggunakan angular-ui-router untuk pengurusan penghalaan.
Masalahnya ialah pembungkusan semua fail menjadi satu terlalu besar. Ideanya adalah untuk hanya membungkus vendor.js ke dalam perpustakaan kelas ketiga dan app.js yang berkaitan dengan logik perniagaan tertentu
Contohnya, untuk halaman log masuk, saya hanya mahu memuatkan vendor.js dan login.js dan kemudian log masuk ke halaman papan pemuka. Saya juga hanya mahu memuatkan vendor.js dan dashborard.js. Sama seperti ini
Bagaimana untuk mengkonfigurasi angular-ui-router dan webpack, terima kasih.

Answer 1

Anggap struktur direktori anda seperti ini

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

Blok Kod

common/utils.js

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

log masuk/index.js

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

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

papan pemuka/index.js

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

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

Untuk mendapatkan hasil yang anda jangkakan, webpack.config.js konfigurasikan seperti berikut:

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

Hasil akhir selepas pembungkusan

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

Seperti di atas. . .

Answer 2

Pecahan kod rujukan

Answer 3

Saya kini boleh menggunakan webpack untuk menjana js yang diperlukan. Bagaimana untuk memperkenalkan pelbagai js dalam kombinasi dengan angular-ui-router? Terima kasih

Saya temui artikel tentang pemuatan atas permintaan sudut

http://www.cnblogs.com/ys-ys/..., berdasarkan ui-router, ocLazyLoad
nampaknya memenuhi keperluan saya. Terima kasih