无法获取 webpack.DefinePlugin 变量答案

【问题标题】：Cannot get webpack.DefinePlugin variable无法获取 webpack.DefinePlugin 变量
【发布时间】：2018-08-22 13:01:37
【问题描述】：

由于某种原因，我在运行 npm install @ionic/app-scripts@latest --save --save-exact 后在终端出现了这个错误

配置文件有错误 “C:\Projects\myproject\config\webpack.config.js”。改为使用默认值。 TypeError：无法读取未定义的属性“推送” 在对象。 (C:\Projects\myproject\config\webpack.config.js:5:22) 在 Module._compile (module.js:570:32) 在 Object.Module._extensions..js (module.js:579:10) 在 Module.load (module.js:487:32) 在 tryModuleLoad (module.js:446:12) 在 Function.Module._load (module.js:438:3) 在 Module.require (module.js:497:17) 在需要（内部/module.js:20:19）在 Object.fillConfigDefaults (C:\Projects\myproject\node_modules\@ionic\app-scripts\dist\util\config.js:316:26)

webpack.DefinePlugin 和 @ionic/app-scripts@latest 是否存在兼容性问题

这是我的 webpack.config.js

const webpackConfig = require("../node_modules/@ionic/app-
scripts/config/webpack.config");
const webpack = require("webpack");
const ENV = process.env.IONIC_ENV; 
const envConfigFile = require(`./config-${ENV}.json`);
webpackConfig.plugins.push(
    new webpack.DefinePlugin({
           webpackGlobalVars: {
             apiUrl: JSON.stringify(envConfigFile.apiUrl)
           }
     })
 );

here is my service

 import { Injectable } from "@angular/core";

 declare const webpackGlobalVars: any;

 @Injectable()
 export class ConfigurationService {
    public static apiUrl = webpackGlobalVars.apiUrl;

 }

这是我在控制台中的错误。

configuration.service.ts:7 Uncaught ReferenceError: webpackGlobalVars is not defined 在 Object.81 (configuration.service.ts:7) 在 webpack_require (引导 09563358e6ae30fad5cb:54) 在 Object.225 (data.service.ts:25) 在 webpack_require (引导程序 09563358e6ae30fad5cb:54) 在 Object.205 (main.js:1228) 在 webpack_require (引导程序 09563358e6ae30fad5cb:54) 在 webpackJsonpCallback (bootstrap 09563358e6ae30fad5cb:25) 在 main.js:1 81@配置.service.ts:7 webpack_require @引导程序 09563358e6ae30fad5cb:54 225@data.service.ts:25 webpack_require @引导程序 09563358e6ae30fad5cb:54 205@main.js:1228 webpack_require @引导程序 09563358e6ae30fad5cb:54 webpackJsonpCallback @ bootstrap 09563358e6ae30fad5cb:25 （匿名）@main.js:1

【问题讨论】：

标签： angular ionic-framework webpack ionic3

【解决方案1】：

阅读此CHANGELOG

重大变化
webpack 配置格式从导出的配置更改为配置字典。
基本上，默认配置现在导出一个 dev 和 prod 属性，并为每个属性分配一个配置。请参阅更改 here 的示例。此更改为为下一个应用脚本版本添加多个“环境”支持奠定了基础。

所以现在需要 webpackConfig 导出一个看起来像这样的对象
{ dev: devConfig, prod: prodConfig }

您发布的代码中的更改：

const webpackConfig = require("../node_modules/@ionic/app-scripts/config/webpack.config");
...
webpackConfig.plugins.push( ... ); // --> webpackConfig[ENV].plugins.push( ... );

【讨论】：