CODEWITHSUNDEEP
javascriptvue.jswebpack
r_j
r_j

Reputation: 1368

Using a webpack plugin with Vue Client 3

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 ....

Upvotes: 4

Views: 6294

Answers (2)

Old_dream
Old_dream

Reputation: 436

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...
   ]
 }

};

Upvotes: 12

Peter Kota
Peter Kota

Reputation: 8350

First you need to install webpack as dependency.

npm i --save-dev webpack

After that add the following to your vue.config.js.

const webpack = require('webpack')

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

Upvotes: 4

Related Questions