vue.js webpack problem: can't add plugin to vue.config.js with configureWebpack

Question

vue.js webpack problem: I can't add a plugin to vue.config.js with configureWebpack

I created a vue.js project with vue cli 3. I am following the example in: https://cli.vuejs.org/guide/webpack.html

My vue.config.js:

let webpack = require('webpack');

module.exports = {

    configureWebpack: {
        plugins: [
            new webpack.DefinePlugin({
                __TEST_MESSAGE__: JSON.stringify('howdy there!')
            })
        ]
    },
};

The resolved webpack config looks like:

{
    mode: 'production',
    ...
    plugins: [
        /* config.plugin('vue-loader') */
        new VueLoaderPlugin(),

        /* config.plugin('define') */
        new DefinePlugin(
          {
            'process.env': {
              VUE_APP_CLI_UI_URL: '""',
              NODE_ENV: '"production"',
              BASE_URL: '"/"'
            }
          }
        ),
        /* config.plugin('case-sensitive-paths') */
        new CaseSensitivePathsPlugin(),

        ...
        /////////////////////////////////////////////////////
        // Inserted note for SO: This is messed up!  Should
        // be: 
        // new DefinePlugin({ __TEST_MESSAGE__: '"howdy there!"' })
        /////////////////////////////////////////////////////
        {
          definitions: {
            __TEST_MESSAGE__: '"howdy there!"'
          }
        }
    ],
    ...
}

configureWebPack is supposed to merge my plugins with the vue defined plugins. Why is it stripping the DefinePlugin class out and just including the argument to the constructor in the plugins array?

Answer 1

Because Vue already includes the DefinePlugin, you need to modify it using Webpack's chain API instead of attempting to add a new one.

module.exports = {
  chainWebpack: config => {
    config.plugin('define').tap(args => {
      args[0].__TEST_MESSAGE__ = JSON.stringify('howdy there!')
      return args
    })
  }
}

This results in the following config (just an example)...

new DefinePlugin(
  {
    'process.env': {
      NODE_ENV: '"development"',
      BASE_URL: '"/"'
    },
    __TEST_MESSAGE__: '"howdy there!"'
  }
),

See https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin