UDN-企业互联网技术人气社区

板块导航

浏览  : 1799
回复  : 4

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

[复制链接]
小辫儿的头像 楼主
发表于 2017-1-7 15:14:07 | 显示全部楼层 |阅读模式
  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,!移步 我乃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
  1. 'use strict';
  2. require('../../node_modules/font-awesome/css/font-awesome.min.css');

  3. angular.module('app', [
  4.         require('angular-ui-router'),
  5.         require('oclazyload'),
  6.         require('./routing.js'),
  7.         require('./directive.js')
  8.     ])
  9.     .config(function($urlRouterProvider, $locationProvider) {
  10.         $urlRouterProvider.otherwise("home");
  11.         $locationProvider.html5Mode(true);
  12.     });
复制代码

  2、创建路由配置文件,routing.js
  1. 'use strict';
  2. module.exports = angular.module('app.controllers', [
  3.     require('../view/home/_service.js'),
  4.     require('../view/main/_service.js')
  5. ]).name;
复制代码

  3、创建home路由文件,_service.js

  描述:

  (1)、使用require.ensure实现异步加载 see more

  (2)、使用ocLazyLoad加载业务控制
  1. 'use strict';
  2. module.exports = angular.module('app.home', []).config(function($stateProvider) {
  3.     $stateProvider.state('home', {
  4.         url: '/home',
  5.         templateProvider: function($q) {
  6.             var deferred = $q.defer();
  7.             require.ensure(['./home.html'], function(require) {
  8.                 var template = require('./home.html');
  9.                 deferred.resolve(template);
  10.             }, 'home-tpl');
  11.             return deferred.promise;
  12.         },
  13.         controller: 'homeCtrl',
  14.         controllerAs: 'vm',
  15.         resolve: {
  16.             'app.home': function($q, $ocLazyLoad) {
  17.                 var deferred = $q.defer();
  18.                 require.ensure(['./home.js'], function() {
  19.                     var mod = require('./home.js');
  20.                     $ocLazyLoad.load({
  21.                         name: 'app.home'
  22.                     });
  23.                     deferred.resolve(mod.controller);
  24.                 }, 'home-ctl');
  25.                 return deferred.promise;
  26.             }
  27.         }
  28.     });
  29. }).name;
复制代码

  4、创建控制器文件,home.js
  1. 'use strict';
  2. module.exports = angular.module("app.home").controller("homeCtrl", function() {
  3.     this.test = function() {
  4.         alert(this.name);
  5.     }
  6. }).name;
复制代码

  构建WebPack,Fire!

  1、创建环境Json
  1. {
  2.   "name": "front-solution",
  3.   "version": "1.0.0",
  4.   "description": "front-solution",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "build": "set NODE_ENV=build&&webpack -p --progress --colors",
  8.     "test": "set NODE_ENV=test&&webpack -p --progress --colors",
  9.     "dev": "set NODE_ENV=dev&& webpack-dev-server --hot --progress  --colors --host 0.0.0.0 --port 8080"
  10.   },
  11.   "keywords": [
  12.     "front-solution"
  13.   ],
  14.   "author": "lufeng",
  15.   "license": "ISC",
  16.   "devDependencies": {
  17.     "autoprefixer": "^6.6.0",
  18.     "clean-webpack-plugin": "^0.1.14",
  19.     "css-loader": "^0.26.1",
  20.     "extract-text-webpack-plugin": "^1.0.1",
  21.     "file-loader": "^0.9.0",
  22.     "font-awesome": "^4.7.0",
  23.     "html-webpack-plugin": "^2.24.1",
  24.     "ng-annotate-webpack-plugin": "^0.1.3",
  25.     "node-sass": "^4.1.1",
  26.     "postcss-loader": "^1.2.1",
  27.     "raw-loader": "^0.5.1",
  28.     "sass-loader": "^4.1.1",
  29.     "style-loader": "^0.13.1",
  30.     "url-loader": "^0.5.7",
  31.     "webpack": "^1.14.0",
  32.     "webpack-dev-server": "^1.16.2"
  33.   },
  34.   "dependencies": {
  35.     "angular": "^1.6.1",
  36.     "angular-ui-router": "^0.3.2",
  37.     "oclazyload": "^1.0.9"
  38.   }
  39. }
复制代码

  2、创建打包步骤

  1. var webpack = require('webpack'),
  2.     HtmlWebpackPlugin = require('html-webpack-plugin'), //模板插件
  3.     ExtractTextPlugin = require("extract-text-webpack-plugin"), //Css分割插件
  4.     CleanWebpackPlugin = require('clean-webpack-plugin'), // 删除插件
  5.     NgAnnotatePlugin = require('ng-annotate-webpack-plugin'), //自动注入注解插件
  6.     autoprefixer = require('autoprefixer'),
  7.     path = require('path'),
  8.     buildPath = path.resolve(__dirname, "build"), //发布目录
  9.     __DEV__ = process.env.NODE_ENV === 'dev', //发布环境
  10.     publicPath = '', //资源引用统一前缀
  11.     devtool = '', //source-map模式

  12.     plugins = [
  13.         new HtmlWebpackPlugin({
  14.             chunks: ['app', 'vendor'],
  15.             template: __dirname + '/www/template/index.html',
  16.             filename: './index.html'
  17.         }),
  18.         new HtmlWebpackPlugin({
  19.             chunks: ['app', 'vendor'],
  20.             template: __dirname + '/www/template/mobile.html',
  21.             filename: './mobile.html'
  22.         }),
  23.         new webpack.optimize.CommonsChunkPlugin('vendor', 'script/vendor.[hash:6].js'),
  24.         new ExtractTextPlugin("/css/styles.[hash:6].css"),
  25.         new CleanWebpackPlugin('build', {
  26.             verbose: true,
  27.             dry: false
  28.         }),
  29.         new NgAnnotatePlugin({
  30.             add: true
  31.         })
  32.     ];

  33. if (!__DEV__) {
  34.     //压缩
  35.     plugins.push(new webpack.optimize.UglifyJsPlugin({
  36.         compress: {
  37.             warnings: false
  38.         }
  39.     }));

  40.     publicPath = process.env.NODE_ENV == 'test' ? 'test.domain.com' : 'www.domain.com';
  41.     devtool = 'source-map';
  42. }

  43. var config = {
  44.     //入口文件配置
  45.     entry: {
  46.         app: path.resolve(__dirname, 'www/app/app.js'),
  47.         vendor: ["angular", 'angular-ui-router', 'oclazyload']
  48.     },
  49.     //文件导出的配置
  50.     output: {
  51.         path: buildPath,
  52.         filename: "script/[name].[hash:6].js",
  53.         publicPath: publicPath,
  54.         chunkFilename: "chunks/[name].chunk.[chunkhash].js"
  55.     },
  56.     //本地服务器配置
  57.     devServer: {
  58.         historyAPIFallback: true,
  59.         hot: true,
  60.         inline: true,
  61.         grogress: true
  62.     },
  63.     //模块配置
  64.     module: {
  65.         loaders: [{
  66.                 test: /\.html$/,
  67.                 loader: 'raw'
  68.             }, {
  69.                 test: /\.(png|jpg|gif)$/,
  70.                 loader: 'url?limit=8192,name=/img/[name].[hash:6].[ext]'
  71.             }, {
  72.                 test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
  73.                 loader: 'url-loader?importLoaders=1&limit=1000&name=/fonts/[name].[ext]'
  74.             }, {
  75.                 test: /\.css$/,
  76.                 loaders: ['style', 'css'],
  77.             }, { //外链
  78.                 test: /\.scss$/,
  79.                 loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader!postcss-loader")
  80.             }
  81.             // ,{  //内联
  82.             //     test: /\.scss$/,
  83.             //     loaders: ['style', 'css', 'sass','postcss']
  84.             // }
  85.         ]
  86.     },
  87.     postcss: function() {
  88.         return [autoprefixer()];
  89.     },
  90.     //插件配置
  91.     plugins: plugins,
  92.     //调试配置
  93.     devtool: devtool
  94. }

  95. 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-webpack.rar (286.51 KB, 下载次数: 0)

相关帖子

发表于 2017-1-7 15:14:38 | 显示全部楼层
LZ是闲人,天天发帖,坚定完毕
使用道具 举报

回复

发表于 2017-1-7 15:14:38 | 显示全部楼层
js太强大了,好多工作前端都可以做了…
使用道具 举报

回复

发表于 2017-1-7 15:14:40 来自手机 | 显示全部楼层
路过 帮顶 嘿嘿
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部