webpack版本：3.6.0

首先是引用jquery。

有兩個地方要改。

1 (項目地址)/build/webpack.base.conf.js

2 (項目地址)/src/main.js

webpack.base.conf.js:

(1) 在‘use strict‘下面引入webpack變量。

const webpack = require(‘webpack‘)

(2) module.exports 對象：

（有就修改，沒有就添加。）

resolve 對象：

resolve: {
    extensions: [‘.js‘, ‘.vue‘, ‘.json‘],
    alias: {
      
 
‘vue$‘: ‘vue/dist/vue.esm.js‘,
      ‘@‘: resolve(‘src‘),
      ‘jquery‘: ‘jquery‘
    }
  },

plugins 對象：

plugins: [
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    })    
  ],

main.js:

import $ from ‘jquery‘

和其他 import 放到一起就行。

我們可以驗證一下是否引入成功了。

隨便找個vue文件：

mounted () {    
    $(‘body‘).css({
      ‘background-color‘:‘#efefef‘
    })
  },

可以發現頁面的背景顏色確實是改掉了。

我們來看看引用前和引用後，包的大小發生了什麽變化。

可以發現 vendor.js 文件變大了87kb。

如果只有jquery可能也還好，但如果你同時也引入了一些別的東西（比如各種UI組件庫），那你的項目可能就會很臃腫，可能你的老板會說：怎麽你的項目打開這麽慢呢？

當然辦法是有的，就是外部引入所需庫的js文件，然後在webpack設置裏不打包這個庫。

把jquery設為不打包的庫。

index.html:

(項目地址)/index.html

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

webpack.base.conf.js:

module.exports 對象：

externals 對象：

externals: {    
    ‘jquery‘: ‘$‘
  },

我們再來看一下修改後的效果。

可以發現 vendor.js 的體積又變回了112kb。

另外，我順便測了一下關於註釋的問題。

我把一段代碼註釋掉後，發現打包後的 app.js 文件變小了。

也就是說，在vue文件裏寫的註釋是不會被打包的。

參考：

https://segmentfault.com/a/1190000007020623

vue ：關於引用jquery的二三問題