Angular中使用webpack基础篇
最近,在开发公司项目的时候,由于组件太多,发出请求太多,导致网站速度太慢,所以我们就有一种强烈的需求,那就是对开发的js进行打包。在对比了各种打包工具之后,最后我们选定了webpack。所以,在这一周除了研究了下如何跨域请求,最主要的时间都去研究webpack去了,虽然没有达到理想中的状态,但是基本的需求应该算是满足了,现在分享出来。
我们今天分享的是webpack在Angular中的应用,至于webpack的入门教程,我推荐官方的getting-started,英文都比较简单,阅读不会有很大障碍。
在正文之前,我先说下,我要分享的内容有:
- webpack在Angular中使用
- 建立开发环境与生产环境
- 优化打包性能,将第三方库与开发的代码分离
- 对代码进行压缩
- 一些第三方框架的集成
- webpack解决缓存问题,上线后自动使用最新的js文件
不过,由于时间关系,暂时先分享webpack在Angular中使用
的内容,后续补上两篇应该差不多了。
在分享使用webpack
时,我们以angularWebpackDemo来作为例子演示。
首先,克隆demo项目,并安装依赖
|
|
然后,编写webpack配置文件
创建webpack.config.js文件,并且编写如下内容:
|
|
上面用到的配置选项大概说一下:
- 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
:
|
|
然后,我们不需要在index.html中导入js文件了,只需要使用require
导入模块就行,webpack会自己解决它们之间的依赖。例如,我们在demo项目中的demoApp.js中导入angular
和bootstrap
。
|
|
当然,上面的require(“angular”)导入的是node_modules
中的angular模块,如果我们要导入本地的js文件,怎么办?如下:
|
|
这种方式还有一个用法,那就是我们可以将共用的第三方库、组件写入一个文件中,然后其它文件只需要导入这个文件一次就行了。
例如,上面我们可以建立一个common.js
文件,然后导入angular
和bootstrap
,common.js内容如下:
|
|
然后在demoApp.js
中使用:
|
|
效果是一样的,但这种方式解决了非常的棒,解决了我曾经的一个痛点,那就是我们项目分角色有很多个端,每个端有共同的内容,当写一个组件时,我们需要每个端都在index.html中导入一遍,非常的不方便。
注: 由于jquery没有模块化的概念,也没有适配webpack,所以我们使用jquery时,需要在index.html中导入,然后使用ProvidePlugin
插件使其自动加载。
最后,打包运行
打包只需要在项目根目录下运行:
|
|
它默认会使用当前目录下的webpack.config.js
配置文件,运行成功之后,它会生成一个bundle.js
打包文件。
我们可以在浏览器访问,就可以看到效果,这就说明OK了。
当然,我们开发时,需要实时看到改变代码的效果,这个时候每次都打包生成就太麻烦了。那么就可以用到webpack专门为我们准备的调试命令:
|
|
然后在浏览器中输入http://localhost:8080/
就可以看到效果了。
其实,除了这种,还有另外一种也可以进行调试,那就是监听模式:
|
|
监听模式下,我们的js文件发生改变时,它会监听到,然后重新打包。
另外,多个客户端,配置多个入口文件
在我们公司项目中,有很多个客户端,我把它们配置成了多个入口文件,那么如何配置多个入口文件?如下:
|
|
它们将生成demoApp.bundle.js
和vendor.bundle.js
两个打包文件。
查看最终效果
如果想查看demo的最终效果,如下运行命令:
|
|
推荐
如果想自己实践更多的配置,可以去看阮一峰老师的一个项目webpack-demos。
总结
刚开始看了官方文档入门之后,感觉自己会用了,但是却不知道如何用在Angular上面。后来查看了别人的代码之后,发现与react-native
类似,都是使用require
语法使用(CommonJS语法),豁然开朗。之后,发现很多第三方框架都适配了webpack
,唯独jquery不行,找了stackoverflow
上面的解决方案顺利解决。就这么折腾下来,然后产生了这么一篇文章,希望对大家能有所帮助。当然,东西不止这么点,后续再更新出来。而且,我也会继续,直到整个webpack配置达到我理想中的状态。
参考:
https://github.com/ruanyf/webpack-demos
webpack多页应用架构系列(二):webpack配置常用部分有哪些?
http://stackoverflow.com/questions/37651015/webpack-using-bootstrap-jquery-is-not-defined