代码改变世界

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

2017-01-01 18:32 by 海豚湾, ... 阅读, ... 评论, 收藏, 编辑

文艺小说-?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,!移步 我乃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:海豚湾-丰