Javascript 网站的网页制作版本指向错误的目录

我有两个npm命令

“build”：“webpack--mode production”

和

“start”：“webpack dev server--mode development--open”

。当我运行

start

命令时，web应用程序会按照预期运行，所有CSS和javascript都被正确传输。 但是，当我运行

build

时，会按预期生成FIL，当打开主HTML文件时，href和src不会指向正确的目录

我看了一下我的webpack.config.js，它似乎在按预期工作，这让我有些挠头。更改HTML模板会导致开发版本中断，并使生产版本按预期工作。目的是使开发和生产版本都能按预期工作

以下是我的目录结构供参考：

root
  |-.vscode
  |-dist
  |  |-css
  |  |-img
  |  |-js
  |    |- output location for bundle.js index.html main.css
  |-node.modules
  |-src
     |-css
     |  |-scss
     |-js
     |  |-JSON
     |  |-models
     |  |-view
     |  |-app.js
     |-index.html
     |-.babelrc
     |-package-lock.json
     |-package.json
     |-webpack.config.js

网页包配置文件

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const babelLoader = require("babel-loader");

module.exports = {
    entry: [
        "babel-polyfill","./src/js/app.js"
    ],
    output: {
        path: path.resolve(__dirname, "dist/js"),
        filename: "bundle.js",
    },
    devServer: {
        contentBase: "./dist"
    },
    plugins: [
        new MiniCssExtractPlugin(),
        new HtmlWebpackPlugin({
            filename:"index.html",
            template:"./src/index.html"
        })
    ],
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                }
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader
                },
                {
                    loader: "css-loader",
                    options: {
                        sourceMap: true,
                        modules: true,
                        localIdentName: "[local]"
                    }
                },
                    "sass-loader"
                ]
            }

        ]
    }
}

和package.json

{
  "name": "tempName",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },
  "author": "Fake Name",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/preset-env": "^7.7.1",
    "babel-loader": "^8.0.6",
    "chart.js": "^2.9.3",
    "css-loader": "^2.1.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "gulp-babel": "^8.0.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^7.3.1",
    "sortablejs": "^1.10.1",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "babel-polyfill": "^6.26.0",
    "pokedex-promise-v2": "^3.2.0"
  }
}

如何在HTML文档中指定href（s）和src（s）以链接到CSS和javascript，因为它们是在构建脚本期间添加的，不在HTML模板中

试试这些东西：
1） 不要将contentBase设置为dev服务器，而是尝试设置

'publicPath:'/'

2） 将

'output.publicPath'

设置为

'/'

也设置为
3） 如果前面的方法不起作用，

htmlweppackplugin

有

base

选项为加载的脚本添加前缀。但我强烈建议使用公共路径来处理它

---

PS：修复您的产品版本，并且仅当修复webpack dev服务器时。这将更容易

完成工作，但我认为我仍然误解了WebPack如何打包我的网站数据。我有在开发中显示的图像，但可以在生产中找到<代码>。/img/item/002.png。浏览器似乎仍然认为我想从驱动器的根目录而不是相对目录中提取图像。