CODEWITHSUNDEEP
javascriptvue.jswebpackvuejs2vue-cli
user762579
user762579

Reputation:

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)

Upvotes: 5

Views: 5287

Answers (4)

Linus Borg
Linus Borg

Reputation: 23968

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

Upvotes: 5

Anas Tiour
Anas Tiour

Reputation: 1422

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.

Upvotes: 0

user762579
user762579

Reputation:

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

Upvotes: 3

oniondomes
oniondomes

Reputation: 2063

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.

Upvotes: 7

Related Questions