文艺小说-？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 模块化、按需加载案例，
2、阅读本文，读者应了解Angular、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
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);
});
描述：
(1)、使用require.ensure实现异步加载
(2)、使用ocLazyLoad加载业务控制
plugins = [
new HtmlWebpackPlugin({
chunks: ['app','vendor'],template: __dirname + '/www/template/index.html',filename: './index.html'
}),new HtmlWebpackPlugin({
chunks: ['app',template: __dirname + '/www/template/mobile.html',filename: './mobile.html'
}),new monsChunkPlugin('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' ? '' : '';
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
3、
