文藝小說-？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：海豚灣-豐