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

文艺小说-？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

　　　　3、猛击下载源码

　　　　

by：海豚湾-丰