webpack打包不引入vue、echarts等公共库
如果我们打包的时候不想将vue、echarts等公共库包含在内,需要配置两处地方, 以下以基于vue-cli生成的项目为基准:
1webpack配置:
// webpack.base.conf.js
....
externals: {
'vue': 'Vue',
'echarts': 'echarts',
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
}
},
...
2html文件添加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>full-run-only</title>
</head>
<body>
<script src="./static/lib/echarts-4.0.3.min.js"></script>
<script src="./static/lib/vue-2.5.16.min.js"></script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
绿色字体部分配置就是我们需要的公共库映射,注意这里的key代表的是在模块中使用import引入的那个模块名称,value代表的是我们在html文件中直接引入的库文件(红色文字)在window中注册的全局变量名称。
这样配置后,只要html文件能正常引用库文件,即使我们node_modules下的对应模块删了也能正常使用
webpack原文链接: https://webpack.js.org/configuration/externals/#externals
webpack打包不引入vue、echarts等公共库的更多相关文章
- 使用webpack打包后的vue项目如何运行(express)
我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css.js以及图片等,那么打包后的文件该如何正确运行呢? 倘若直接打开html文件,会报如下错 ...
- vue用webpack打包时引入es2015插件
1.安装依赖包 $ npm install --save-div babel-preset-es2015 ps:babel-loader.babel-core应该是默认装好的,如果没有安装,请重新安装 ...
- # webpack 打包工具(vue)
vue-webpack 打包工具 我的github iSAM2016 不是教程,是自我总结 目录 webpack.base.conf.js webpack.dev.conf.js webpack.pr ...
- webpack 打包CSS 引入图片
加载css 安装style-loader, css-loader npm install style-loader css-loader --save-dev 配置webpack.config.js文 ...
- Webpack打包进阶
说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...
- vue引入外部.css文件,webpack将其与.vue中的样式混合打包了,怎么办?
我使用vue-cli搭自己的博客,希望引入公共样式: // main.js import './assets/styles/common.css' 我本来是希望webpack打包后,能将这个样式独立打 ...
- vue webpack打包后 iconfont引入路径不对
vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...
- Vue发布过程中遇到坑,以及webpack打包优化
前言 这段时间,本人自己做了一个vue画面部署到自己的服务器上,发现运行速度慢的的惊人,虽然服务器很渣(本人没什么钱,只能租最差的服务器,主要是给自己学习用的),但是这样开发出来的网站简直不能用,所以 ...
- 基于 Webpack 引入公共库的几种方式
以 jquery 和其插件 jquery-modal 为例,记录下引入公共库的几种方式. 为了方便,首先安装 jquery 和 jquery-modal: cnpm i jquery jquery-m ...
随机推荐
- 基于AndFix的热修复 成功后简单的总结总结错失
首先了解热修复是什么东西?? 就我自己简单的理解:就是不须要又一次打包 公布到市场 然后再让用户又一次下载就能够把一些小bug和需求通过补丁的形式进行改动. 然后如今的热修复方式有大致的三种: 1.d ...
- Android Studio查看android源码
Android Studio的默认版本在/Applications/Android Studio.app/Contents/info.plist中设置,默认没有1.8.如下: <key>J ...
- 克隆windows 2008 x64 后网络问题
克隆windows 2008 x64 后,网卡中配置IP地址192.168.199.40 (NAT 模式) 内网无法ping 通该机器. 使用ipconfig 查看IP显示为 169.254.203. ...
- POJ 1012 Joseph 约瑟夫问题
http://poj.org/problem?id=1012 早上去图书馆复习苦逼的复习....万恶的数逻.T T我还要自我安慰的说复习完了奖励回来刷水题~ 10点多的时候外面校运会大吼撑杆跳的那个. ...
- tp5 thinkphp5 index.php隐藏 iis 重写 伪静态
面临的问题如下: 网上找了个源码,tp5的,公司服务器是iis,源码是隐藏index.php使用了路由,iis默认去找那个路径的文件了,找不到,所以报错了 如果没有iis没有安装"url重写 ...
- java异常中Exception捕获不到的异常
一 概念 众所周知java提供了丰富的异常类,这些异常类之间有严格的集成关系,分类为 父类Throwable Throwable的两个子类Error和Exception Exception的两个子类C ...
- Java虚拟机解析篇之---内存模型
今天闲来无事来,看一下Java中的内存模型和垃圾回收机制的原理.关于这个方面的知识,网上已经有非常多现成的资料能够供我们參考,可是知识还是比較杂的,在这部分知识点中有一本书不得不推荐:<深入理解 ...
- ajax实现注册用户名时动态显示用户名是否已经被注册(1、ajax可以实现我们常见的注册用户名动态判断)(2、jquery里面的ajax也是类似我们这样封装了的函数)
ajax实现注册用户名时动态显示用户名是否已经被注册(1.ajax可以实现我们常见的注册用户名动态判断)(2.jquery里面的ajax也是类似我们这样封装了的函数) 一.总结 1.ajax可以实现我 ...
- [Compose] 16. Apply multiple functors as arguments to a function (Applicatives)
We find a couple of DOM nodes that may or may not exist and run a calculation on the page height usi ...
- Shuttle ESB(三)——架构模型介绍(2)
上一篇文章中,介绍了Shuttle ESB架构模型中的三个重要部分. 今天,我们继续介绍剩余的三个内容:模式和消息路由. 四.模式 Request/Response(请求/响应模式) 对基于Reque ...