减少打包组件vue.config.js——Webpack的externals的使用

2019-11-07 20:00:10 阅读：716 来源： 互联网

标签：jquery 文件 vue externals js 引入 tools

vue.config.js

var path="web/";
function getProdExternals() {
  return {
    axios: "axios",
    "chart.js": "Chart",
    vue: "Vue"
  };
}
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? path:'/',
  configureWebpack: {
    externals: process.env.NODE_ENV === 'production' ?
      getProdExternals() : {}
  },
   // 生产环境是否生成 sourceMap 文件
   productionSourceMap:false,
}

通过这种方式引入的依赖库，不需要webpack处理，编译进文件中，在我们需要，使用它的时候可以通过CMD、AMD、或者window全局方式访问。

比如我们在index.html用CDN的方式引入jquery，webpack编译打包时不打包处理它，但是可以引用到它。

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

使用方法

const $ = require("jquery") 或者 import $ form "jquery";
$("#content").html("<h1>hello world</h1>")

//配置
externals: {
      jquery: "jQuery"
    },

其实，我们使用这种方式的另一个目的是为了压缩工程大小，如果所有的依赖包都压缩打包到应用中，尤其是echart这样的大型库，会导致文件过大，如果外部引入，按需引入，可以压缩应用大小。

自己写一个例子，定义一个tools.js文件
编写一个js方法

window.Tools = {
    add: function(num1, num2) {
      return num1 + num2
    }
  }

3.在index.html中引入它（先放到CDN中）

<script src="http://xxx/tools.min.js"></script>

4.配置externals

externals: {
       mathTools: "tools"
     },

5.main.js使用

const tools = require('mathTools')
const res = tools.add(1,2)
//或者
Import tools = from 'mathTools'
var res = tools.add(1,2)
Console.log(res)

看了这个之后，我明白了一件事。

我们引入到工程中的文件，无论是js，css还是别的什么，然后就可以把这些引入的文件和当前工程的文件看作在一个文件中，共享作用域，可以直接调用引入文件的变量，对象，方法。。。

所以，在我们引入萤石云的js文件之后，它的功能是执行自己的视频，对外开放一个对象EZUIPlayer，我们就在externals中引入这个对象，在需要使用它的文件中import EZUIPlayer from ‘EZUIPlayer’ ，接下来就参考官方的例程，直接调用执行即可。

标签：jquery,文件,vue,externals,js,引入,tools
来源： https://www.cnblogs.com/xbzhu/p/11815197.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

减少打包组件vue.config.js——Webpack的externals的使用