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樣式兼容）

　　前端正在由蠻荒步入高階時代！

讀在最前面：

　　一、本文講述Angular，Webpack 模塊化、按需加載案例，移步Vue

　　二、閱讀本文，讀者應瞭解Angular、WebPack，！移步 我乃webpack 

　　三、此文創建在已有node環境，sass環境，webpack環境下，特此說明

　　四、此文適合那些對前端優化（按需加載、請求合併、文件指紋、CDN部署、、首屏CSS內嵌 and so on）、組件化、工程化有一些思考的同窗

　　五、技術點：angular、webpack、oclazyload、sass、autoprefixer

　　六、如下代碼只帖出關鍵代碼，下載完整項目，請拉到最底部！

 

構建Angular，Fire！

一、建立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);
    });

 二、建立路由配置文件，routing.js

'use strict';
module.exports = angular.module('app.controllers', [
    require('../view/home/_service.js'),
    require('../view/main/_service.js')
]).name;

 三、建立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;

 四、建立控制器文件，home.js

'use strict';
module.exports = angular.module("app.home").controller("homeCtrl", function() {
    this.test = function() {
        alert(this.name);
    }
}).name;

　　

構建WebPack，Fire！

一、建立環境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"
  }
}

二、建立打包步驟

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;

 

  備註：

　　    一、原理說明：webpack採用依賴（require）來進行項目構建，一切皆require，它會根據你在webcofig中配置的js入口文件進行檢索，而後構建出你整個資源環境。

　　　二、配置說明：

　　　　（1）、angular構建中，按需加載主要涉及：require，ocLazyLoad

　　　　（2）、webpack構建中，主要涉及插件包括：html模板、css分隔、自動註解、目錄刪除、文件壓縮、文件指紋

　　　　（3）、webpack構建中，主要涉及loader包括：css、sass、postcss、file、url、style、raw

　　　　三、猛擊下載源碼

　　　　

 by：海豚灣-豐