Example of es6++webpack implementing package projects by routing function

Source of demand

I used jspm to package projects before, but the biggest disadvantage is that I can only package the project into a large js. When the project is developed in the later stage, it will be very large. I have been searching online for a long time but I haven't found a reasonable way to package jspm. So start researching tools that can package angular projects into multiple files.

Research process

During the process, I read some demos packaged by vue, react and webpack according to the routing function. I feel that webpack is good at packaging into multiple files.

result

Step 1 Core module dependency loading

# //Core module
import 'angular-route'; //Official routing dependenciesimport 'oclazyLoad' //angular asynchronous loading dependenciesimport CoreRouter from './'
import LoginModule from '../states/login/' //Login module definition js
export default ('',[
  'ngRoute', 
  '', 
  , 
])
.config(CoreRouter) // Mainly the routing configuration file

Step 2: Routing configuration

# //This is not the point, it is just a general configuration
import LoginRouter from '../states/login/' //Login route definition js
function CoreRouter($routeProvider) {
  $routeProvider
    .when('/login',LoginRouter)
    .otherwise({redirectTo: '/login'});
}

CoreRouter.$inject = ['$routeProvider'];

export default CoreRouter;

Step 3 Asynchronously request the routing controller's js

# //The most important operations are here
import LoginTpl from './' //Template Use webpack's raw-loader to load into a text string. See the specific configuration
let LoginRoute = {
  template  :  LoginTpl,
  controller : 'LoginCtrl', //I just wrote a string here  resolve: {
    load: ['$q','$ocLazyLoad',function ($q,$ocLazyLoad) {
      return $q((resolve) =&gt; {
        //The following line is written in the form of webpack downloading the dependent module when needed. [See here for details][2]        ([], () =&gt; {
          //This is just a controller file, but you can import many other dependencies in this file          let module = require('./'); 
          
          //Load the module named after the module. I didn't understand what the specific function is. Please answer the expert.          $({name: ''}); 
          
          //The successful callback of promise is not returned without returning the parameters, because LoginCtrl has been registered in it          resolve(); 
        });
      });
    }]
  }
};
export default LoginRoute;

Other documents

#

export default ('',[]);

# //This is the third step of asynchronous request. Webpack will package this js and the js it depends on into a js
import './'
import '../../../lib/echarts/' //A Baidu chart has been introduced casually. A larger js exceeds 100K will alarm when webpack is over, and it needs to be set in the configuration.
export default ('')
  //Register the controller  .controller('LoginCtrl',['$rootScope',
    function($rootScope){
      $ = {name:'login-page'};
  }])

#
var path = require('path')
 = {
 entry: './source//', // Project entry file output: {
  path: './dist/public',
  publicPath: './public/',
  filename: ''
 },
 resolve: {
  extensions: ['', '.js'],
  alias: {
   'src': (__dirname, '../source')
  }
 },
 resolveLoader: {
  root: (__dirname, 'node_modules'),
 },
 module: {
  loaders: [
   {
    test: /\.js$/,
    exclude: /node_modules|lib/,
    loader: 'babel-loader?stage=0',
    query: {compact: false}
   },
   {
    test: /\.html$/,
    exclude: /node_modules/,
    loader: 'raw-loader?stage=0'
   }
  ]
 }
};

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.