热替换入口点的 Webpack-dev-server 问题答案

【问题标题】：Webpack-dev-server issue with hot replacement of entry point热替换入口点的 Webpack-dev-server 问题
【发布时间】：2019-03-09 20:06:27
【问题描述】：

我对 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"]
      }
    ]
  }
};

【问题讨论】：

标签： webpack webpack-dev-server

【解决方案1】：

所以我设法自己解决了这个问题。基本上这是两个相互冲突的步骤，它们覆盖了彼此的结果。罪魁祸首是 CopyWebpackPlugin 步骤，特别是复制资产的步骤。这以某种方式用旧版本覆盖了 dist 文件夹中的 index.js 文件。不完全确定这个旧文件是从哪里来的，但是一旦我按照下面所示的步骤确定了该步骤，问题就得到了解决。

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

【讨论】：