使用Webpack打包VS Code扩展时遇ENOENT文件找不到错误求助

问题重现 #

打包VS Code扩展时，Webpack报错找不到extension.ts，错误路径包含无关的rdd/ADE相关目录，而实际项目中extension.ts位于src/下：

ERROR in ../../../../../phxadenas101.oraclevcn.com/phx_wd202_db/WINDOWS.X64.rdd/240509/pack/src/extension.ts                                      
Module build failed (from ../../../../../moaadil/.ade/view_storage/moaadil_new_code9/odtvscode/src/client/oracle-vscode-extension/node_modules/ts-loader/index.js):                                                                          
Error: ENOENT: no such file or directory, open 'C:\ADE\phxadenas101.oraclevcn.com\phx_wd202_db\WINDOWS.X64.rdd\240509\pack\extension.ts'

项目目录结构：

.vscode
src
  - <other code files here>
  - extension.ts
dist
  - extension.js
package.json
webpack.config.js

当前webpack.config.js配置：

// webpack.config.js:

'use strict';

const path = require('path');
const webpack = require('webpack');

const config = {
    target: 'webworker',
    entry: './src/extension.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'extension.js',
        libraryTarget: 'commonjs2',
        devtoolModuleFilenameTemplate: '../[resource-path]'
    },
    devtool: 'source-map',
    externals: {
        vscode: 'commonjs vscode'
    },
    resolve: {
        mainFields: ['browser', 'module', 'main'],
        extensions: ['.ts', '.js'],
    },
    stats: {
        errorDetails: true,
        children: true,
        logging: 'verbose'
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'ts-loader',
                    options: {
                        compilerOptions: {
                            "module": "es6"
                        }
                    }
                }],
            }
        ]
    }
};
module.exports = config;

package.json脚本配置：

"scripts": {
    "vscode:prepublish": "webpack --mode production",
    "webpack": "webpack --mode development",
    "webpack-dev": "webpack --mode development --watch",
    "test-compile": "tsc -p ./"
},

问题原因 #

1. Webpack上下文未明确指定，导致路径解析基准错误
2. Webpack缓存了旧的路径映射
3. ADE环境（从错误路径判断）的路径虚拟化干扰了文件解析
4. ts-loader/tsconfig的路径配置异常

解决方案 #

1. 明确指定Webpack上下文 #

在webpack.config.js的config对象中添加context字段，强制Webpack以项目根目录为解析基准：

const config = {
    context: path.resolve(__dirname), // 新增这一行
    target: 'webworker',
    entry: './src/extension.ts',
    // ... 其他原有配置
};

2. 清理Webpack缓存 #

执行命令清理缓存，避免旧路径映射影响：

npx webpack --clean

或者手动删除以下目录后重新构建：

• node_modules/.cache/webpack
• dist目录

3. 检查并修正tsconfig.json配置 #

确保tsconfig.json中的路径配置正确，避免ts-loader解析路径出错：

{
  "compilerOptions": {
    "baseUrl": "./",
    "rootDir": "./src",
    "module": "ESNext",
    "target": "ES2020"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

4. 确认执行构建的工作目录 #

必须在项目根目录（包含webpack.config.js和package.json的目录）下执行构建命令：

npm run webpack

5. 处理ADE环境干扰 #

如果是在Oracle ADE工作区中：

• 退出ADE环境后重新尝试构建
• 检查VIEW_ROOT等ADE环境变量是否影响了文件路径解析

内容的提问来源于stack exchange，提问作者XXDIL