Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现
2017-01-01 18:32 海豚湾 阅读(12355) 评论(4) 编辑 收藏 举报文艺小说-？2F，言情小说-？3F，武侠小说-？9F
long long ago time-1-1：A 使用工具，long long A ago time-1-2：A 使用分类工具，long long ago time-1-3：A 使用一键构建工具 （js组件构建）
long long ago time-2-1：B 使用工具，long long A ago time-2-2：B 使用兼容工具，long long ago time-2-3：B 使用一键构建工具 （cs样式兼容）
前端正在由蛮荒步入高阶时代！
读在最前面：
1、本文讲述Angular，Webpack 模块化、按需加载案例，移步Vue
2、阅读本文，读者应了解Angular、WebPack，！移步 我乃webpack
3、此文建立在已有node环境，sass环境，webpack环境下，特此说明
4、此文适合那些对前端优化（按需加载、请求合并、文件指纹、CDN部署、、首屏CSS内嵌 and so on）、组件化、工程化有一些思考的同学
5、技术点：angular、webpack、oclazyload、sass、autoprefixer
6、以下代码只帖出关键代码，下载完整项目，请拉到最底部！
构建Angular，Fire！
1、创建angular入口文件，app.js
描述：
（1）、第三方样式依赖：font-awesome
（2）、第三方js依赖：angular，angular-ui-router，oclazyload
（3）、业务逻辑、公共组件依赖：routing.js，directive.js
'use strict';
require('../../node_modules/font-awesome/css/font-awesome.min.css');
angular.module('app', [
require('angular-ui-router'),
require('oclazyload'),
require('./routing.js'),
require('./directive.js')
])
.config(function($urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("home");
$locationProvider.html5Mode(true);
});
2、创建路由配置文件，routing.js
'use strict';
module.exports = angular.module('app.controllers', [
require('../view/home/_service.js'),
require('../view/main/_service.js')
]).name;
3、创建home路由文件，_service.js
描述：
（1）、使用require.ensure实现异步加载 see more
（2）、使用ocLazyLoad加载业务控制
'use strict';
module.exports = angular.module('app.home', []).config(function($stateProvider) {
$stateProvider.state('home', {
url: '/home',
templateProvider: function($q) {
var deferred = $q.defer();
require.ensure(['./home.html'], function(require) {
var template = require('./home.html');
deferred.resolve(template);
}, 'home-tpl');
return deferred.promise;
},
controller: 'homeCtrl',
controllerAs: 'vm',
resolve: {
'app.home': function($q, $ocLazyLoad) {
var deferred = $q.defer();
require.ensure(['./home.js'], function() {
var mod = require('./home.js');
$ocLazyLoad.load({
name: 'app.home'
});
deferred.resolve(mod.controller);
}, 'home-ctl');
return deferred.promise;
}
}
});
}).name;
4、创建控制器文件，home.js
'use strict';
module.exports = angular.module("app.home").controller("homeCtrl", function() {
this.test = function() {
alert(this.name);
}
}).name;
构建WebPack，Fire！
1、创建环境Json
{
"name": "front-solution",
"version": "1.0.0",
"description": "front-solution",
"main": "index.js",
"scripts": {
"build": "set NODE_ENV=build&&webpack -p --progress --colors",
"test": "set NODE_ENV=test&&webpack -p --progress --colors",
"dev": "set NODE_ENV=dev&& webpack-dev-server --hot --progress --colors --host 0.0.0.0 --port 8080"
},
"keywords": [
"front-solution"
],
"author": "lufeng",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.6.0",
"clean-webpack-plugin": "^0.1.14",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"font-awesome": "^4.7.0",
"html-webpack-plugin": "^2.24.1",
"ng-annotate-webpack-plugin": "^0.1.3",
"node-sass": "^4.1.1",
"postcss-loader": "^1.2.1",
"raw-loader": "^0.5.1",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
},
"dependencies": {
"angular": "^1.6.1",
"angular-ui-router": "^0.3.2",
"oclazyload": "^1.0.9"
}
}
2、创建打包步骤
var webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin'), //模板插件
ExtractTextPlugin = require("extract-text-webpack-plugin"), //Css分割插件
CleanWebpackPlugin = require('clean-webpack-plugin'), // 删除插件
NgAnnotatePlugin = require('ng-annotate-webpack-plugin'), //自动注入注解插件
autoprefixer = require('autoprefixer'),
path = require('path'),
buildPath = path.resolve(__dirname, "build"), //发布目录
__DEV__ = process.env.NODE_ENV === 'dev', //发布环境
publicPath = '', //资源引用统一前缀
devtool = '', //source-map模式
plugins = [
new HtmlWebpackPlugin({
chunks: ['app', 'vendor'],
template: __dirname + '/www/template/index.html',
filename: './index.html'
}),
new HtmlWebpackPlugin({
chunks: ['app', 'vendor'],
template: __dirname + '/www/template/mobile.html',
filename: './mobile.html'
}),
new webpack.optimize.CommonsChunkPlugin('vendor', 'script/vendor.[hash:6].js'),
new ExtractTextPlugin("/css/styles.[hash:6].css"),
new CleanWebpackPlugin('build', {
verbose: true,
dry: false
}),
new NgAnnotatePlugin({
add: true
})
];
if (!__DEV__) {
//压缩
plugins.push(new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}));
publicPath = process.env.NODE_ENV == 'test' ? 'test.domain.com' : 'www.domain.com';
devtool = 'source-map';
}
var config = {
//入口文件配置
entry: {
app: path.resolve(__dirname, 'www/app/app.js'),
vendor: ["angular", 'angular-ui-router', 'oclazyload']
},
//文件导出的配置
output: {
path: buildPath,
filename: "script/[name].[hash:6].js",
publicPath: publicPath,
chunkFilename: "chunks/[name].chunk.[chunkhash].js"
},
//本地服务器配置
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
grogress: true
},
//模块配置
module: {
loaders: [{
test: /\.html$/,
loader: 'raw'
}, {
test: /\.(png|jpg|gif)$/,
loader: 'url?limit=8192,name=/img/[name].[hash:6].[ext]'
}, {
test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
loader: 'url-loader?importLoaders=1&limit=1000&name=/fonts/[name].[ext]'
}, {
test: /\.css$/,
loaders: ['style', 'css'],
}, { //外链
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader!postcss-loader")
}
// ,{ //内联
// test: /\.scss$/,
// loaders: ['style', 'css', 'sass','postcss']
// }
]
},
postcss: function() {
return [autoprefixer()];
},
//插件配置
plugins: plugins,
//调试配置
devtool: devtool
}
module.exports = config;
备注：
1、原理说明：webpack采用依赖（require）来进行项目构建，一切皆require，它会根据你在webcofig中配置的js入口文件进行检索，然后构建出你整个资源环境。
2、配置说明：
（1）、angular构建中，按需加载主要涉及：require，ocLazyLoad
（2）、webpack构建中，主要涉及插件包括：html模板、css分隔、自动注解、目录删除、文件压缩、文件指纹
（3）、webpack构建中，主要涉及loader包括：css、sass、postcss、file、url、style、raw
by：海豚湾-丰
