angular.js - webpack打包大型SPA配置問題

Question

目前項目是多頁面應用程式。使用的是angular1.x 前端工具是Webpack。要轉換成SPA。打算使用angular-ui-router做路由管理。問題是把所有的文件打包成一個太大了。想法是只打包成一個第三個類別庫的vendor.js和某業務邏輯...

phpcn_u1582 · Answer

假設你的目錄結構是這樣

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

如上。。。

怪我咯 · Answer

參考code splitting

ringa_lee · Answer

我現在會用webpack產生所需js了。結合angular-ui-router該怎麼引入各個js呢？謝謝

搜到一篇angular按需載入的文章

http://www.cnblogs.com/ys-ys/...，基於ui-router，ocLazyLoad
看來能滿足我的需求。謝謝

程式碼區塊

要得到你期望的結果，webpack.config.js 配置如下：

最終打包後的結果

我現在會用webpack產生所需js了。結合angular-ui-router該怎麼引入各個js呢？ 謝謝

要得到你期望的結果，`webpack.config.js` 配置如下：

我現在會用webpack產生所需js了。結合angular-ui-router該怎麼引入各個js呢？謝謝