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

问题描述

加载网页时，在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,//  }),// ],};

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 --mode development --open 我得到了错误，但是当我以production模式运行webpack时，它是可行的：webpack --mode production

解决方法

它可以在publicPath: "/js/",部分中添加ouput：

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"],};