Typescript 在网页包中找不到模块（开发模式）

加载网页时，我的web浏览器控制台出现以下错误：

Uncaught TypeError: Failed to resolve module specifier "lit-html". Relative references must start with either "/", "./", or "../".

我正在使用

lit html

，它位于

node\u模块

目录中

这里是我的

tsconfig.json

{
  "compilerOptions": {
    "outDir": "static/js",
    "sourceMap": true,
    "strict": true,
    "target": "es2017",
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowJs": true,
    "moduleResolution": "node"
  },
  "compileOnSave": true,
  "include": ["src"]
}

这里是我的

webpack.config.js

const path = require("path");
// const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

var config = {
    entry: {
        main: path.join(__dirname, "src/index.ts"),
    },
    output: {
        filename: "index.js",
        path: path.join(__dirname, "static/js"),
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                exclude: /node_modules/,
                options: {
                    configFile: path.resolve(__dirname, "tsconfig.json"),
                },
            },
        ],
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
        // modules: [path.resolve(__dirname, "src"), path.resolve(__dirname, "node_modules"), "node_modules"],
        // plugins: [
        //  new TsconfigPathsPlugin({
        //      configFile: path.join(__dirname, "tsconfig.json"),
        //  }),
        // ],
    },
};

module.exports = (env, argv) => {
    if (argv.mode === "development") {
        // config.devtool = "source-map";
        config.devtool = "inline-source-map";
        config.devServer = {
            contentBase: path.join(__dirname, "static"),
            compress: true,
            headers: { "Access-Control-Allow-Origin": "*" },
            port: 9000,
            overlay: true,
        };
    }

    if (argv.mode === "production") {
        //...
    }

    return config;
};

我在

development

模式下运行webpack，如下所示：

webpack dev server——模式开发——打开

---

我得到了错误，但当我在

production

模式下运行webpack时，它是有效的：

webpack--mode production

它可以在

output

部分添加

publicPath:“/js/”，

：

const path = require("path");
// const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

var config = {
    entry: {
        main: path.join(__dirname, "src/index.ts"),
    },
    output: {
        filename: "index.js",
        path: path.join(__dirname, "static/js"),
        publicPath: "/js/",
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                exclude: /node_modules/,
                options: {
                    configFile: path.resolve(__dirname, "tsconfig.json"),
                },
            },
        ],
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
};