angular.js - webpack packaging large SPA configuration problem

Question

The current project is a multi-page application. The front-end tool used is angular1.x and Webpack. To convert to SPA. Plan to use angular-ui-router for routing management.
The problem is that packing all the files into one is too big. The idea is to only package vendor.js into a third class library and app.js related to certain business logic
For example, for the login page, I only want to load vendor.js and login.js and then log in to the dashboard page. I also only want to load vendor.js and dashborard.js. Similar to this
How to configure angular-ui-router and webpack, thank you.

Answer 1

Assume your directory structure is like this

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

Code Blocks

common/utils.js

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

login/index.js

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

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

dashboard/index.js

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

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

To get the results you expect, webpack.config.js configure as follows:

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

The final result after packaging

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

As above. . .

Answer 2

Reference code splitting

Answer 3

I can now use webpack to generate the required js. How to introduce various js in combination with angular-ui-router? Thank you

I found an article about angular on-demand loading

http://www.cnblogs.com/ys-ys/..., based on ui-router, ocLazyLoad
seems to meet my needs. Thank you