Webpack 开发服务器 - 不显示 index.html

Question

当我转到 localhost:5000 时，我的 index.html 文件未加载。有没有办法让 Webpack Dev Server 获取我的 root index.html？最好的方法是什么。

文件夹结构：

├── dist
│   └── main.js
├── src
│   └── app
│       └── app.js
├── index.html
├── package-lock.json
├── package.json
└── webpack.config.js

webpack.dev.js:

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/app/app.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname + 'dist'),
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    port: 5000,
    open: true,
  },
};

Answer 1

最终使用 HtmlWebpackPlugin and following the Webpack HTML documentation 进行设置。所以现在我的文件结构和 webpack.dev.js 文件如下所示。我将 index.html 移到了 src 文件夹中。 HTMLWebpackplugin 将自动生成所有 <script> 包含在 index.html 文件中，并会在 dist 文件夹中创建一个 index.html 文件。

文件夹结构：

├── dist
│   └── // main.js and index.html will automatically be generated here
├── src
│   ├── app
│   │   └── app.js
│   └── index.html // index now in src folder
├── package-lock.json
├── package.json
└── webpack.config.js

webpack.dev.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // Add this

module.exports = {
  mode: 'development',
  entry: './src/app/app.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname + 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    port: 5000,
    open: true,
  },
};

Webpack 开发服务器 - 不显示 index.html

Webpack Dev Server - Not displaying index.html

webpack

webpack-dev-server