webpack打包不引入vue、echarts等公共库
如果我们打包的时候不想将vue、echarts等公共库包含在内，需要配置两处地方, 以下以基于vue-cli生成的项目为基准：
１webpack配置:
// webpack.base.conf.js
....
externals: {
'vue': 'Vue',
'echarts': 'echarts',
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
}
},
...
２html文件添加
<!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 ...
随机推荐
- Android内存优化（使用SparseArray和ArrayMap取代HashMap）
在Android开发时,我们使用的大部分都是Java的api,比方HashMap这个api,使用率非常高,可是对于Android这样的对内存非常敏感的移动平台,非常多时候使用一些java的api并不能 ...
- Maven 异常：Project configuration is not up-to-date with pom.xml解决方案
一.异常信息: 导入maven工程后,出现如下错误: Description Resource Path Location TypeProject configuration ...
- ZOJ 2679 Old Bill ||ZOJ 2952 Find All M^N Please 两题水题
2679:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1679 2952:http://acm.zju.edu.cn/onli ...
- u-boot分析1：Nandflash、Norflash启动
了解u-boot之前首先了解下Bootloader,简单说Bootloader就是一段小程序,它在系统上电时开始运行,初始化硬件设备,准备好软件环境,最后调用操作系统内核. u-boot全称:Univ ...
- 27、从零写UVC驱动之分析数据传输（设置ubuntu通过串口打印，指定打印到文件，ubuntu切换root用户）
A. 设置ubuntu让它从串口0输出printk信息a. 设置vmware添加serial port, 使用文件作为串口(在vmware中设置,文件是保存在windows中)b. 启动ubuntu, ...
- 【u230】回文词
Time Limit: 1 second Memory Limit: 128 MB [问题描述] CR喜欢研究回文词,有天他发现一篇文章,里面有很多回文数,这使他来了兴趣.他决定找出所有长度在n个字节 ...
- UVA 1156 - Pixel Shuffle(模拟+置换)
UVA 1156 - Pixel Shuffle 题目链接 题意:依据题目中的变换方式,给定一串变换方式,问须要运行几次才干回复原图像 思路:这题恶心的一比,先模拟求出一次变换后的相应的矩阵,然后对该 ...
- PHP文件处理--操作文件
除了能够对文件内容进行读写,对文件本身相同也能够进行操作,如拷贝文件.又一次命名.查看改动日期等. PHP内置了大量的文件操作函数,经常使用的文件函数例如以下表: 函数原型 函数说明 举例 bool ...
- mycat 离散分片 -> 程序指定分区的分片
1.程序指定分区的分片 此规则是在运行阶段有应用自主决定路由到那个分片. 此方法为直接依据字符子串(必须是数字)计算分区号(由应用传递參数.显式指定分区号). 2,加入配置文件 在function.x ...
- ios开发图层layer与核心动画二：CATransform3D，CAlayear和UIView区别，layer的position和anchorpoint
一:CATransform3D #import "ViewController.h" @interface ViewController () @property (weak, n ...