WebPack-Dev-Server问题，并热替换入口点

Question

我对WebPack有一个问题，特别是热加载功能。我正在利用WebPack-Dev-Server库为此。除了入口点外，它对所有JavaScript文件都非常出色，出于某种奇怪的原因，这并没有自动重新定位。以下是我正在使用的webpack.config.js文件。当我们目前丢失时，任何帮助都将受到赞赏。

webpack.config.js

const path = require("path");
const webpack = require("webpack");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  entry: ["./src/hello.js", "./src/scss/custom.scss"],
  mode: "development",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  devServer: {
    contentBase: "./dist",
    watchContentBase: true
  },
  devtool: 'inline-source-map',
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      hash: true,
      title: 'My Awesome application',
      header: 'Hello World',
      template: './src/index.html',
      filename: './index.html' //relative to root of the application
  }),
  new CopyWebpackPlugin([
    { context: './src/scripts/', from: '**/*.html', to: './' },
	{ context: './src/', from: 'assets/*', to: './' },
  ]),
       new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    rules: [
      {
        test: /.(scss)$/,
        use: [
          {
            // Adds CSS to the DOM by injecting a `<style>` tag
            loader: 'style-loader'
          },
          {
            // Interprets `@import` and `url()` like `import/require()` and will resolve them
            loader: 'css-loader'
          },
          {
            // Loader for webpack to process CSS with PostCSS
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [
                  require('autoprefixer')
                ];
              }
            }
          },
          {
            // Loads a SASS/SCSS file and compiles it to CSS
            loader: 'sass-loader'
          }
        ]
      },    
      {
        test: /.(png|svg|jpg|gif)$/,
        use: ["file-loader"]
      }
    ]
  }
};

Answer 1

，所以我自己解决了问题。基本上，这是两个相互矛盾的步骤，这些步骤正在覆盖彼此的结果。罪魁祸首是Copywebpackplugin步骤，特别是复制资产的步骤。这是在以某种方式使用旧版本的DIST文件夹中的index.js文件覆盖。不完全确定该旧文件的来源，但是一旦我符合下面指出的步骤，该问题已解决。

    new CopyWebpackPlugin([
   { context: "./src/scripts/", from: "**/*.html", to: "./" },
   { from: "./src/assets", to: "assets" }
]),