es6+angular1.X+webpack 实现按路由功能打包项目的示例
需求来源
之前使用jspm来打包项目但是有个最大的缺点，就是只能把项目打包成一个大的js,当项目开发到后期会很大，网上找了很久也没找到合理的jspm打包方式。所以开始调研可以打包angular项目成多个文件的工具.
调研过程
过程中看了些vue,react配合webpack按路由功能打包的demo，感觉webpack对于打包成多个文件比较擅长。
结果
第一步核心模块依赖加载
#core.module.js//核心模块
import'angular-route';//官方路由依赖
import'oclazyLoad'//angular异步加载依赖
importCoreRouterfrom'./core.router'
importLoginModulefrom'../states/login/login.module'//登入模块定义js
exportdefaultangular.module('xxx.bg',[
'ngRoute',
'oc.lazyLoad',
LoginModule.name,
])
.config(CoreRouter)//主要是路由配置文件
第二步路由配置
#core.router.js//这里不是重点，只是一般的配置
importLoginRouterfrom'../states/login/login.route'//登入路由定义js
functionCoreRouter($routeProvider){
$routeProvider
.when('/login',LoginRouter)
.otherwise({redirectTo:'/login'});
}
CoreRouter.$inject=['$routeProvider'];
exportdefaultCoreRouter;
第三步异步请求路由控制器的js
#login.route.js//最重要的操作都在这里
importLoginTplfrom'./login.tpl.html'//模板用webpack的raw-loader加载成文本字符串，具体配置看
letLoginRoute={
template:LoginTpl,
controller:'LoginCtrl',//这里只是写了一个字符串
resolve:{
load:['$q','$ocLazyLoad',function($q,$ocLazyLoad){
return$q((resolve)=>{
//下面这一行写法是webpack在需要的时候才下载依赖的模块，[具体看这里][2]
require.ensure([],()=>{
//这里只是依赖了一个控制器文件，但是这个文件里面你可以import很多其他的依赖
letmodule=require('./login.controller');
//加载模块名为xxx.bg.login的模块，具体是什么作用没弄明白，请高手解答
$ocLazyLoad.load({name:'xxx.bg.login'});
//promise的成功回调，不返回出去参数也没关系，因为在login.contorller.js里面已经注册了LoginCtrl
resolve(module.controller);
});
});
}]
}
};
exportdefaultLoginRoute;
其他文件
#login.module.js
exportdefaultangular.module('xxx.bg.login',[]);
#login.controller.js//这就是第三步异步请求的jswebpack会把这个js和它依赖到的js打包成一个js
import'./login.module'
import'../../../lib/echarts/echarts.min'//随便引入了一个百度图表比较大的js超过100Kwebpack会报警，需要在配置中设置
exportdefaultangular.module('xxx.bg.login')
//注册控制器
.controller('LoginCtrl',['$rootScope',
function($rootScope){
$rootScope.theme={name:'login-page'};
}])
#webpack.config.js
varpath=require('path')
module.exports={
entry:'./source/com.xxx.bg/main.js',//项目入口文件
output:{
path:'./dist/public',
publicPath:'./public/',
filename:'bundle.js'
},
resolve:{
extensions:['','.js'],
alias:{
'src':path.resolve(__dirname,'../source')
}
},
resolveLoader:{
root:path.join(__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'
}
]
}
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。