走进webpack(2)--第三方框架(类库)的引入及抽离
正文之前,由于这是一个系列的文章,可能第一次看到的看官老爷们会觉得突兀,如果你是webpack新手,我建议你先从前几篇文章看起,如果你对webpack有一些了解,也希望可以在github上下载代码,对照着看会更有效果
在当代的前端开发中,很少会用原生JS来开发页面,最基本的都会使用jQuery来节省我们开发的时间和效率,而angular,vue,react的出现更是为前端开发者带来了福音。那么这篇文章就说说如何用webpack来打包引入第三方框架(类库)。如果单纯的引入jQuery或者其他第三方类库,在打包的时候webpack会把它一起打包进我们的main.js,也就说,如果我们引入两三个框架,两三个UI库,那么我们的集成包会很大,页面的加载时间也会很长,这是我们不愿见到的结果。所以在学会引入的同时,还要知道如何把第三方类库从我们的业务逻辑包中抽离出来。
那么我们先来安装一下jQuery,因为在生产环境我们仍旧是需要jQuery作为依赖的,所以我们需要用npm install jquery --save来安装它。安装完成之后,我们在main.js中增加两行代码:
//引入jQuery
import $ from 'jquery';
//编写jQuery代码
$('#jqueryDiv').html('Hello Zaking,jQuery is useful');
我们还需要在index.html中增加一个div容器:
<!-- jQuery代码容器 -->
<div id="jqueryDiv"></div>
然后,我们npm run dev看一下,会发现页面中已经有jQuery代码所生成的文字,说明我们引入jQuery成功了。你可以在每一个需要jQuery的页面这样引入。但是这样会很麻烦,我们如果通过这样的方式引入了jQuery,但是整个项目中却并没有写一行jQuery代码,那么webpack也是会把它打包进去的。而且每一个需要jQuery的页面都需要引入的话好麻烦,那么我们可以使用ProvidePlugin来实现一次引入全局使用,而且通过插件的方式来引入第三方类库,如果你不使用它的话,webpack就不会打包它,还不错吧。由于ProvidePlugin是webpack自带的插件,我们不需要引入他,但是需要引入一下webpack:
//引入webpack
const webpack = require('webpack');
我们还需要在入口文件引入jQuery,还记得前面模块化的时候把入口文件单独拆分成了一个entry.js,所以我们在其中增加一点代码,现在看起来应该是这样的:
entry.path={
main:'./src/main.js',
jquery:'jquery'
}
然后我们在plugins项下配置一下这个插件,就像这样:
//创建一个webpack下的ProvidePlugin插件的实例,使全局都可以使用jQuery
new webpack.ProvidePlugin({
$:"jquery"
})
这样就可以了,但是别忘了把main.js中通过import引入的jQuery代码删除,然后再npm run dev试一下。会发现也同样出现了jQuery生成的文字。
那么下面我们就学习一下,如何抽离第三方类库,使其存储在一个单独的文件夹下,在webpack3时代,通常是使用CommonsChunkPlugin,CommonsChunkPlugin也是webpack自带的插件。官方文档是这样解释他的:CommonsChunkPlugin
插件,是一个可选的用于建立一个独立文件(又称作 chunk)的功能,这个文件包括多个入口chunk
的公共模块。通过将公共模块拆出来,最终合成的文件能够在最开始的时候加载一次,便存到缓存中供后续使用。这个带来速度上的提升,因为浏览器会迅速将公共的代码从缓存中取出来,而不是每次访问一个新页面时,再去加载一个更大的文件。
简单来说,就是将公共模块拆分出来以便使浏览器加载速度更快。但是在webpack4时代,已经取消了这个插件取而代之的是splitChunks 和runtimeChunk ,那么我们就来看一下,在webpack4的环境下,如何抽离多个第三方类库。
我们先来安装一下vue,跟jQuery的安装方式一样,就不多说了,同样的我们也需要在入口文件处引入vue:
entry.path={
main:'./src/main.js',
//引入jQuery和vue
jquery:'jquery',
vue:"vue"
}
然后再ProvidePlugin中加入vue这个选项:
new webpack.ProvidePlugin({
$:"jquery",
vue:"vue"
})
然后我们在plugins中增加一个配置:
new webpack.optimize.SplitChunksPlugin({
chunks: "all",
minSize: 20000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: true
})
然后我们npm run build一下,会发现在dist的根目录下已经生成了vue.js和jQuery.js。说明我们打包成功了。那么我们想要测试一下,vue究竟能用了么?
我们在main.js中引入vue,并且加上vue官网例子中最简单的一个:
import Vue from 'vue'
//vue代码
var app = new Vue({
el: '#vueApp',
data: {
message: 'Hello Vue!'
}
})
然后,我们在index.html创建一个div容器:
<!-- vue容器 -->
<div id="vueApp">
{{message}}
</div>
然后我们试一下npm run dev,页面打开之后我们发现没有hello vue,f12看下控制台,发现报错了。不出意外的话,你的报错信息是这样的:
什么意思呢,官方解释是:运行时构建不包含模板编译器,因此不支持 template 选项,只能用 render 选项,但即使使用运行时构建,在单文件组件中也依然可以写模板,因为单文件组件的模板会在构建时预编译为 render 函数。就是说,如果我们想使用template,我们不能直接在客户端使用npm install之后的vue。
那么我们需要新增一点配置:
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
//resolve是在最外层的,与plugins等同级
这样就可以了,然后运行一下,会发现Hello Vue已经出现在我们的页面之中了。这两天一直加班,所以更新的有点慢,这个系列的文章还有最后一篇,尽量在这两天就可以完成。
走进webpack(2)--第三方框架(类库)的引入及抽离的更多相关文章
- xcode引入第三方静态类库 duplicate symbol _OBJC_XXX 重复编译错误
xcode引入第三方静态类库 duplicate symbol _OBJC_XXX 重复编译错误 一:场景 xcode 同时引入了 libA.a, libB.a 两个静态类库,如果 这两个静态类库之中 ...
- 第三方框架ViewPagerIndicator引入到Android Studio的方法总结
原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6286619.html 第三方框架ViewPagerIndicator实现的效果比较好,但当我们从G ...
- Angular4.0引入第三方框架,eg: bootstrap、jquery
最近学习angular4.0,在练习是需要使用jquery和bootstrap.但是查阅了,大多数都是angular2的方法,或者是angular4.0的方法但是不准确.花了一些时间终于捣腾出来了,把 ...
- 小程序第三方框架对比 ( wepy / mpvue / taro )
众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端 ...
- 二:新浪微博:第三方框架管理工具CocoaPods的安装和使用
一:CocoaPods的安装 我们可以用淘宝的Ruby镜像来访问cocoapods.按照下面的顺序在终端中敲入依次敲入 $ gem sources --remove https://rubygems. ...
- iOS-常用的第三方框架的介绍
写iOS 程序的时候往往需要很多第三方框架的支持,可以大大减少工作量,讲重点放在软件本身的逻辑实现上. GitHub 里面有大量优秀的第三方框架,而且 License 对商业很友好.一下摘录一下几乎每 ...
- 让时间处理简单化 【第三方扩展类库org.apache.commons.lang.time】
JAVA的时间日期处理一直是一个比较复杂的问题,大多数程序员都不能很轻松的来处理这些问题.首先Java中关于时间的类,从 JDK 1.1 开始,Date的作用很有限,相应的功能已由Calendar与D ...
- 使用CocoaPods管理第三方开源类库
iOS开发中经常会用到许多第三方开源类库,比如AFNetworking.FMDB.JSONKit等等,使用CocoaPods这个工具就能很方便得对工程中用到的类库进行管理,包括自动下载配置以及更新. ...
- GitHub 里面有大量优秀的第三方框架
写iOS 程序的时候往往需要很多第三方框架的支持,可以大大减少工作量,讲重点放在软件本身的逻辑实现上. GitHub 里面有大量优秀的第三方框架,而且 License 对商业很友好.一下摘录一下几乎每 ...
随机推荐
- FC总线技术简介
FC是由美国标准化委员会(ANSI)的X3T11小组于1988年提出的高速串行传输总线,解决了并行总线SCSI遇到的技术瓶颈,并在同一大的协议平台框架下可以映射更多FC-4上层协议.FC具备通道和网络 ...
- tomcat原理(二)
一.打包JavaWeb应用 在Java中,使用"jar"命令来对将JavaWeb应用打包成一个War包,jar命令的用法如下:
- Inception模型和Residual模型卷积操作的keras实现
Inception模型和Residual残差模型是卷积神经网络中对卷积升级的两个操作. 一. Inception模型(by google) 这个模型的trick是将大卷积核变成小卷积核,将多个卷积核 ...
- 【BZOJ4407】于神之怒加强版(莫比乌斯反演)
[BZOJ4407]于神之怒加强版(莫比乌斯反演) 题面 BZOJ 求: \[\sum_{i=1}^n\sum_{j=1}^mgcd(i,j)^k\] 题解 根据惯用套路 把公约数提出来 \[\sum ...
- [AH/HNOI2017]礼物
\[推推公式,即求\Sigma^{n}_{i=1} (x_{i+k}-y_i+c)^2最小,c范围为[-m, m]\] \[拆开,就是\Sigma x_i^2 + \Sigma y_i^2 + n * ...
- [BZOJ1036] [ZJOI2008] 树的统计Count (LCT)
Description 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w.我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. Q ...
- 【2016北京集训测试赛】azelso
[吐槽] 首先当然是要orzyww啦 以及orzyxq奇妙顺推很强qwq 嗯..怎么说呢虽然说之前零零散散做了一些概d的题目但是总感觉好像并没有弄得比较明白啊..(我的妈果然蒟蒻) 这题的话可以说是难 ...
- 如何通过Spring Boot配置动态数据源访问多个数据库
之前写过一篇博客<Spring+Mybatis+Mysql搭建分布式数据库访问框架>描述如何通过Spring+Mybatis配置动态数据源访问多个数据库.但是之前的方案有一些限制(原博客中 ...
- TypeScript入门知识四(表达式和循环)
一,箭头表达式 用来声明匿名函数,消除传统匿名函数的this指针问题 //单行的话可以省略{},多行的不能省. var sum = (arg1,arg2)=> arg1+arg2; //定义一个 ...
- linux下线程的两种封装方式
在网络编程的时候往往需要对Linux下原生的pthread库中的函数进行封装,使其使用起来更加方便,封装方法一般有两种:面向对象和基于对象,下面将分别介绍这两种方式,最后统一分析这两种方式的优缺点: ...