Question

我想使用vue-cli在Vue中使用Webpack插件，但我不想安装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 ....

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

};

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

在Vue Client 3中使用Webpack插件

2 个答案: