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)

Answer 1

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

Answer 2

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.

Answer 3

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

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