使用Webpack插件与Vue Client 3

Question

我希望在Vue中使用webpack插件，使用vue-cli，但不想安装webpack，因为Vue会处理它...

使用this示例，我尝试使用webpack的Environment插件。

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

由于我们使用了vue-cli，我得到了以下错误信息：

EnvironmentPlugin未定义

当我包含webpack需求时。

const webpack = require('webpack')

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

我得到的信息是：

Webpack 应该列在项目的依赖项中。运行 npm install ....

- r_j

Answer 1

上面的答案很好。我这里还有另一个，涉及建筑物条件控制。

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

};

- Old_dream

---

这个答案更好，因为它很懒惰并且注入了环境变量。 - Duc Trung Mai

正好是我需要的。谢谢。 - undefined

Answer 2

首先，您需要将webpack安装为依赖项。

npm i --save-dev webpack

然后将以下内容添加到您的vue.config.js中。

const webpack = require('webpack')

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

- Peter Kota

---

不需要安装webpack，它默认与vue-cli一起提供。 - Duc Trung Mai