vue+webpack 引入jquery

一、非全局引入

1 首先 cnpm install jquery；这时jquery已经安装成功，可以使用jquery，但是jquery不是全局的，需要在使用的组件中引入jquery，jquery的路径是jquery/dist/jquery.min.js，

import $ from "jquery/dist/jquery.min.js" 

就可以使用$了；

2. 我们也可以在webpack.base.config.js中配置路径的别名方便引入：
   例如 之后我们就可以在使用jquery的组件中这样引入

 import $ from 'jquery'；

这是jquery不是全局的，如果要使用在每一个模块中需要import 。比较麻烦，下面是设置jquery为全局的方法：

二、全局引入jQuery

在当前项目的目录下（就是package.json），运行命令 :
cnpm install jquery --save-dev
这样就将jquery安装到了这个项目中。在上面步骤的前提下：
修改webpack.base.conf.js(在build文件下)两个地方：

1：加入

var webpack=require('webpack');

2 在module.exports的里面加入

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

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

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

tip(注意):在webpack的output.libraryTarget，需要设置为var，默认值就是var（当 library 加载完成，入口起点的返回值将分配给一个变量），如果设置为commonjs等可能会报错，原因见：output.libraryTarget；

如果想要引入不会以commonjs规范书写的js就可以这样引入，在组件中import之后，因为是commonjs规范，所以会按顺序加载，引入成功

转载：xiaofenguo