带有 Webpack 的 VanillaJs，构建后无法在 index.html 中加载 bundle.js答案

【问题标题】：VanillaJs with Webpack, can't load bundle.js in index.html after build带有 Webpack 的 VanillaJs，构建后无法在 index.html 中加载 bundle.js
【发布时间】：2020-06-10 14:19:28
【问题描述】：

在 webpac-dev-server 上运行，我的应用运行良好。

但是使用 web pack 构建后，从 public 文件夹中运行 index.html 并无法获取 Bundle.js。有了这个错误，

意外的令牌'

我的 webpack 配置文件是

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    publicPath: '/',
    path: path.join(__dirname, 'public'),
  },
  devServer: {
    port: 3001,
    hot: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.m?js$/,
        include: path.join(__dirname),
        exclude: /(node_modules)|(public)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
    }),
  ],
};

这是我的文件夹树结构

构建后，公用文件夹中的 index.html 无法正常工作（无法加载 bundle.js）

但是 webpack-dev-server 运行良好。

【问题讨论】：

你能和我们分享你的 index.html 吗？
@ismetguzelgun 确定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Word Game</title> </head> <body> <div id="root"> </div> <script src="bundle.js"></script></body> </html> 这里非常简单（构建后）

标签： javascript webpack webpack-dev-server

【解决方案1】：

你应该在 bundle.js <script src="/bundle.js"></script> 之前使用 / 你的输出看起来不错。除此之外，我发现您可能想尝试另一种解决方案。

> added <base href="/" /> into the <head> of my index.html

github

【讨论】：

好的，我已经尝试了所有方法。例如）bundle.js、/bundle.js、./bundle.js。但不工作，它是 webpack 构建的输出
已编辑答案。看看吧。