import jquery into vuejs2 project via expose-loader

Question

I created a vuejs2 project with latest vue-cli and tried to import jQuery into the project by using expose-loader, I think I followed the instruction in the official readme but got no luck.

What I've done:

• install jquery and expose-loader via npm
• insert the lines below in build/webpack.base.conf.js

But when I typed console.log(window.jQuery) in Chrome devtool's console, I still got undefined.

// ...
module: {
  rules: [
    // added for supporting jquery
    {
      test: require.resolve('jquery'),
      use: [{
        loader: 'expose-loader',
        options: 'jQuery'
      },{
        loader: 'expose-loader',
        options: '$'
      }]
    },
// ...

What did I miss?

Answer 1

You can try without the expose-loader using the ProviderPlugin

1. npm install jquery --save

2. Now in your build/webpack.base.conf.js

   module.exports = { 
       plugins: [ 
           new webpack.ProvidePlugin({ 
               $: 'jquery', 
               jQuery: 'jquery',
               'window.jQuery': 'jquery'
           }) 
       ]
       //..
   } 
   

Answer 2

To do this in my application, I make this a bit more explicit in my entry point file directly in the import statement:

import 'expose-loader?$!expose-loader?jQuery!jquery';

This exposes jquery to the $ and jQuery variables via the expose-loader plugin.