I am trying to learn and test the uping version of vuejs/vue-cli ( beta 3.0 ) which will be a big step toward an easiest webpack configuration. In the meantime, there is few examples....

As a test I tried to go from the vue-cli v2

webpack.dev.conf.js

plugins: [
    //...
    // copy custom static assets
    new CopyWebpackPlugin([
        {
            from: path.resolve(__dirname, '../static'),
            to: config.dev.assetsSubDirectory,
            ignore: ['.*']
        }
    ]) ]

to the new vue-cli version 3 ( beta)

vue.config.js

const path = require('path')

module.exports = {
    chainWebpack: config => {
        config
            .plugin('copy')
            .use(require('copy-webpack-plugin')), [{
                from: path.resolve(__dirname, '../static'),
                to: 'static', ignore: ['.*']
            }]
    }
}

running

npm run serve

does not plains...

so it seems to be OK, but I would like to know if there are some papers , tuts , examples already existing on this topic... fr the time being I only discover new features by reading existing code source

Currently I am struggling in converting this :

new webpack.ProvidePlugin({
  $: 'jquery',
  jquery: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery'
}),

I tried .

config
  .plugin('provide')
  .use(require('webpack.ProvidePlugin')), [{
    $: 'jquery',
    jquery: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
  }]

but I get an error :

 INFO  Starting development server...
 ERROR  Error: Cannot find module 'webpack.ProvidePlugin'
 Error: Cannot find module 'webpack.ProvidePlugin'
   at Function.Module._resolveFilename (module.js:536:15)

I am trying to learn and test the uping version of vuejs/vue-cli ( beta 3.0 ) which will be a big step toward an easiest webpack configuration. In the meantime, there is few examples....

As a test I tried to go from the vue-cli v2

webpack.dev.conf.js

plugins: [
    //...
    // copy custom static assets
    new CopyWebpackPlugin([
        {
            from: path.resolve(__dirname, '../static'),
            to: config.dev.assetsSubDirectory,
            ignore: ['.*']
        }
    ]) ]

to the new vue-cli version 3 ( beta)

vue.config.js

const path = require('path')

module.exports = {
    chainWebpack: config => {
        config
            .plugin('copy')
            .use(require('copy-webpack-plugin')), [{
                from: path.resolve(__dirname, '../static'),
                to: 'static', ignore: ['.*']
            }]
    }
}

running

npm run serve

does not plains...

so it seems to be OK, but I would like to know if there are some papers , tuts , examples already existing on this topic... fr the time being I only discover new features by reading existing code source

Currently I am struggling in converting this :

new webpack.ProvidePlugin({
  $: 'jquery',
  jquery: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery'
}),

I tried .

config
  .plugin('provide')
  .use(require('webpack.ProvidePlugin')), [{
    $: 'jquery',
    jquery: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
  }]

but I get an error :

 INFO  Starting development server...
 ERROR  Error: Cannot find module 'webpack.ProvidePlugin'
 Error: Cannot find module 'webpack.ProvidePlugin'
   at Function.Module._resolveFilename (module.js:536:15)

• javascript
• vue.js
• webpack
• vuejs2
• vue-cli

• This section of the vue-cli docs (github./vuejs/vue-cli/blob/dev/docs/webpack.md) is the only one on webpack configuration I know so far. Anyway, what is the actual problem you have? – oniondomes Commented Apr 3, 2018 at 9:38
• thanks for your feedback... I updated my question with the current issue I ahve... – user762579 Commented Apr 3, 2018 at 9:51

4 Answers 4

This should work unless you don't use webpack v4 (v4 throws an error for some reason):

const webpack = require('webpack');

module.exports = {
    chainWebpack: config => {
        config
            .plugin('provide')
            .use(webpack.ProvidePlugin, [{
                $: 'jquery',
                jquery: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery'
            }]);
    },
};

This (found in the documentation I shared with you in the ment section) is probably something you want to get familiar with if you want to make some changes to vue-cli configuration.

Note: you have to use an array passing parameters to the plugin. Although the plugin itself expects an Object, use() is waiting for an array of arguments. That's why you should use array instead.

Your require mand is wrong/unecessary, nothing to do with webpack or vue-cli

Example code:

config
  .plugin('provide')
  .use(require('webpack').ProvidePlugin, [{
    $: 'jquery',
    jquery: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
  }])

I should define the new plugin usage before ...

const path = require('path')
const webpack = require('webpack')

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

On a project generated using the latest Vue CLI verstion ATM (3.2.1), I found that configuring jQuery required adding a Webpack Plugin to the project.

This is successfully done in the vue.config.js with the following syntax that uses both top answers:

module.exports = {
  chainWebpack: config => {
    config.plugin("provide").use(require("webpack").ProvidePlugin, [
      {
        $: "jquery",
        jQuery: "jquery"
      }
    ]);
  }
};

This avoids installing webpack and passes an array of objects to the config.plugin function rather than an object.