转载

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中导入 angularbootstrap

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

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

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

require("./test");

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

例如,上面我们可以建立一个 common.js 文件,然后导入 angularbootstrap ,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.jsvendor.bundle.js 两个打包文件。

查看最终效果

如果想查看demo的最终效果,如下运行命令:

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

推荐

如果想自己实践更多的配置,可以去看阮一峰老师的一个项目 webpack-demos 。

总结

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

原文  http://www.liuchungui.com/2016/12/05/Angular中使用webpack基础篇/
正文到此结束
Loading...