Webpack 未在浏览器中显示 index.html

Question

我正在使用 webpack 来观察代码中的更改。代码编译成功，但是我去浏览器看不到任何东西。

package.json

   "dev:server": "webpack server --hot",
   "prod:build": "webpack"

项目结构

- webpack.config.js
- package.json
- src/
  - index.hbs
  - sass/
  - js/

webpack.config.json

module.exports = {
entry: {
  "main-page": "./src/js/index.js",
},
  output: {
    filename: "bundle.[name].[contenthash].js",
    path: path.resolve(__dirname, "./dist"),
    publicPath: "dist/",
  },
  mode: "production",
  module: ,
    optimization:,
      plugins: [
        new CleanWebpackPlugin({
          cleanOnceBeforeBuildPatterns: ["**/*"],
        }),
        new HTMLWebpackPlugin({
          chunks: ["main-page"],
          template: "src/index.hbs",
        }),
      ],
    };

Answer 1

刚刚在 webpack.config.js 中添加了以下内容并且有效。

mode: "development", //change in production
devServer: {
  // remove in production
  contentBase: path.resolve(__dirname, "./dist"),
  index: "index.html",
},

Webpack 未在浏览器中显示 index.html

Webpack not showing index.html in browser

webpack

webpack-dev-server