Search code examples
javascriptvue.jswebpackvuejs2vue-cli

Vue-cli version 3 BETA webpack configuration


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)

Solution

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