refactor!: use DefinePlugin (again) instead of EnvironmentPlugin (#4673)

* Revert "refactor: use EnvironmentPlugin instead of DefinePlugin"

This reverts commit 7117a096df.

* refactor: use the exported DefinePlugin

packages/@vue/cli-service/lib/commands/build/resolveWcConfig.js

@@ -1,5 +1,4 @@
 const path = require('path')
-const webpack = require('webpack')
 const { resolveEntry, fileToComponentName } = require('./resolveWcEntry')
 
 module.exports = (api, { target, entry, name, 'inline-vue': inlineVue }) => {
@@ -56,8 +55,8 @@ module.exports = (api, { target, entry, name, 'inline-vue': inlineVue }) => {
 
     config
       .plugin('web-component-options')
-        .use(webpack.EnvironmentPlugin, [{
-          CUSTOM_ELEMENT_NAME: libName
+        .use(require('webpack').DefinePlugin, [{
+          'process.env.CUSTOM_ELEMENT_NAME': JSON.stringify(libName)
         }])
 
     // enable shadow mode in vue-loader

packages/@vue/cli-service/lib/config/app.js

@@ -98,7 +98,7 @@ module.exports = (api, options) => {
             files: assets,
             options: pluginOptions
           }
-        }, resolveClientEnv(options))
+        }, resolveClientEnv(options, true /* raw */))
       }
     }
 

packages/@vue/cli-service/lib/config/base.js

@@ -1,5 +1,3 @@
-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
@@ -155,7 +153,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 EnvironmentPlugin, although some 3rd party
+        // process is injected via DefinePlugin, although some 3rd party
         // libraries may require a mock to work properly (#934)
         process: 'mock',
         // prevent webpack from injecting mocks to Node native modules
@@ -169,8 +167,8 @@ module.exports = (api, options) => {
 
     const resolveClientEnv = require('../util/resolveClientEnv')
     webpackConfig
-      .plugin('process-env')
-        .use(webpack.EnvironmentPlugin, [
+      .plugin('define')
+        .use(require('webpack').DefinePlugin, [
           resolveClientEnv(options)
         ])
 

packages/@vue/cli-service/lib/util/resolveClientEnv.js

@@ -9,5 +9,14 @@ module.exports = function resolveClientEnv (options, raw) {
   })
   env.BASE_URL = options.publicPath
 
-  return env
+  if (raw) {
+    return env
+  }
+
+  for (const key in env) {
+    env[key] = JSON.stringify(env[key])
+  }
+  return {
+    'process.env': env
+  }
 }