转载

Angular中使用webpack基础篇

最近，在开发公司项目的时候，由于组件太多，发出请求太多，导致网站速度太慢，所以我们就有一种强烈的需求，那就是对开发的js进行打包。在对比了各种打包工具之后，最后我们选定了webpack。所以，在这一周除了研究了下如何跨域请求，最主要的时间都去研究webpack去了，虽然没有达到理想中的状态，但是基本的需求应该算是满足了，现在分享出来。

我们今天分享的是webpack在Angular中的应用，至于webpack的入门教程，我推荐官方的 getting-started ，英文都比较简单，阅读不会有很大障碍。

在正文之前，我先说下，我要分享的内容有：

webpack在Angular中使用
建立开发环境与生产环境
优化打包性能，将第三方库与开发的代码分离
对代码进行压缩
一些第三方框架的集成
webpack解决缓存问题，上线后自动使用最新的js文件

不过，由于时间关系，暂时先分享 webpack在Angular中使用 的内容，后续补上两篇应该差不多了。

在分享使用 webpack 时，我们以 angularWebpackDemo 来作为例子演示。

首先，克隆demo项目，并安装依赖

git clone https://github.com/liuchungui/angularWebpackDemo.git
cd angularWebpackDemo
git checkout -f step0
npm install

然后，编写webpack配置文件

创建webpack.config.js文件，并且编写如下内容：

const webpack = require("webpack");

module.exports = {
    //入口文件
    entry: "./demoApp.js",
    //生成的文件配置
    output: {
        //生成文件的路径,__dirname是当前项目路径,与webpack.config.js同级
        path: __dirname,
        //文件名
        filename: "bundle.js"
    },
    module: {
        //将css文件打包进去
        loaders: [
            { test: //.css$/, loader: "style!css" }
        ]
    },
    plugins: [
        /**
         * 此插件会自动加载jquery,解决jquery无法引用的问题
         */
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
};

上面用到的配置选项大概说一下：

entry：入口文件，可以传字符串，那说明入口文件只有一个；也可以传数组或对象，指定多个入口文件
output: 生成打包文件的配置，可以指定path（路径），当有多个入口文件时，还可以使用[name]、[hash]、[chunkhash]等值，来对应替换为入口的文件的配置，详情请参考 webpack ouput 。
loaders: 它可以转换项目中的资源文件，例如，上面就是css样式文件转换为style标签插入到html当中，更多内容参考 WHAT ARE LOADERS?
plugins: 插件，它可以干很多很多的事情，非常强大，官方提供了很多插件，第三方也可以写插件。上面的 ProvidePlugin 插件的作用是自动加载jquery模块，也就是说将jquery变成了全局的模块，当然我们需要在index.html中使用script标签导入。

随后，导入使用

首先，我们在 index.html 中导入 bundle.js ：

<script src="bundle.js"></script>

然后，我们不需要在index.html中导入js文件了，只需要使用 require 导入模块就行，webpack会自己解决它们之间的依赖。例如，我们在demo项目中的demoApp.js中导入 angular 和 bootstrap 。

'use strict';
require("angular");
require("bootstrap");

var demoApp = angular.module('demoApp', []);

当然，上面的require(“angular”)导入的是 node_modules 中的angular模块，如果我们要导入本地的js文件，怎么办？如下：

require("./test");

这种方式还有一个用法，那就是我们可以将共用的第三方库、组件写入一个文件中，然后其它文件只需要导入这个文件一次就行了。

例如，上面我们可以建立一个 common.js 文件，然后导入 angular 和 bootstrap ，common.js内容如下：

require("angular");
require("bootstrap");

然后在 demoApp.js 中使用：

'use strict';
require('./common');

var demoApp = angular.module('demoApp', []);

效果是一样的，但这种方式解决了非常的棒，解决了我曾经的一个痛点，那就是我们项目分角色有很多个端，每个端有共同的内容，当写一个组件时，我们需要每个端都在index.html中导入一遍，非常的不方便。

注：由于jquery没有模块化的概念，也没有适配webpack，所以我们使用jquery时，需要在index.html中导入，然后使用 ProvidePlugin 插件使其自动加载。

最后，打包运行

打包只需要在项目根目录下运行：

webpack --progress --color

它默认会使用当前目录下的 webpack.config.js 配置文件，运行成功之后，它会生成一个 bundle.js 打包文件。

我们可以在浏览器访问，就可以看到效果，这就说明OK了。

当然，我们开发时，需要实时看到改变代码的效果，这个时候每次都打包生成就太麻烦了。那么就可以用到webpack专门为我们准备的调试命令：

webpack-dev-server

然后在浏览器中输入 http://localhost:8080/ 就可以看到效果了。

其实，除了这种，还有另外一种也可以进行调试，那就是监听模式：

webpack --progress --color --watch

监听模式下，我们的js文件发生改变时，它会监听到，然后重新打包。

另外，多个客户端，配置多个入口文件

在我们公司项目中，有很多个客户端，我把它们配置成了多个入口文件，那么如何配置多个入口文件？如下：

const webpack = require("webpack");

module.exports = {
    //入口文件
    entry: {
        demoApp: "./demoApp.js",
        vendor: "./vendor.js"
    },
    //生成的文件配置
    output: {
        //生成文件的路径,__dirname是当前项目路径,与webpack.config.js同级
        path: __dirname,
        //文件名
        filename: "[name].bundle.js"
    }
 };

它们将生成 demoApp.bundle.js 和 vendor.bundle.js 两个打包文件。

查看最终效果

如果想查看demo的最终效果，如下运行命令：

git checkout -f step1
npm install
webpack --progress --color

总结

刚开始看了官方文档入门之后，感觉自己会用了，但是却不知道如何用在Angular上面。后来查看了别人的代码之后，发现与 react-native 类似，都是使用 require 语法使用（CommonJS语法），豁然开朗。之后，发现很多第三方框架都适配了 webpack ，唯独jquery不行，找了 stackoverflow 上面的解决方案顺利解决。就这么折腾下来，然后产生了这么一篇文章，希望对大家能有所帮助。当然，东西不止这么点，后续再更新出来。而且，我也会继续，直到整个webpack配置达到我理想中的状态。

原文 http://www.liuchungui.com/2016/12/05/Angular中使用webpack基础篇/

正文到此结束