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

Old_dream · Accepted Answer · 2020-03-16 13:39:07Z

12

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

};

answered Mar 16, 2020 at 13:39

Old_dream

4364 silver badges9 bronze badges

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

2 Comments

Duc Trung Mai Over a year ago

This answer is much better as it's lazy and get ENVs injected

khamaileon Over a year ago

Exactly what I needed. Thanks

Peter Kota · Accepted Answer · 2018-12-05 13:05:39Z

4

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

answered Dec 5, 2018 at 13:05

Peter Kota

8,3905 gold badges29 silver badges53 bronze badges

1 Comment

Duc Trung Mai Over a year ago

No need to install webpack, it comes with vue-cli by default

Collectives™ on Stack Overflow

Using a webpack plugin with Vue Client 3

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related