Webpack无法在浏览器加载index.html，仅显示目录列表，结构是否有误？

Hey there! Let's figure out why your browser's showing a directory list instead of loading index.html when working with your Webpack project. Here are the key checks and fixes to try out:

Webpack Dev Server might not be set to serve index.html as the default entry point. Open your webpack.config.js and confirm the devServer section is set up correctly:

module.exports = {
  // ... other existing config
  devServer: {
    static: './dist', // Make sure this matches your output.path value
    historyApiFallback: true, // Ensures index.html is served for all routes (critical for SPAs)
    open: true, // Optional: auto-opens the browser when the server starts
  },
};

Also double-check your output configuration points to the right folder:

const path = require('path');

module.exports = {
  // ...
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true, // Cleans old files from dist on each build
  },
};

If you're not using this plugin, Webpack won't automatically generate or inject your bundled assets into index.html. Make sure it's installed (npm install html-webpack-plugin --save-dev) and configured properly:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // Path to your source HTML file
      filename: 'index.html', // Name of the generated file in dist
    }),
  ],
};

Without this, you'll need to manually copy your index.html into the dist folder—and even then, relative paths to bundled assets might break.

Check your package.json to ensure you're using the right command to launch the dev server:

"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production"
}

Avoid opening index.html directly in the browser (without the dev server)—this often causes path issues with bundled assets. Always use npm start (or your equivalent script) to run the server.

Run npm run build and check if the dist folder contains both your index.html and bundled JavaScript files. If index.html is missing, your HtmlWebpackPlugin is either misconfigured or not installed at all.

While Webpack Dev Server disables directory listing by default, if you're using a different server (like Apache or Nginx) to host your built files, make sure directory listing is disabled and index.html is set as the default document.

Give these steps a go—chances are it's a config issue with the dev server, HtmlWebpackPlugin, or how you're launching the server. If you run into specific errors with any of these steps, feel free to share more details!

内容的提问来源于stack exchange，提问作者Ioana Chichernea