找不到 Webpack 模块：错误：无法解析“./src”

问：

我正在尝试使用打字稿设置webpack构建管道。我想根据文档设置单独的开发和生产版本：https://webpack.js.org/guides/production/#setup

我的项目中还没有太多代码，只是一个简单的 index.ts 文件，它拉入了一个 css 文件、一个 png 文件和一个从 print.ts 文件导入的 printMe 函数。（示例摘自 webpack 文档）

当我尝试在开发或生产环境中构建时，出现以下错误：

ERROR in main
Module not found: Error: Can't resolve './src' in 'C:\Code\Treads'
resolve './src' in 'C:\Code\Treads'
  using description file: C:\Code\Treads\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\Code\Treads\package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\Code\Treads\src is not a file
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\Code\Treads\src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        C:\Code\Treads\src.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        C:\Code\Treads\src.wasm doesn't exist
      as directory
        existing directory C:\Code\Treads\src
          using description file: C:\Code\Treads\package.json (relative path: ./src)
            using path: C:\Code\Treads\src\index
              using description file: C:\Code\Treads\package.json (relative path: ./src/index)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Code\Treads\src\index doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Code\Treads\src\index.js doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Code\Treads\src\index.json doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Code\Treads\src\index.wasm doesn't exist

不确定我是否在这里遗漏了什么，或者配置是否关闭。这是我第一次尝试使用 webpack 进行网站构建，所以我可能会错过一些简单的东西。

项目结构如下：

├───dist
├───node_modules
└───src
    ├───assets
    ├───css
    ├───game
    └───types
        └─── png.d.ts
    free.png
    index.ts
    print.ts
    style.css
package-lock.json
package.json
README.md
tsconfig.json
webpack.common.js
webpack.dev.js
webpack.prod.js

package.json

{
  "name": "treads",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  "author": "Anonymous",
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^6.8.1",
    "css-minimizer-webpack-plugin": "^5.0.1",
    "html-webpack-plugin": "^5.5.3",
    "mini-css-extract-plugin": "^2.7.6",
    "style-loader": "^3.3.3",
    "ts-loader": "^9.5.0",
    "typescript": "^5.2.2",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1",
    "webpack-merge": "^5.10.0"
  },
  "dependencies": {
    "@types/bootstrap": "^5.2.8",
    "@types/d3": "^7.4.2",
    "bootstrap": "^5.3.2",
    "d3": "^7.8.5"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es6",
    "moduleResolution": "node",
    "typeRoots": ["./node_modules/@types", "./src/types"],
    "allowJs": true,
    "sourceMap": true,
    "outDir": "./dist/",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "skipLibCheck": true
  }
}

webpack.common.js

module.exports = (env) => {
    console.log(`Environment: ${env}`)

    return {
        entry: './src/index.ts',
        optimization: {
            moduleIds: 'deterministic',
            runtimeChunk: 'single',
            splitChunks: {
                chunks: 'all',
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name: 'vendors',
                        chunks: 'all',
                    },
                },
            },
        },
        module: {
            rules: [
                {
                    test: /\.(png|svg|jpg|jpeg|gif)$/i,
                    type: 'asset/resource',
                },
                {
                    test: /\.tsx?$/,
                    use: 'ts-loader',
                    exclude: /node_modules/,
                },
            ],
        },
        resolve: {
            extensions: ['.js', '.jsx', '.ts', '.tsx', '...'],
        },
    }
};

webpack.dev.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = (env) => {
    console.log(env)

    const dev = {
        mode: 'development',
        devtool: 'inline-source-map',
        devServer: {
            static: './dist',
        },
        plugins: [
            new HtmlWebpackPlugin({
                title: 'Development',
            }),
        ],
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'dist'),
            clean: true
        },
        module: {
            rules: [
                {
                    test: /\.css$/i,
                    use: ['style-loader', 'css-loader'],
                },
            ],
        },
    }
    return merge(common, dev)
};

webpack.prod.js

const path = require('path');
const common = require('./webpack.common.js');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

const { merge } = require('webpack-merge');

module.exports = (env) => {
    console.log(env)

    const prod = {
        mode: 'production',
        devtool: 'source-map',
        plugins: [
            new HtmlWebpackPlugin({
                title: 'Production',
            }),
            new MiniCssExtractPlugin({
                filename: "[name].css",
                chunkFilename: "[id].css",
            }),
        ],
        output: {
            filename: '[name].[contenthash].bundle.js',
            path: path.resolve(__dirname, 'dist'),
            clean: true
        },
        optimization: {
            minimizer: [
                new CssMinimizerPlugin(),
            ],
        },
        module: {
            rules: [
                {
                    test: /\.css$/i,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {},
                        },
                        "css-loader",
                    ],
                }
            ],
        },
    }
    return merge(common, prod)
};

样式.css

.hello {
    color: red;
    background: url('./free.png');
}

index.ts

import * as d3 from 'd3';
import './src/style.css';
import Icon from './src/free.png';
import printMe from './print';

function component() {
    const element = document.createElement('div');
    const btn = document.createElement('button');
 
    element.innerHTML = 'Hello World';
    element.classList.add('hello')

    const myIcon = new Image();
    myIcon.src = Icon;

    element.appendChild(myIcon);

    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;

    element.appendChild(btn);
 
    return element;
  }
 
  document.body.appendChild(component());

print.ts

export default function printMe(): void {
  console.log('I get called from print.js!');
}

我尝试了几种不同的方法来尝试解决问题，所有这些都导致 m 出现与上述相同的错误：

1. 确保解析 *.js、*.jsx、*.ts、*.tsx 文件，并通过“...”包含默认值
2. 确保入口点 （index.ts） 具有准确的相对路径 （./src/index.ts）
3. 将 Node JS 和 npm 更新到最新版本
4. 将 package.json 中的“browser”属性映射到指向 ./src 到 ./dist
5. 在尝试构建之前将 .ts 文件编译为 .js 文件