我将 webpack 与 typescript 一起使用，并在 typescript 中自行配置。指示here https://webpack.js.org/configuration/configuration-languages/#typescript

在我的根里我有webpack.config.base.ts

import webpack from "webpack";

const getConfig = ( appDir: string, distDir: string, env: any, args: any ): webpack.Configuration => {
    const config: webpack.Configuration = {
        entry: {

        },
        output: {

        },
        resolve: {
            plugins: [

            ],
            extensions: [".ts", ".tsx", ".js"]
        },
        devtool: "source-map",
        module: {
            rules: [
            ]
        },
        plugins: [
        ]
    };

    return config;
};

module.exports = getConfig;

然后我有两个项目，每个项目都有自己的webpack.config.ts

import webpack from "webpack";
import * as path from 'path';

const getConfig = require("../../webpack.config.base");

const appDir = __dirname;
const distDir  = path.resolve(__dirname, "../AppOne.Web/wwwroot");

const getConfigFactory = (env: any, args: any): webpack.Configuration => getConfig(appDir, distDir, env, args);

module.exports = getConfigFactory;

这一切都工作得很好。Here's https://github.com/michaelbull/aurelia-split-pane/blob/master/webpack.config.ts该工厂的完整示例getConfig = () => {} style.

我的问题是当我试图改变时

const getConfig = require("../../webpack.config.base");

到 es6 导入。这甚至是 VS code 提供的建议。

当我应用此更改时，我得到

这是我的tsconfig.json我已经有了[allowSyntheticDefaultImports][5]已启用。建议here https://github.com/microsoft/TypeScript/issues/2242#issuecomment-223384524.

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "jsx": "react",
    "experimentalDecorators": true,
    "lib": [
      "es2015",
      "dom"
    ],
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "typeRoots": [
      "./node_modules/@types/",
      "./types/"
    ],
    "baseUrl": ".",
    "paths": { }
  },
  "include": [
    "./src/**/*.ts",
    "./src/**/*.tsx"
  ]
}

但我补充说export default getConfig;无论如何...以及npm run build再次。它仍然失败。

const getConfigFactory = (env: any, args: any): webpack.Configuration => getConfig(appDir, distDir, env, args);
                                                                                  ^
TypeError: webpack_config_base_1.default is not a function

在把头撞到桌子上之前我最后的尝试是改变

import getConfig from "../../webpack.config.base";

import * as base from "../../webpack.config.base";

删除export default getConfig; in the webpack.config.base.ts并导出const getConfig直接作为export const getConfig。但到那时还有什么意义module.exports = getConfig。更不用说它也不起作用（与以前相同的问题）

const getConfigFactory = (env: any, args: any): webpack.Configuration => base.getConfig(appDir, distDir, env, args);
                                                                              ^
TypeError: base.getConfig is not a function

我在这里缺少什么？为什么我不能简单地替换const getConfig = require("../../webpack.config.base"); with import getConfig from "../../webpack.config.base"

PS.

这是我的"scripts"为了运行这个

    "build:appone": "webpack --mode=development --config ./src/AppOne.App/webpack.config.ts",
    "build:apptwo": "webpack --mode=development --config ./src/AppTwo.App/webpack.config.ts",

有什么作用？

我配置了webpack with 打字稿适用于多种环境（例如development and production）具有通用的基本配置。为此，我利用：

• Node.js（版本11.12.0)
• 打字稿（版本3.5.3)
• webpack（版本4.39.1)

目录结构

假设目录结构如下：

project/
├── ...
├── webpack.common.ts
├── webpack.development.ts
└── webpack.production.ts

其他目录结构（例如示例中的两个嵌套项目）也将起作用。不过，您可能必须调整以下示例中使用的路径。

TypeScript 配置

webpack的基本配置，webpack.common.ts，看起来如下：

import webpack from 'webpack';

const configuration: webpack.Configuration = {
  // Your common webpack configuration...
};

export default configuration;

针对不同环境的两个 webpack 配置使用以下扩展了此基本配置npm 包webpack-merge https://www.npmjs.com/package/webpack-merge。您可以在以下位置找到 TypeScript 的类型：npm 包@types/webpack-merge https://www.npmjs.com/package/@types/webpack-merge。继续使用最初的示例，webpack 配置为development环境如下：

import webpack from 'webpack';
import merge from 'webpack-merge';
import commonWebpackConfiguration from './webpack.common';

const configuration: webpack.Configuration = merge(commonWebpackConfiguration, {
  mode: 'development'
  // Your `development`-specific configuration...
});

export default configuration;

同时，webpack 配置为production环境与使用的环境没有什么不同development环境方面import/export syntax.

进出口

正如您可能已经注意到的，我使用ES6 import/export syntax:

export default configuration;

and

import commonWebpackConfiguration from './webpack.common';

因此，不存在CommonJS导入和导出的语法（例如module.exports or require）涉及保持 webpack 配置文件干净并允许无缝工作流程。这实际上是使用 webpack 和 TypeScript 的推荐方法webpack 的文档 https://webpack.js.org/configuration/configuration-languages/#typescript.

为什么你的配置not work?

第一次尝试

我的问题是当我尝试改变时

const getConfig = require("../../webpack.config.base");

到 es6 导入。这甚至是 VS code 提供的建议。

module.exports确实没有默认导出（即对象module.exports没有任何名为的属性default）如您观察到的错误所述。
Using ES6默认导出（即export default) 实际上创建了一个导出named default就像其他命名的导出一样（例如bar在下面的）。这可以通过编译以下 TypeScript 片段来说明：

const helloWorld = () => {
  console.log('Hello, world!');
};
const bar = 'foo';

export default helloWorld;
export { bar };

JavaScript 使用tsc:

"use strict";
exports.__esModule = true;
var helloWorld = function () {
    console.log('Hello, world!');
};
var bar = 'foo';
exports.bar = bar;
exports["default"] = helloWorld;

第二次尝试

但我补充说export default getConfig;无论如何...以及npm run build再次。它仍然失败。

In this case, adding allowSyntheticDefaultImports (which you already have) and esModuleInterop (which you miss) to your TypeScript configuration tsconfig.json both set to true would remedy that issue ^{1 https://webpack.js.org/configuration/configuration-languages/#typescript}.

第三次尝试

在把头撞到桌子上之前我最后的尝试是改变

import getConfig from "../../webpack.config.base";

to

import * as base from "../../webpack.config.base";

删除export default getConfig; in the webpack.config.base.ts并导出const getConfig直接作为export const getConfig。但到那时还有什么意义module.exports = getConfig.

Having

export const getConfig = () => {...};

and

module.exports = getConfig;

同时，会给你base === getConfig（因为只有module.exports = getConfig;生效）。因此，调用base.getConfig gives undefined由于您定义的函数getConfig没有财产getConfig。因此， ”base.getConfig不是一个函数”。

导入语法互操作性

为什么我不能简单地替换const getConfig = require("../../webpack.config.base"); with import getConfig from "../../webpack.config.base"?

const getConfig = require("../../webpack.config.base");

is a CommonJS导入同时

import getConfig from "../../webpack.config.base";

is an ES6进口。它们不能互换使用，因为它们本质上是不同的。您应该选择与其中之一合作，但不能同时与两者合作。