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

Author: haoqunjiang

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

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))
       }
     }
 

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)
         ])
 

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
 }