在 Vue Client 3 中使用 webpack 插件答案

【问题标题】：Using a webpack plugin with Vue Client 3在 Vue Client 3 中使用 webpack 插件
【发布时间】：2019-05-06 21:34:13
【问题描述】：

我想使用 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 ....

【问题讨论】：

标签： javascript vue.js webpack

【解决方案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...
   ]
 }

};

【讨论】：

这个答案要好得多，因为它很懒并且注入了 ENV

【解决方案2】：

首先你需要安装 webpack 作为依赖。

npm i --save-dev webpack

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

const webpack = require('webpack')

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

【讨论】：

无需安装webpack，默认自带vue-cli