Webpack 开发服务器找不到 index.html答案

【问题标题】：Webpack dev server not finding index.htmlWebpack 开发服务器找不到 index.html
【发布时间】：2022-01-06 15:49:42
【问题描述】：

我有以下 webpack 配置：

webpack.common.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  watchOptions: {
    ignored: [
      path.resolve(__dirname, '.git'),
      path.resolve(__dirname, 'node_modules'),
    ]
  },
  module: {
    rules: [],
  },
  resolve: {
    extensions: ['.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
    publicPath: "/dist/",
  },
};

webpack.dev.js:

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

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    open: true,
    compress: false,
    port: 9000,
    http2: false,
    https: false,
    liveReload: true,
    watchFiles: ['src/**/*'],
    client: {
      overlay: false,
    },
    static: {
      directory: __dirname,
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html',
    })
  ]
});

我的文件夹结构：

webpack.common.js
webpack.dev.js
src/
├─ index.html
├─ index.js

工具版本：

"html-webpack-plugin": "^5.5.0"
"webpack": "^5.52.0"
"webpack-dev-server": "^4.1.0"
"webpack-merge": "^5.8.0"

问题：在根文件夹中运行 webpack-dev-server --config webpack.dev.js 时，我在访问 localhost:9000/index.html 时遇到 index.html 的 404 错误。 index.html不应该在内存中创建吗？

我在启动服务器时确实在日志中得到了这个：

asset bundle.js 901 KiB [emitted] (name: main)
asset index.html 5 KiB [emitted]

如何不出现 404 错误并访问内存中的 index.html？我错过了什么吗？

【问题讨论】：

标签： javascript webpack webpack-dev-server html-webpack-plugin

【解决方案1】：

也许这个 webpack 配置解决了你的问题，index.html 可能在文件夹“public”中而不是在“src”中，并在 index.html 上设置启用注入

试试这个配置：

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

module.exports ={
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  resolve: {
    extensions: ['.js','.jsx']
  },
  module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use:{
                loader: 'babel-loader'
            }
        },
        {
            test: /\.html$/,
            use:{
                loader: 'html-loader'
            }
        },
        {
            test: /\.(css|scss)$/,
            use:[
                "style-loader",
                "css-loader",
                "sass-loader"
            ]
        },
        {
            test: /\.svg$/,
            use:{
                loader: "svg-url-loader"
            }
        },
        {
            test: /\.png$/,
            use: [
                "file-loader",
                {
                    loader: "image-webpack-loader"
                }
            ]
        }
      ]
   },
  plugins: [
    new HtmlWebpackPlugin({
        template: "./public/index.html",
        inject:true,
        filename: 'index.html'
    }),
    new MiniCssExtractPlugin(),
  ],
  devServer:{ 
    static: {
        publicPath: path.join(__dirname, 'dist')
    },
    open:true,
    compress: true,
    port: 3000
    }
}

【讨论】：

【解决方案2】：

我的问题是webpack.common.js 中的这一行：

publicPath: "/dist/"

通过删除它，它起作用了。

【讨论】：