angular.js - pembungkusan webpack masalah konfigurasi SPA besar
怪我咯
怪我咯 2017-05-15 17:13:06
0
3
867

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.

怪我咯
怪我咯

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

membalas semua(3)
phpcn_u1582

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. . .

刘奇

Pecahan kod rujukan

左手右手慢动作

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan