Webpack:包类型抄本模块别名与esmodules

Question

我已经开发了一个npm模块与类型记录和ES-模块.

这是tsconfig.json，在其中您可以看到有一个路径别名。它驻留在/source文件夹中。

{
    "compilerOptions": {
        "moduleResolution": "Node16",
        "module": "Node16",
        "target": "ES2015",
        "lib": [
            "ES2022"
        ],
        "resolveJsonModule": true,
        "strictNullChecks": true,
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "skipDefaultLibCheck": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "./source/*"
            ],
            "@": [
                "./source"
            ],
            "@src/*": [
                "./source/*"
            ],
            "@src": [
                "./source"
            ],
            "@test/*": [
                "./test/*"
            ],
            "@test": [
                "./test"
            ]
        },
        "outDir": "./dist"
    },
    "include": [
        "source",
        "test"
    ]
}

这是webpack.config.mjs，实际上是一个esmodule。它驻留在根/中

import { fileURLToPath } from 'node:url';
import path from 'node:path';

import nodeExternals from 'webpack-node-externals';
import BundleDeclarationsWebpackPlugin from 'bundle-declarations-webpack-plugin';
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
import ResolveTypescriptPlugin from 'resolve-typescript-plugin';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default {
    target: 'node',
    mode: 'production',
    // devtool: 'source-map',
    // experiments: {
    //     outputModule: true
    // },
    entry: {
        index: './source/index.ts',
    },
    resolve: {
        fullySpecified: true,
        extensions: ['.ts', '.js'],
        plugins: [new TsconfigPathsPlugin({
            configFile: './source/tsconfig.json',
            extensions: ['.ts', '.js']
        }), new ResolveTypescriptPlugin()]
    },
    module: {
        rules: [
            {
                test: /\.ts?$/,
                include: path.resolve(__dirname, 'source'),
                use: [
                    {
                        loader: 'ts-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new BundleDeclarationsWebpackPlugin({
            entry: "./source/index.ts",
            outFile: "./index.d.ts"
        })
    ],
    externals: [nodeExternals()],
    output: {
        path: path.resolve(__dirname, './bundled'),
        filename: 'index.js',
        chunkFormat: 'module'
    }
}

问题是它不能工作，因为我有路径别名(@/xxx/yyy)：

assets by status 9.18 KiB [cached] 22 assets
./source/index.ts 433 bytes [built] [code generated]

ERROR in ./source/index.ts 1:0-363
Module not found: Error: Can't resolve '@/modules/index.js' in '/home/euber/Github/lifeware-java-mangler/source'

ERROR in ./source/index.ts 2:0-34
Module not found: Error: Can't resolve '@/errors/index.js' in '/home/euber/Github/lifeware-java-mangler/source'

ERROR in ./source/index.ts 3:0-33
Module not found: Error: Can't resolve '@/types/index.js' in '/home/euber/Github/lifeware-java-mangler/source'

3 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.73.0 compiled with 3 errors in 8500 ms

即使我使用的是TsconfigPathsPlugin，它也不起作用，当我不使用use模块时，它也能很好地工作。

该项目的来源是分支module-alias of 这里的回购。

编辑：--我认为错误与使用指定扩展.js的tsconfig-paths-webpack有关，因为这是我通过在其中添加一些console.logs创建的日志：

​

​

Answer 1

这似乎是webpack的问题所在，在最新版本5.74.0中已经解决了这个问题(请参阅这里的更多细节https://github.com/webpack/webpack/issues/13252)。若要修复，请将webpack升级到最新版本5.74.0，并将下面的内容添加到webpack配置中

  resolve: {
    extensionAlias: {
      '.js': ['.ts', '.js'],
      '.mjs': ['.mts', '.mjs']
    }
  },