未找到 Webpack 外部模块答案

【问题标题】：Webpack externals Module not found未找到 Webpack 外部模块
【发布时间】：2017-04-09 13:03:20
【问题描述】：

你好希望你一切都好。

我目前正在为 webpack 苦苦挣扎，正在寻找满足以下需求的最佳解决方案：

我想从我的单页应用程序中从 json 加载配置并在任何地方使用它。这实际上效果很好：

externals: {
    'config': JSON.stringify(getAppConfig())
}

这当然是添加到 webpack 配置中，而 getAppConfig 是：

var getAppConfig = () => {
    var finalConfig = require('./config.json');
    if (process.argv.indexOf('--env.production')) {
        finalConfig = Object.assign(finalConfig, require('./config.production.json'));
    }
    /*more stuff here but removed for simplicity*/
    return finalConfig;
}

然后在一个模块里面，我做

import Config from 'config';

并使用导入的 javascript 对象。令人惊讶的是一切都按预期工作:) 我的问题实际上是 webpack 中的这个丑陋的错误

ERROR in ./ClientApp/store/WeatherForecasts.ts 
Module not found: Error: Cannot resolve module 'config' in

我真的不想为了 CI 目的而出现虚假错误，但我宁愿了解发生了什么，也不愿以某种方式忽略它。顺便说一句，我正在为该项目使用打字稿，不确定它是否会改变任何东西，但最好陈述我猜想的所有事实。这是打字稿模块定义：

declare module 'config' {
    export interface Config {
        backendUrl: string;
    }
    export default {} as Config;
}

非常感谢所有帮助。彼得

【问题讨论】：

你的配置中libraryTarget 的值是多少？
您可能正在做某事。我实际上有 2 个配置，一个用于服务器端预渲染，一个用于客户端。客户端，没有设置任何东西，它不会抱怨。服务器端它设置为 commonjs 并且它抱怨。会考虑改变它
嗯，好的，所以将其更改为任何内容都无济于事。但它肯定构建客户端而不是服务器版本。我会进一步研究。

标签： typescript webpack ecmascript-6

【解决方案1】：

好的，我有一个解决方案。恐怕我只是没有正确阅读文档。请参阅我使用 webpack-merge，但我不知道它不能正确合并数组。因此，我的服务器预渲染包配置覆盖了共享的包，并且它丢失了。现在都好了

【讨论】：

【解决方案2】：

我曾经尝试在 typescript 文件中导入全局变量（在 webpack 外部配置中定义）。我通过以下步骤修复了它。

删除外部文件

外部：{ lodash：'_'， },
将 lodash 添加到 index.html

&lt;script src="https://images.cloudhubpanel.com/docs/js-lib/lodash-4.17.5.min.js"&gt;&lt;/script&gt;

将 index.d.ts 添加到项目根文件夹

declare let _: any; 
export default _;

引用_不需要导入，像这样，是我的文件之一

import Enums from './EnumsManager';
import { getStore } from './localStorage';
/**
 * getAuthorization
 */
export const getAuthorization = (): string => {
  const loginUser: any = getStore(Enums.LocalStorageKey);
  if (_.isEmpty(loginUser)) {
    return '';
  }
  const userData: any = JSON.parse(loginUser).token_info;
  if (_.isEmpty(userData)) {
    return '';
  }
  const { token_type, access_token } = userData;
  return `${token_type} ${access_token}`;
};

我正在尝试使用webpack+typescript+react。我的项目是由

npm install -g create-react-app

create-react-app my-app --scripts-version=react-scripts-ts

【讨论】：