首页 > 代码库 > Angular中使用webpack
Angular中使用webpack
最近,在开发公司项目的时候,由于组件太多,发出请求太多,导致网站速度太慢,所以我们就有一种强烈的需求,那就是对开发的js进行打包。在对比了各种打包工具之后,最后我们选定了webpack。所以,在这一周除了研究了下如何跨域请求,最主要的时间都去研究webpack去了,虽然没有达到理想中的状态,但是基本的需求应该算是满足了,现在分享出来,希望对大家学习Angular有所帮助。
在正文之前,我先说下,我要分享的内容有:
· webpack在Angular中使用
· 建立开发环境与生产环境
· 优化打包性能,将第三方库与开发的代码分离
· 对代码进行压缩
· 一些第三方框架的集成
· webpack解决缓存问题,上线后自动使用最新的js文件
首先,克隆demo项目,并安装依赖
git clone https://github.com/liuchungui/angularWebpackDemo.gitcd 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]等值,来对应替换为入口的文件的配置 。
· loaders: 它可以转换项目中的资源文件,例如,上面就是css样式文件转换为style标签插入到html当中。
· plugins: 插件,它可以干很多很多的事情,非常强大,官方提供了很多插件,第三方也可以写插件。上面的 ProvidePlugin 插件的作用是自动加载jquery模块,也就是说将jquery变成了全局的模块,当然我们需要在index.html中使用script标签导入。
随后,导入使用
首先,我们在 index.html 中导入 bundle.js :
<script src="http://www.mamicode.com/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配置达到我理想中的状态。
来源:liuchungui’s Blog
Angular中使用webpack