搜索

首页  >  问答  >  正文

angular.js - webpack打包大型SPA配置问题

目前项目是多页面应用。使用的是angular1.x 前端工具是Webpack。要转换成SPA。打算使用angular-ui-router做路由管理。
问题是把所有的文件打包成一个太大了。想法是只打包成一个第三个类库的vendor.js和某业务逻辑相关的app.js
比如登录页面我只想加载vendor.js和login.js登录后进到dashboard页面。我也只想加载vendor.js和dashborard.js。类似这样
请问该如何配置angular-ui-router和webpack呢,谢谢。

怪我咯怪我咯2773 天前829

全部回复(3)我来回复

  • phpcn_u1582

    phpcn_u15822017-05-15 17:15:06

    假设你的目录结构是这样

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    <code>src

      - common

        - utils.js

         

      - login

        - index.js

         

      - dashboard

        - index.js

        </code>

    代码块

    common/utils.js

    1

    2

    <code>// 通用模块,逻辑。

    console.log('utils....')</code>

    login/index.js

    1

    2

    3

    4

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

     

    // 自己的业务模块

    console.log('login....')</code>

    dashboard/index.js

    1

    2

    3

    4

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

     

    // 自己的业务模块

    console.log('dashboard....')</code>

    要得到你期望的结果,webpack.config.js 配置如下:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    <code>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'

            })

        ]

    }</code>

    最终打包后的结果

    1

    2

    3

    4

    5

    6

    <code> dist

        - js

            login.js

            dashboard.js

             

        vendor.js</code>

    如上。。。

    回复
    0
  • 怪我咯

    怪我咯2017-05-15 17:15:06

    参考code splitting

    回复
    0
  • ringa_lee

    ringa_lee2017-05-15 17:15:06

    我现在会用webpack生成所需js了。结合angular-ui-router该怎么引入各个js呢? 谢谢

    搜到一篇angular按需加载的文章

    http://www.cnblogs.com/ys-ys/...,基于ui-router,ocLazyLoad
    看来能满足我的需求。谢谢

    回复
    0
  • 取消回复