在 webpack 中找不到模块（开发模式）

Question

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

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

我正在使用 lit-html，它在 node_modules 目录中。

这是我的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;
};

我运行 webpack 在 development 模式下是这样的： webpack-dev-server --mode development --open 我得到了错误，但是当我运行 webpack 在 production 模式下它是有效的：webpack --mode production

Answer 1

在 ouput 部分添加 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"],
    },
};

在 webpack 中找不到模块（开发模式）

Module does not found in webpack (development mode)

typescript

webpack

lit-html