Detailed explanation of how to use webpack+es6 to develop

Although more and more people choose to use react, vue and ng2, there are still quite a few people using development. This article will introduce how to use webpack+es6++$oclazyLoad to implement dynamic loading.

var path = require('path');

var webpack = require('webpack');

var ExtractTextPlugin = require("extract-text-webpack-plugin");

 = {
  entry: {
     home: [
        'babel-polyfill',
         './app/'      //Introduce files      ],
      common: [
           'babel-polyfill',
           'angular', 
            'angular-ui-router', 
            'oclazyload'
        ]
   },
   output: {
     path: (__dirname, '/wap'),
     filename: '[name].js',
     chunkFilename: '[id].?[chunkhash]',
     publicPath: '/wap/',
   },
   module: {
     loaders: [
       {
           test:/\.js?$/,
           loader:'ng-annotate-loader!babel-loader',
           exclude:/node_modules/
       },
       {
        test: /\.html$/,
        loader: 'raw-loader',
        exclude: /node_modules/
       },
     ]
  },
  resolve: {
       root: ['node_modules'],
       extensions: ['', '.js', '.html', '.json'],
       modulesDirectories: ['node_modules'],
       alias: {}
   },
  externals: {},
  plugins: [
          new (),
          new ExtractTextPlugin('[name].[contenthash:20].css'),
          new ({
               compress: {warnings: false},
               sourceMap: true
          }),
         new ('common', '')
  ]

}

The first step is to introduce angular and related modules first, and then define a module like in es5.

import angular from 'angular';
import uirouter from 'angular-ui-router';
import ocLazyLoad from 'oclazyLoad';
('app',[ uirouter，ocLazyLoad ])

Reference between modules

We create a second module header/

import angularfrom 'angular';
export default ('header',[]).name

Revise

import header from './header'
('app',[ uirouter，ocLazyLoad , header])

The reference of the module is completed

3. Controller

Suppose you add a new controller in the header directory

header/

export default class HeaderController {
     consturctor(){
          = 'header'
      }
}

Reference controller Modify header/

import HeaderController from './controller'
export default ('header',[ ])
   .controller('HeaderController',HeaderController)
   .name

4. Service

If you want to use $scope in the controller, or other services must have an error, it is because we did not inject the service before using it

So the first step should be to inject the service

header/

export default class HeaderController {
   consturctor($scope){
        = 'header'
       $ = 'head'
    }
}
HeaderController.$inject = ['$scope']

So how to customize the service?

New

class HeaderServices {
     constructor(){
           = 'cxh'
     }
     getName(){
          return 
     }
}

header/

import HeaderService from './service';
export default ('header',[ ])
     .controller('HeaderController',HeaderController)
     .service('HeaderService',HeaderService)
     .name

Use custom services in the controller

header/

export default class HeaderController {
    consturctor($scope,HeaderService){
          = 'header'
         $ = 'head'
         $ = 
     }
}
HeaderController.$inject = ['$scope','HeaderService']

5. Instructions

Create a new footer/ roughly the same as header/

Introduce footer module to

Create a new footer/

export default class Footer {
     constructor(){
           = 'E',
           = {},
           = "<div ng-click='alert()'>footer</div>"
           = Foot
           = (scope, element, attr) => {}
     }
}
class Foot{
       constructor(){
         $ = () => { alert(1) } 
       }
}
Header.$inject = ['$scope']

footer/

export default ('footer',[])
.directive('footerDirective',()=> new Footer)
.name

6.Routing

export default router ($stateProvider, $urlRouterProvider) {
    $("home",{ 
           url:"/home",
           templateUrl:'app/home/',
           controller: "HomeController",
           controllerAs:"HMC",
     })
    $('/home');
}
router.$inject = [ '$stateProvider', '$urlRouterProvider']

DEMO implements dynamic loading

1. The first step is to create a new module

import angular from 'angular';
import uirouter from 'angular-ui-router';
import ocLazyLoad from 'oclazyLoad';
//Reference to create header componentimport Header from './header';
//routingimport routing from "./";
//Introduce two submodulesimport Home from "./homes";
import Router from "./router";

('app',[uirouter, Header, ocLazyLoad, Home, Router])
.config(routing)

2. Configure routing ./

export default function routing($stateProvider, $urlRouterProvider) {
 'ngInject'; //Inject service, you don't need to use $inject $stateProvider
   .state("home",{
      url:"/home",
      templateProvider: ($q) =&gt; {   // Dynamically introduce html template        'ngInject';
        let deferred = $();
        ([], function () {
          let template = require('./home/');
          (template);
        });
        return ;
       },
       controller: "HomeController",
       controllerAs:"HMC",
       resolve: {      //Dynamic loading module         loadMyCtrl: function ($q, $ocLazyLoad) {
            'ngInject';
            let deferred = $();
            ([], () =&gt; {
                let module = require("./home").default;
                $({name: });
                ()
             });
            return ;
          }
      }
   }),
   .state("route",{
     url:"/route",
     templateProvider: ($q) =&gt; {   // Dynamically introduce html template        'ngInject';
        let deferred = $();
        ([], function () {
            let template = require('./router/');
            (template);
         });
         return ;
      },
      controller: "routerController",
      controllerAs:"RTC",
      resolve: {      //Dynamic loading module         loadMyCtrl: function ($q, $ocLazyLoad) {
           'ngInject';
            let deferred = $();
            ([], () =&gt; {
               let module = require("./router").default;
               $({name: });
               ()
            });
            return ;
       }
   }
 }）
$('/home');
}

header/

import angular from "angular";
import header from './directive';
export default ('app_header',[])
     .directive('header', () => new header)
     .name;

header/

class Header {
 constructor($scope){
  'ngInject';
  $ = false;
 }
}
export default class header {
  constructor() {
     = 'E',
     = {},
     = require(./) 
     = Header
     = (scope, element, attr) => {}
  }
}

header/

<div>
   <a href="#home" rel="external nofollow" >home</a>
   <a href="#router" rel="external nofollow" >router</a>
</div>

home/

import angular from "angular";
import HomeController from './controller';
export default ('app_home',[])
     .controller('HomeController', HomeController)

home/

export default class HomeController {
 constructor($scope) {
  'ngInject';
   = false;
   = 'sds';
  $ = 'sma'
 }
 change(){
    = !;
   ();
  }
}

home/

<div>home {{}} -- {{edg}}</div>

The other modules are similar, so I won’t write them.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.