使用Webpack 构建AngularJs的开发环境

发表于 | 分类于

最终我们的工程目录结构:

1
2
3
4
5
6
7
8
9
10
11
12
project/
--app/
----controllers/
------dashboard.controller.js
----directives/
------yep-nope.directive.js
----services/
------github-status.service.js
----app.js
--js/
----angular.min.js
--index.html

  • 步骤一
    为了达到减少网络请求的目的, 我们希望最终的html文件里面仅存在两个js文件 vendor.bundle.js 和
    app.bundle.js 所以咱们可以现在 index.html页面里面引入这两个js文件, 例如:

    <script src='js/vendor.bundle.js'></script>
<script src='js/app.bundle.js'></script>

  • 步骤二: 安装依赖
    进入项目目录, 进行npm的初始化, 在终端键入 npm init -y
    安装必须的依赖包

    1
    npm install angular webpack --save-dev

  • 步骤三: 配置webpack
    在你的项目根目录创建 webpack.config.js 文件
    内容如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var webpack = require('webpack');
    module.exports = {
    	context: __dirname + '/app',
    	entry: {
    		app: './app.js',
    		vendor: ['angular']
    	},
    	output: {
    		path: __dirname + '/js',
    		filename: 'app.bundle.js'
    	},
    	plugins: [
    			new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js")
    		]
    };

    这个文件中主要包含三个关键点context, entry, 和 output.

    • context: 项目源文件的绝对路径
    • entry: 你的angular应用的主文件. 在这个例子中, 我们设置了一个包含app和vendor键名的对象, 一边产生多个bundle文件.

    • output: 定义编译后的bundle的文件保存的路径以及文件名.

      这里还有一个plugins选项. 他允许我们将一些第三方的库文件合并为一个js文件. 更多配置

  • 步骤四: 引入模块
    如果此时你打包你的代码, webpack只会将app.js中的代码打包起来. 那是因为我们并没有在app.js里面引入其他代码.
    接下来你可以引入任何你需要的代码就像这样:

    1
    2
    3
    4
    5
    // app.js
    ...
    require('./directives/yep-nope.controller');
    require('./services/github-status.service');
    require('./controllers/dashboard.controller');

    在一些小的项目里面可以这么做, 但在大型的项目中, 这样做并不合适.

    相比在文件中直接引入一些控制器文件, 我们可以在controllers文件夹内创建一个index.js文件. 这个文件将为我们引入所有控制器的入口:

    1
    2
    3
    4
    5
    6
    'use strict';

    var angular = require('angular');

    angular.module('dashboard')
    .controller('dashboardController', require('./dashboard.controller'));

    现在你controller文件夹下面的控制器文件看起来应该是像这样的:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    'use strict';
    DashboardController.$inject = ['GithubStatusService'];
    function DashboardController(gh) {
        var _this = this;
        _this.github = '';
        gh.getStatus().success(function(status) {
            _this.github = status;
        });
    }
    module.exports = DashboardController;

    同样, 在directives文件夹中我们也可以这么做. 创建一个index.js文件来引导所有的指令. directives文件夹下的index.js文件可以这么写

    1
    2
    3
    4
    5
    'use strict';

    var angular = require('angular');

    angular.module('dashboard').directive('yepNope', require('./yep-nope.directive'));

    services目录下的index.js文件

    1
    2
    3
    4
    5
    6
    7
    'use strict';

    var angular = require(‘angular’);

    angular.module(‘dashboard’).service(‘GithubStatusService’, require(‘./github-status.service’));

    module.exports = GithubStatusService;

    最后一行应该是 module.exports = GithubStatusService;

    最终我们的app.js文件仅有这些:

    1
    2
    3
    4
    5
    // app.js
    ...
    require('./directives');
    require('./services');
    require('./controllers');

    当你的应用越来越大的时候, 你需要添加新的directives, services , 以及 controllers 你仅需要在directives/index.js services/index.js, 或者 controllers/index.js 中添加你要引入的文件.

    OK, 我们的angular应用已经准备好了. 接下来就是使用webpack来进行打包了.

  • 步骤五: 配置任务
    我们在根目录下的 package.json 文件中的script 选项中添加任务, 然他来执行webpack, 就像这样.

    1
    2
    3
    4
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bundle": "webpack"
    },

    在终端中, 你输入命令: npm run bundle

    稍等片刻, 打包完毕之后你会看见:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    angular-webpack@1.0.0 bundle /Users/ken/Projects/angular-webpack
    webpack

    Hash: fa17ee9ecec0b19a73ae
    Version: webpack 1.12.12
    Time: 550ms
    Asset Size Chunks Chunk Names
    app.bundle.js 1.42 kB 0 [emitted] app
    vendor.bundle.js 1.12 MB 1 [emitted] vendor
    [0] ./app.js 82 bytes {0} [built]
    [0] multi vendor 28 bytes {1} [built]
    [1] ./services/index.js 145 bytes {0} [built]
    [4] ./services/github-status.service.js 373 bytes {0} [built]
    [5] ./controllers/index.js 147 bytes {0} [built]
    [6] ./controllers/dashboard.controller.js 278 bytes {0} [built]
    + 2 hidden modules

    在浏览器中运行应用

    >> open index.html

基于webpack的angular开发环境就搭建结束.

原文链接
翻译水平有限, 如果有看不懂的地方, 可以直接查看项目源码