Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现

<p class="jhl-title">文艺小说-？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、以下代码只帖出关键代码，下载完整项目，请拉到最底部！

<p class="jhl-title">构建Angular，Fire！

<p class="jhl-item">1、创建angular入口文件，app.js

描述：

（1）、第三方样式依赖：font-awesome

（2）、第三方js依赖：angular，angular-ui-router，oclazyload

（3）、业务逻辑、公共组件依赖：routing.js，directive.js

Highlighter">

rush:javascript;gutter:true;">'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);

});

配置文件，routing.js

Highlighter">

rush:javascript;gutter:true;">'use strict';
module.exports = angular.module('app.controllers',[
    require('../view/home/_service.js'),require('../view/main/_service.js')
]).name;

文件，_service.js

描述：

（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 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

　　　　3、

Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现

相关文章