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,不然会失效

你可能感兴趣的:(前端开发,jquery,插件,webpack,vue)