webpack如何打包第三方库的资源?

Question

描述你的问题

我在做一个普通的传统项目，由于使用了es2015并且一些页面中的小组件使用了react，打包项目为了省事儿就使用了webpack。后来发现jquery的一些插件中使用了静态资源(如 jquery.jBox, ztree 等等这些插件都有自己的图片和css)，这些资源该如何处理呢？

---

我当前的情况

为了提高打包效率和访问速度，我webpack无视了jquery，直接在html中引入了cdn的jquery。这些有自己css和图片的jquery插件确实不知道如何处理了……

Answer 1

在 module.exports 中加上下面这个属性

externals: {
  "jquery": "jQuery"
}

在你用到 jQuery 的组件里直接引用即可

import $ from 'jquery';

const $app = $('#root');
$app[0].innerHTML = 'jQuery';

需要留意的是，得确保 CDN 文件必须在 webpack 打包文件引入之前先引入哟