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?

Phil · Accepted Answer · 2018-10-31 05:13:50Z

5

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

answered Oct 31, 2018 at 5:13

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

jingleheimer Over a year ago

Perfect. Thank you.

Phil Over a year ago

@jingleheimer you're very welcome. Thank you for asking a good question with lots of detail.

daniel gi Over a year ago

@phil how can I access TEST_MESSAGE in my component?

Phil Over a year ago

@daniel I believe it should be available as a global variable, just like process.env

daniel gi Over a year ago

@Phil thanks for your answer but I got "TS2304 Cannot find name : TEST_MESSAGE" (I'm usign vue&TS if its matter) when I assign as private items = TEST_MESSAGE;

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related