如果我们打包的时候不想将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等公共库的更多相关文章

  1. 使用webpack打包后的vue项目如何运行（express）

    我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css.js以及图片等,那么打包后的文件该如何正确运行呢? 倘若直接打开html文件,会报如下错 ...

  2. vue用webpack打包时引入es2015插件

    1.安装依赖包 $ npm install --save-div babel-preset-es2015 ps:babel-loader.babel-core应该是默认装好的,如果没有安装,请重新安装 ...

  3. # webpack 打包工具（vue）

    vue-webpack 打包工具 我的github iSAM2016 不是教程,是自我总结 目录 webpack.base.conf.js webpack.dev.conf.js webpack.pr ...

  4. webpack 打包CSS 引入图片

    加载css 安装style-loader, css-loader npm install style-loader css-loader --save-dev 配置webpack.config.js文 ...

  5. Webpack打包进阶

    说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...

  6. vue引入外部.css文件，webpack将其与.vue中的样式混合打包了，怎么办？

    我使用vue-cli搭自己的博客,希望引入公共样式: // main.js import './assets/styles/common.css' 我本来是希望webpack打包后,能将这个样式独立打 ...

  7. vue webpack打包后 iconfont引入路径不对

    vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...

  8. Vue发布过程中遇到坑，以及webpack打包优化

    前言 这段时间,本人自己做了一个vue画面部署到自己的服务器上,发现运行速度慢的的惊人,虽然服务器很渣(本人没什么钱,只能租最差的服务器,主要是给自己学习用的),但是这样开发出来的网站简直不能用,所以 ...

  9. 基于 Webpack 引入公共库的几种方式

    以 jquery 和其插件 jquery-modal 为例,记录下引入公共库的几种方式. 为了方便,首先安装 jquery 和 jquery-modal: cnpm i jquery jquery-m ...

随机推荐

  1. Android android.database.CursorIndexOutOfBoundsException:Index -1 requested, with a size of 1

    Android中数据库处理使用cursor时,游标不是放在为0的下标,而是放在为-1的下标处开始的. 也就是说返回给cursor查询结果时,不能够马上从cursor中提取值. 下面的代码会返回错误 U ...

  2. decode与case when

    语法 decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) select * from reglike; ,),'aaa','yes','no') decode from ...

  3. (转)把Sublime Text 2 加入右键菜单（带图标）,Edit with Sublime Text

    转自 http://www.turen.me/archives/509 Sublime Text 2 是现在很受大家欢迎的编辑器了,不仅是在web前端,在书定简单的php.Js等代码时,也是相当的好用 ...

  4. 7.1 基础知识Android消息处理机制

    1. Android消息处理机制: Handler, MessageQueue, Looper, Thread 线程概念 : 一个应用程序运行时它的主体被称为进程, 一个进程内部可以有多个线程, 线程 ...

  5. 使用Perl合并文件

    使用Perl合并文件 有时需要将整个目录下的小文件合并到一个文件中,以便查阅检索 特性 整个目录完全遍历,自动存入单个文件 顺序遍历文件 待合并的目录 合并后的文件内容 syscfg/test1 sy ...

  6. debian 下的vi 上下左右键问题

    小白一只，查了一下vi的版本信息 发现好像是vim 于是把~/.vimrc 变量设置了一下就好了。 将set compatible 设置成set nocompatible . 这是因为系统会默认vim ...

  7. Auto Layout深入理解，及masonry简单介绍

    本篇博客是本人在学习自己主动布局过程中对自己主动布局的理解和整理,分三部分介绍,内容可能会有所反复.见谅. 一.autosizing与Auto Layout对照,及Auto Layout简单介绍 1. ...

  8. [SCSS] Loop Over Data with the SCSS @each Control Directive

    The SCSS @for directive is great when we know how many iterations are required and we only need 1 va ...

  9. 【solr基础教程之二】索引 分类： H4_SOLR/LUCENCE 2014-07-18 21:06 3331人阅读 评论(0) 收藏

    一.向Solr提交索引的方式 1.使用post.jar进行索引 (1)创建文档xml文件 <add> <doc> <field name="id"&g ...

  10. Fragment之一：Fragment入门 分类： H1_ANDROID 2013-11-15 18:16 2799人阅读 评论(2) 收藏

    参考自张泽华视频 Fragment是自Android3.0后引入的特性,主要用于在不同的屏幕尺寸中展现不同的内容. Fragment必须被嵌入Activity中使用,总是作为Activity的组成部分 ...