webpack构建VUE项目使用jquery及其插件 expose-loader

闲来无事先写一篇博客，整合一下最近网上更新的资源，在用webpack构建VUE项目时会遇到仍旧想用jquery以及依赖jQuery的插件，但是引入jq会很麻烦，这里介绍一种比较简单使用的方法，使用expose-loader

先简单介绍一下引入jq的两种别的做法，第一种是用Npm下载jquery依赖，然后在webpack.config.js也就是配置文件中声明$为全局变量，然后import或者require进去（具体做法自行百度，这种做法很常见也很多，这里就不详细介绍了），但是这种做法对于插件引入还是不太友好的，第二种做法是直接在index.html中使用script以一个绝对路径引入jquery.min.js，这种做法我没试过，不知道要不要声明全局变量。

下面就开始使用expose-loader来引入jq及其插件

首先

npm install jquery expose-loader --save

我们先下载jq和expose-loader

然后我们去配置webpack.config.js（注意：这个文件是通过vue-cli后以webpack-simple所生成的，如果单纯使用webpack模板的话，那就要去找一个叫webpack.conf的文件了，那个才是配置这个的文件，忘记具体叫啥了= =）

module: {
    loaders: [
      {
        test: require.resolve('jquery'),
        loader: 'expose-loader?jQuery!expose-loader?$'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },

把关于jquery和expose-loader的配置放在所有的Loader之前，也就是第一个加载。

最后，去想引入插件的页面加入如下代码

import $ from 'expose-loader?$!jquery'
import 'jquery.easing' //插件可用   

在vue组件中的script的最上方，也就是export default上面，加入这两行代码，注意这里用的是es6的语法，没有bable的童鞋请用require引入，不过用vue-cli生成的项目应该支持es6了吧= =

当然题主这里以jquery.easing为例，如果是在npm中找不到的依赖，是一个相对冷门的插件，请用绝对路径引入

最后说一句，expose-loader的写法已经有了更新，之前的写法是

      {
        test: require.resolve('jquery'),
        loader: 'expose?jQuery!expose?$'
      },

import $ from 'expose?$!jquery'
import 'jquery.easing' //插件可用  

在用了最新版的webpack2.0和expose-loader之后，记得在原有代码上加上-loader，不然会失效