如何集成ocLazyLoad和Webpack或每个视图的代码拆分

Question

嘿，我有一个角形的EcmaScript 5(不是ES6)的网页应用程序，我想在我当前的应用程序中插入webpack。

我的旧old应用程序使用ocLazyLoad按需加载脚本。现在我已经用webpack和ocLazyLoad创建了一个小型的网络应用程序。

我的小应用程序使用ES6，有3个视图: Home、View1、View2。

现在我使用ui路由器在视图之间进行路由，我试图使用ocLazyLoad加载特定视图的特定指令。当我意识到我的指令文件来自webpack的环境，因此导入角不被承认为合法陈述时，问题就开始了。

如何使用ocLazyLoad和webpack加载文件，如果webpack要求我将所有js文件输入到一个bundle.js文件中。

我可以对每个视图进行代码拆分，如果是，如何进行？

index.js

import "./main"

main.js

//Import third-party libraries
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import angularCSS from 'angular-css';
import oclazyload from 'oclazyload';

//Import custom modules
import directives from './custom/modules/modules';

//Import Controllers
import homeCTRL from './custom/controllers/homeCTRL';
import viewOneCTRL from './custom/controllers/viewOneCTRL';
import viewTwoCTRL from './custom/controllers/viewTwoCTRL';


//Define app module
var app = angular.module("app",[uiRouter,angularCSS,oclazyload,directives.name]);

//Define controllers
app.controller("homeCTRL",homeCTRL);
app.controller("viewOneCTRL",viewOneCTRL);
app.controller("viewTwoCTRL",viewTwoCTRL);

//bootstrap the app
angular.element(document).ready(function () {
    angular.bootstrap(document, ['app']);
});

/* Setup Rounting For All Pages */
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    // Redirect any unmatched url
    $urlRouterProvider.otherwise("/home");

    $stateProvider
      .state("home", {
          url: "/home",
          template: require('../views/home.html'),
          data: {
              pageTitle: 'home'
          },
          controller: 'homeCTRL',         
          activetab: 'home',
          css: 'css/home.css',
          resolve: {
              deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                  return $ocLazyLoad.load({
                      name: 'app',
                      files: [
                        'src/custom/directives/directiveOne.js'
                      ]
                  });
              }]
          }
      })
       .state("view1", {
          url: "/view1",
          template: require('../views/view1.html'),
          data: {
              pageTitle: 'view1'
          },
          controller: 'viewOneCTRL',
          activetab: 'view1',
          css: 'css/view1.css'
      })
       .state("view2", {
          url: "/view2",
          template: require('../views/view2.html'),
          data: {
              pageTitle: 'view2'
          },
          controller: 'viewTwoCTRL',
          activetab: 'view2',
          css: 'css/view2.css'
      })
}]);

DirectiveOne.js(错误在这里)

import angular from 'angular';

angular.module('directives').directive('mySharedScope', function () {
    return {
        template: '<p>I am a directive One</p>'
    };
});

Modules.js(加载模块一次)

import angular from 'angular';

export default angular.module("directives",[]);

controlerHome (例如)

export default function($scope){
    $scope.message = "You are in homeCTRL";
};

我的webpack配置文件：

const path = require('path');

const config = {
    entry: './src/index.js',                    /** relative address **/
    output:{
        path: path.resolve(__dirname,'build'), /** absolute path **/
        filename: 'bundle.js',
        publicPath:'./build/'
    },
    module:{
        rules:[
            {
                use: 'babel-loader',
                exclude: /(node_modules|bower_components)/,
                test: /\.js$/,

            },
            { 
                use: 'html-loader',
                test: /\.html$/
            },
            {
                use:['style-loader','css-loader'],
                test: /\.css$/,
            },
           /* {
                test: /\.(jpe?g|png|gif|svg)$/,
                use:[
                    {
                        loader:'url-loader',
                        options: { limit: 40000 } 
                    },
                    'image-webpack-loader'
                ]
            }*/
        ]
    }
};

module.exports = config;

编辑：我尝试过进行代码分裂，但是没有成功，我继承了这个指令，但是这个指令不能很好地工作。

/* Setup Rounting For All Pages */
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    // Redirect any unmatched url
    $urlRouterProvider.otherwise("/home");

    $stateProvider
      .state("home", {
          url: "/home",
          template: require('../views/home.html'),
          data: {
              pageTitle: 'home'
          },
          controller: 'homeCTRL',         
          activetab: 'home',
          css: 'css/home.css',
          resolve: {
              deps: ['$ocLazyLoad','$timeout', function ($ocLazyLoad,$timeout) {
                    $timeout(function(){ 
                        var promise = System.import('../src/custom/directives/directiveOne.js')
                        promise.then(function(data){
                            console.log(data);
                        })
                    });
              }]
          }
      })
       .state("view1", {
          url: "/view1",
          template: require('../views/view1.html'),
          data: {
              pageTitle: 'view1'
          },
          controller: 'viewOneCTRL',
          activetab: 'view1',
          css: 'css/view1.css'
      })
       .state("view2", {
          url: "/view2",
          template: require('../views/view2.html'),
          data: {
              pageTitle: 'view2'
          },
          controller: 'viewTwoCTRL',
          activetab: 'view2',
          css: 'css/view2.css'
      })
}]);

Answer 1

使用webpack‘动态进口’。这将为每个导入创建一个新的块，它可以使用ocLazyLoad延迟加载。

导入(‘c3角’)- webpack在调用它时创建了一个新卡盘，并返回了一个可用于触发ocLazyLoad的承诺。

import('c3-angular').then(function(c3Ang){
    $ocLL.load({name: 'gridshore.c3js.chart'});
})

您可以使用一组依赖项承诺和传递给ocLazyLoad所需的模块名称来存储对象。

例如

    ngTagsInput: {
        promise: Promise.all([
            import('ng-tags-input/build/ng-tags-input.min.js'),
            import('ng-tags-input/build/ng-tags-input.min.css'),
            import('ng-tags-input/build/ng-tags-input.bootstrap.min.css')
        ]),
        name: 'ngTagsInput'
    }