Vue-cli version 3 BETA webpack configuration

Question

I am trying to learn and test the upcoming 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 complains...

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)

This section of the vue-cli docs (https://github.com/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, Apr 03 '18 at 09:38
thanks for your feedback... I updated my question with the current issue I ahve... — , Apr 03 '18 at 09:51

oniondomes · Answer 1 · 2018-04-03T10:42:47.563

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 comment 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.

Linus Borg · Accepted Answer · 2018-12-22T12:20:10.883

5

Your require command 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'
  }])

edited Dec 22 '18 at 12:20

answered Apr 03 '18 at 10:30

Linus Borg

23,622
7
63
50

thanks ... did not catch up with the require() however running i , I get an error INFO Starting development server... ERROR TypeError: Plugin is not a constructor TypeError: Plugin is not a constructor – Apr 03 '18 at 10:33
1

Oh, it's ProvidePlugin, no providePlugin. Will correct my answer, – Linus Borg Apr 08 '18 at 14:11
1

Using the latest vue-cli version (3.2.1) and trying to use jquery, I found that the plugin rather expects an array like in oniondomes' answer – Anas Tiour Dec 20 '18 at 18:22
Yeah I was wrong here, fixed the answer accordingly. – Linus Borg Dec 22 '18 at 12:20

score 3 · Answer 3 · answered Apr 03 '18 at 11:34

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'
      })
    ]
  }
}

score 0 · Answer 4 · answered Dec 20 '18 at 18:29

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.

Vue-cli version 3 BETA webpack configuration

4 Answers4

Linked