vue+webpack 引入jquery

1 首先 cnpm install jquery；這時jquery已經安裝成功，可以使用jquery，但是jquery不是全局的，需要在使用的組件中引入jquery，jquery的路徑是jquery/dist/jquery.min.js，

inport $ from "jquery/dist/jquery.min.js" 就可以使用$了；

我們也可以在webpack.base.config.js中配置；路徑的別名方便引入：2

2 

 

之后我們就可以在使用jquery的組件中這樣引入

3 import $ from 'jquery'；

這是jquery不是全局的，如果要使用在每一個模塊中需要import 。比較麻煩，下面是設置jquery為全局的方法：

一。引入jQuery

在當前項目的目錄下（就是package.json），運行命令 cnpm install jquery --save-dev  這樣就將jquery安裝到了這個項目中。在上面步驟的前提下：

修改webpack.base.conf.js(在build文件下)兩個地方：

4：加入 

var webpack=require('webpack');

5 在module.exports的里面加入

plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
         jQuery: "jquery",
         $: "jquery"
    })
]

 

6 最后在main.js中加入import $ form 'jquery',完成jquery的引入

ok，這是jquery就是全局的了，在任意模塊中都可以使用了

tip:在webpack的output.libraryTarget，需要設置為var，默認值就是var（當 library 加載完成，入口起點的返回值將分配給一個變量），如果設置為commonjs等可能會報錯，原因見：output.libraryTarget；

 

如果想要引入不會以commonjs規范書寫的js就可以這樣引入，在組件中import之后，因為是commonjs規范，所以會按順序加載，引入成功