仿B站项目(4)webpack打包第三方库jQuery
概述
在项目中不可避免的会用到jquery等第三方库,来看看有什么问题,怎么解决。
遇到的问题
一般情况下,直接require第三方库,比如jquery,然后webpack会自动把第三方库打包进bundle.js里面去,这样就造成了三个问题:
- bundle.js的文件会非常大。
- 每次更新bundle.js的时候根本没有更新第三方库,但是用户仍然要下载包含所有第三方库的bundle.js,不利于缓存。
- 更新第三方库的时候很麻烦,又要重新下bundle.js。(虽然这种情况很少)
理想的解决方案
我理想的解决方案是:
- 打包前把所有第三方库都放在一个静态文件夹里面。
- 打包的时候这个静态文件夹里面的内容不打包进bundle.js。
- 打包的时候把这个静态文件夹里面的内容全部扔在打包文件夹里面的一个static文件夹里面。
- 打包后在html文件的script标签里面引入这些第三方库。
现实很骨感
我现在也没有时间按照我的方案自己学习并且写一个打包插件,所以只能用现有的解决方案。网上主要的解决方案包括以下几种,具体可自行上网搜索。
- 用resolve的alias属性给第三方库起别名来引用。(只解决了全局引用问题,没有解决上面的任何一个问题)
- 用ProvidePlugin插件。(可能存在全局引用问题,并且eslint会不生效,并且没有解决上面的任何一个问题)
- 使用expose-loader。(和方案1一样,只解决了全局引用问题,没有解决上面的任何一个问题)
- 使用CommonsChunkPlugin插件,把引用次数多的第三方库打包进vendor.js里面去(解决了问题1,没有解决问题12)
- 用externals属性,设置哪些库不打包,还是可以require,只是不打包而已。(可行)
实际用到的方案
最后我只能选择用方案5:利用externals属性。虽然和我的理想解决方案有点出入,但是问题不大。下面来看看具体怎么操作。
(1)修改webpack.config.js,加入externals属性。意思是jquery不打包,并且给它设置一个全局变量,叫做jQuery,在任何地方都可以用jQuery访问jquery库。
//简写
module.exports = {
externals: {
jquery: 'jQuery'
}
}
(2)虽然我们把jQuery设置为全局变量,但是为了保险,我们在引用jquery库的时候,还是用require。把下面语句加入到使用jquery的js文件里面去。
var $ = require('jquery');
(3)由于不打包jquery,所以需要在html的head标签里面加入引入jquery的script标签。建议用网上免费的开源cdn。(搜jquery cdn即可)
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
仿B站项目(4)webpack打包第三方库jQuery的更多相关文章
- 仿B站项目——(1)计划,前端工程
计划 现打算: 计划用webpack打包 + 模板语言 + jquery + jquery ui + bootstrap做一个仿B站的静态网站. 网站兼容手机浏览器端. 部分模块打算仿照SPA用js加 ...
- Vue老项目支持Webpack打包
1.老的vue项目支持webpack打包 最近在学习Vue.js.版本是2.6,webpack的版本也相对较老,是2.1.0版本.项目脚手架只配置了npm run dev和npm run build. ...
- vue项目通过webpack打包生成的dist文件放到express环境里运行(vue+webpack+express)
1.首先需要的原料肯定是vue打包生成的dist文件 在vue项目目录下运行:npm run build,等待运行结束,会在项目目录下生成一个dist文件夹,里面会生成一些文件(如下图示) 小的项目文 ...
- vue项目之webpack打包静态资源路径不准确
摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题 将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问 ...
- 【vue】饿了么项目-使用webpack打包项目
1.vue cli给我们提供了npm run build命令打包项目,在packa.json文件中scripts对象中有build属性,当我们执行npm run build时,就执行build对应的& ...
- webpack分离第三方库(CommonsChunkPlugin并不是分离第三方库的好办法DllPlugin科学利用浏览器缓存)
webpack算是个磨人的小妖精了.之前一直站在glup阵营,使用browserify打包,发现webpack已经火到爆炸,深怕被社区遗落,赶紧拿起来把玩一下.本来只想玩一下的.尝试打包了以后,就想启 ...
- vue-cli、webpack提取第三方库-----DllPlugin、DllReferencePlugin
需要安装的插件有 extract-text-webpack-plugin assets-webpack-plugin clean-webpack-plugin npm install extract- ...
- webpack 的第三方库分离并持久化缓存
我们常常需要在浏览器缓存一些稳定的资源,如第三方库等.要达到这个目标,只需要两步: 1.提取出“稳定的资源”: 2.提供稳定的文件hash . 处理后的出的文件就像这样子: app.1w3ad4q4. ...
- mac下的应用程序发布 及 打包(Python写的脚本,可打包第三方库)
其实这个问题在网上能搜到大把的解决方案.大家的统一答案都是 otool -L yourapp.app/Contents/MacOS/yourapp 根据输出信息在运行 install_name_too ...
随机推荐
- docker 部署tomcat
使用Docker搭建Tomcat运行环境 1 准备宿主系统 准备一个 CentOS 7操作系统,具体要求如下: 必须是 64 位操作系统 建议内核在 3.8 以上 通过以下命令查看您的 CentOS ...
- 基于PaddlePaddle的语义匹配模型DAM,让聊天机器人实现完美回复 |
来源商业新知网,原标题:让聊天机器人完美回复 | 基于PaddlePaddle的语义匹配模型DAM 语义匹配 语义匹配是NLP的一项重要应用.无论是问答系统.对话系统还是智能客服,都可以认为是问题和回 ...
- python入门 -- 学习笔记4
习题38:列表的操作 当你看到像 mystuff.append('hello') 这样的代码时,你事实上已经在 Python 内部激发了一个连锁反应.以下是它的工作原理: 1. Python 看到你用 ...
- windows上安装Maven与Gradle
(一)安装Maven 1.百度maven,进入官网http://maven.apache.org/download.cgi,选择Download,在选择相应的压缩包apache-maven-3.6.0 ...
- Android 查阅博客2_APT
https://mp.weixin.qq.com/s/3zrAzOUGpovRRbuYnce3uw APT(Annotation Processing Tool) 即注解处理器,是一种注解处理工具,用 ...
- python 网络编程 tcp和udp 协议
1. 网络通信协议 osi七层,tcp\ip五层 tcp\ip五层 arp协议:通过IP地址找到mac地址 2.tcp和udp的区别 tcp协议:面向连接,消息可靠,相对udp来讲,传输速度慢,消息是 ...
- Python学习—基础篇之基本数据类型(一)
数据类型 在python中,能够直接处理的基本数据类型主要有数字类型.字符串类型.字节类型.布尔类型.列表.元组.字典.集合等. 一.数字类型 1.1 数字类型的创建 # 数字类型 a = 10 b ...
- Pandas.Series.dt.dayofweek相关命令
- SpringMVC不能引入静态资源
SpringMVC不能引入静态资源 问题:部署项目后程序加载或用浏览器访问时出现类似的警告, 2011-01-19 10:52:51,646 WARN [org.springframework.web ...
- cmp指令
cmp是比较指令,cmp的功能相当于减法指令,只是不保存结果.cmp指令执行后,将对标志寄存器产生影响.其他相关指令通过识别这些被影响的标志寄存器位来得知比较结果. cmp指令格式: cmp 操作对象 ...