From 7117a096dffd8664e2fcf9e68880dd9ff3743ced Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Tue, 9 Apr 2019 17:06:24 +0800
Subject: [PATCH] refactor: use EnvironmentPlugin instead of DefinePlugin

BREAKING CHANGE:
This change breaks use cases where users have tapped the `define`
plugin options in `chainWebpack`

fixes #3579
---
 .../cli-service/lib/commands/build/resolveWcConfig.js |  7 +++----
 packages/@vue/cli-service/lib/config/app.js           |  2 +-
 packages/@vue/cli-service/lib/config/base.js          |  8 +++++---
 .../@vue/cli-service/lib/util/resolveClientEnv.js     | 11 +----------
 4 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/packages/@vue/cli-service/lib/commands/build/resolveWcConfig.js b/packages/@vue/cli-service/lib/commands/build/resolveWcConfig.js
index f852bebfb2..5e03e7cd97 100644
--- a/packages/@vue/cli-service/lib/commands/build/resolveWcConfig.js
+++ b/packages/@vue/cli-service/lib/commands/build/resolveWcConfig.js
@@ -1,4 +1,5 @@
 const path = require('path')
+const webpack = require('webpack')
 const { resolveEntry, fileToComponentName } = require('./resolveWcEntry')
 
 module.exports = (api, { target, entry, name }) => {
@@ -62,10 +63,8 @@ module.exports = (api, { target, entry, name }) => {
 
     config
       .plugin('web-component-options')
-        .use(require('webpack/lib/DefinePlugin'), [{
-          'process.env': {
-            CUSTOM_ELEMENT_NAME: JSON.stringify(libName)
-          }
+        .use(webpack.EnvironmentPlugin, [{
+          CUSTOM_ELEMENT_NAME: libName
         }])
 
     // enable shadow mode in vue-loader
diff --git a/packages/@vue/cli-service/lib/config/app.js b/packages/@vue/cli-service/lib/config/app.js
index 985748514b..6f9d6eace8 100644
--- a/packages/@vue/cli-service/lib/config/app.js
+++ b/packages/@vue/cli-service/lib/config/app.js
@@ -88,7 +88,7 @@ module.exports = (api, options) => {
             files: assets,
             options: pluginOptions
           }
-        }, resolveClientEnv(options, true /* raw */))
+        }, resolveClientEnv(options))
       }
     }
 
diff --git a/packages/@vue/cli-service/lib/config/base.js b/packages/@vue/cli-service/lib/config/base.js
index c8b778d9fc..fcb9fbda44 100644
--- a/packages/@vue/cli-service/lib/config/base.js
+++ b/packages/@vue/cli-service/lib/config/base.js
@@ -1,3 +1,5 @@
+const webpack = require('webpack')
+
 module.exports = (api, options) => {
   api.chainWebpack(webpackConfig => {
     const isLegacyBundle = process.env.VUE_CLI_MODERN_MODE && !process.env.VUE_CLI_MODERN_BUILD
@@ -142,7 +144,7 @@ module.exports = (api, options) => {
         // prevent webpack from injecting useless setImmediate polyfill because Vue
         // source contains it (although only uses it if it's native).
         setImmediate: false,
-        // process is injected via DefinePlugin, although some 3rd party
+        // process is injected via EnvironmentPlugin, although some 3rd party
         // libraries may require a mock to work properly (#934)
         process: 'mock',
         // prevent webpack from injecting mocks to Node native modules
@@ -156,8 +158,8 @@ module.exports = (api, options) => {
 
     const resolveClientEnv = require('../util/resolveClientEnv')
     webpackConfig
-      .plugin('define')
-        .use(require('webpack/lib/DefinePlugin'), [
+      .plugin('process-env')
+        .use(webpack.EnvironmentPlugin, [
           resolveClientEnv(options)
         ])
 
diff --git a/packages/@vue/cli-service/lib/util/resolveClientEnv.js b/packages/@vue/cli-service/lib/util/resolveClientEnv.js
index 2aa83f1554..8cd05398bf 100644
--- a/packages/@vue/cli-service/lib/util/resolveClientEnv.js
+++ b/packages/@vue/cli-service/lib/util/resolveClientEnv.js
@@ -9,14 +9,5 @@ module.exports = function resolveClientEnv (options, raw) {
   })
   env.BASE_URL = options.publicPath
 
-  if (raw) {
-    return env
-  }
-
-  for (const key in env) {
-    env[key] = JSON.stringify(env[key])
-  }
-  return {
-    'process.env': env
-  }
+  return env
 }