Using a webpack plugin with Vue Client 3

Question

I want to use a webpack plugin in Vue using vue-cli but I don't want to install webpack, because Vue handles this...

Using this example, I try to use the Environment plugin from webpack.

module.exports = {
  configureWebpack: {
    plugins: [
      new EnvironmentPlugin([
        'HEROKU_RELEASE_VERSION']),
    ],
  },
};

But because we use vue-cli, I get :

EnvironmentPlugin is not defined

When I include the webpack requirement

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.EnvironmentPlugin([
        'HEROKU_RELEASE_VERSION']),
    ],
  },
};

I get :

Webpack should be listed in the project's dependencies. run npm install ....

Answer 1

The answer above is good. I got another one here, with building condition control.

const webpack = require('webpack');
module.exports = {
 configureWebpack: (config) => {
   if(process.env.VUE_APP_BUILD !== 'development'){
     // do something...
   }
   config.plugins = [
     ...config.plugins, // this is important !
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) // new plugins...
   ]
 }

};