Webpack fungerar inte med Typescript-alias

Jag har detta webpack.config.js:

{
    target: 'node',
    mode: 'production',
    // devtool: 'source-map',
    entry: {
        index: './source/lib/index.ts',
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                include: path.resolve(__dirname, 'source'),
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            compiler: 'ttypescript'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new BundleDeclarationsWebpackPlugin({
            entry: "./source/lib/index.ts",
            outFile: "./index.d.ts"
        })
    ],
    externals: [nodeExternals()],
    output: {
        path: path.resolve(__dirname, 'bundled', 'lib'),
        filename: 'index.js',
        library: 'mongo-cleaner',
        libraryTarget: 'umd',
        globalObject: 'this',
        umdNamedDefine: true,
    }
}

Där kan du se att jag packar ett bibliotek med webpack och håller node_modules som externa.

Och denna tsconfig.json:

{
    "compilerOptions": {
        "moduleResolution": "node",
        "module": "commonjs",
        "target": "ES5",
        "strictNullChecks": true,
        "lib": [
            "ES2021"
        ],
        "outDir": "../dist",
        "sourceMap": true,
        "declaration": true,
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "./lib/*"
            ],
            "@lib/*": [
                "./lib/*"
            ],
            "@bin/*": [
                "./bin/*"
            ]
        }
    },
    "plugins": [
        {
            "transform": "typescript-transform-paths"
        },
        {
            "transform": "typescript-transform-paths",
            "afterDeclarations": true
        }
    ],
    "include": [
        "lib",
        "bin"
    ]
}

När jag gör tsc -p source fungerar allt, även om jag har "@" sökvägar i mina require

Men när jag gör samma sak med webpack får jag dessa fel:

ERROR in ./source/lib/index.ts 50:16-42
Module not found: Error: Can't resolve '@/utils/cleaner' in '/home/euber/Github/mongo-cleaner/source/lib'

ERROR in ./source/lib/index.ts 51:19-48
Module not found: Error: Can't resolve '@/utils/askConfirm' in '/home/euber/Github/mongo-cleaner/source/lib'

ERROR in ./source/lib/index.ts 52:16-42
Module not found: Error: Can't resolve '@/utils/options' in '/home/euber/Github/mongo-cleaner/source/lib'

ERROR in ./source/lib/index.ts 53:13-45
Module not found: Error: Can't resolve '@/interfaces/exported' in '/home/euber/Github/mongo-cleaner/source/lib'

ERROR in ./source/lib/index.ts 54:13-32
Module not found: Error: Can't resolve '@/errors' in '/home/euber/Github/mongo-cleaner/source/lib'

Hur är det möjligt att webpack ignorerar @?

För att få mer information och kunna reproducera det, titta bara på detta repo

UPPDATERING:

Jag har också försökt med detta svar, men det fungerar inte:

webpack.config.js

alias: {
            '@': path.resolve(__dirname, 'lib'),
            '@lib': path.resolve(__dirname, 'lib'),
            '@bin': path.resolve(__dirname, 'bin')
        }

Fel :

ERROR in ./source/lib/index.ts 50:16-42
Module not found: Error: Can't resolve '@/utils/cleaner' in '/home/euber/Github/mongo-cleaner/source/lib'

ERROR in ./source/lib/index.ts 51:19-48
Module not found: Error: Can't resolve '@/utils/askConfirm' in '/home/euber/Github/mongo-cleaner/source/lib'

ERROR in ./source/lib/index.ts 52:16-42
Module not found: Error: Can't resolve '@/utils/options' in '/home/euber/Github/mongo-cleaner/source/lib'

ERROR in ./source/lib/index.ts 53:13-45
Module not found: Error: Can't resolve '@/interfaces/exported' in '/home/euber/Github/mongo-cleaner/source/lib'

ERROR in ./source/lib/index.ts 54:13-32
Module not found: Error: Can't resolve '@/errors' in '/home/euber/Github/mongo-cleaner/source/lib'

Svar #1

Du har specificerat sökvägsalias för TypeScript-kompilatorn men du behöver också specificera alias för webpack eftersom webpack löser moduler på sitt eget sätt.

Så du behöver uppdatera webpack-konfigurationen på ett sätt som i följande exempel:

{
...
  resolve: {
    extensions: ['.ts', '.js'],
    alias: {
      '@': path.resolve(__dirname, 'source/lib'),
      '@lib': path.resolve(__dirname, 'source/lib'),
      '@bin': path.resolve(__dirname, 'source/bin')
    }
  }
...
}

Svar #2

@Mikhail Serenitis svar skulle fungera, men ett modul gör att detta kan hanteras automatiskt.

Jag la till det här:

plugins: [new TsconfigPathsPlugin({
  configFile: './source/tsconfig.json',
  extensions: ['.ts', '.js']
})]

Och det fungerade.

Den fullständiga koden:

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const BundleDeclarationsWebpackPlugin = require('bundle-declarations-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');


const libConfig = {
    target: 'node',
    mode: 'production',
    // devtool: 'source-map',
    entry: {
        index: './source/lib/index.ts',
    },
    resolve: {
        extensions: ['.ts', '.js'],
        plugins: [new TsconfigPathsPlugin({
            configFile: './source/tsconfig.json',
            extensions: ['.ts', '.js']
        })]
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                include: path.resolve(__dirname, 'source'),
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            compiler: 'ttypescript'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new BundleDeclarationsWebpackPlugin({
            entry: "./source/lib/index.ts",
            outFile: "./index.d.ts"
        })
    ],
    externals: [nodeExternals()],
    output: {
        path: path.resolve(__dirname, 'bundled', 'lib'),
        filename: 'index.js',
        library: 'mongo-cleaner',
        libraryTarget: 'umd',
        globalObject: 'this',
        umdNamedDefine: true,
    }
};

const binConfig = {
    target: 'node',
    mode: 'production',
    // devtool: 'source-map',
    entry: {
        index: './source/bin/index.ts',
    },
    resolve: {
        extensions: ['.ts', '.js'],
        plugins: [new TsconfigPathsPlugin({
            configFile: './source/tsconfig.json',
            extensions: ['.ts', '.js']
        })]
    },
    plugins: [
        new webpack.BannerPlugin({ banner: '#!/usr/bin/env node', raw: true })
    ],
    module: {
        rules: [
            {
                test: /\.ts?$/,
                include: path.resolve(__dirname, 'source'),
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            compiler: 'ttypescript'
                        }
                    },
                    {
                        loader: 'shebang-loader'
                    }
                ]
            }
        ]
    },
    externals: [{
        '../lib/index': {
            amd: '../lib/index',
            root: 'mongo-cleaner',
            commonjs: '../lib/index',
            commonjs2: '../lib/index'
        },
    }, nodeExternals()],
    output: {
        path: path.resolve(__dirname, 'bundled', 'bin'),
        filename: 'index.js',
        library: 'mongo-cleaner',
        libraryTarget: 'umd',
        globalObject: 'this',
        umdNamedDefine: true,
    }
};

module.exports = [
    libConfig,
    binConfig
];

REDIGERA:

Jag hittade också ett annat fel. Jag använde ttypescript för ett liknande syfte, men nyckelordet "plugins" borde ha varit inne i kompilatoralternativen.

Så, även utan TsconfigPathsPlugin-grejen, genom att ändra tsconfig.json på detta sätt löstes problemet:

{
    "compilerOptions": {
        "moduleResolution": "node",
        "module": "commonjs",
        "target": "ES5",
        "strictNullChecks": true,
        "lib": [
            "ES2021"
        ],
        "outDir": "../dist",
        "sourceMap": true,
        "declaration": true,
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "./lib/*"
            ],
            "@lib/*": [
                "./lib/*"
            ],
            "@bin/*": [
                "./bin/*"
            ]
        },
        "plugins": [
            {
                "transform": "typescript-transform-paths"
            },
            {
                "transform": "typescript-transform-paths",
                "afterDeclarations": true
            }
        ],
    },
    "include": [
        "lib",
        "bin"
    ]
}