Webpack4-HMR _ Реагировать - сборка моего приложения, но возвращает пустую страницу

Question

Когда я использую веб-пакет с ReactJS, мое приложение не может отображать мой контент ReactJS.Я не могу понять, что не так, так как у меня хорошо сконфигурирована моя HMR, на сервере и клиенте тоже есть возможность принять module.hot.

Также я попытался переместить dist в другую папку dist2, чтобы выполнить некоторые манипуляции, чтобы оценить, возникла ли проблема из моего index.html.Кажется, что мой HMR автоматически загружает мой index.html в память, опровергая предположение о папке, кроме того, я заметил некоторый текст в моем html-хосте и текст html появляется на странице.Не удается поместить только содержимое ReactJS на страницу.

Также я попытался поиграть с переменной publicPath , похоже, ничего лучше.

Я задавался вопросом, была ли проблема в истории URL , но я просто подал свое приложение по корневому пути "/", чтобы история не была проблемой AFAIK.Так что это.Мне интересно, где устранение неполадок актуально.

Вот журналы, которые возвращает мне консоль:

Соединение с http://localhost:5000/__webpack_hmr было прервано во время загрузки страницы.

0.main.js: 34: 94258 [Показать / скрыть подробности сообщения.] ReferenceError: производство не определено [Узнать больше]

0.main.js: 1: 56474 [HMR] подключено 0.main.js: 34: 94346 [Показать / скрыть группу.] В пакете [HMR] есть 3 предупреждения 0.main.js: 34: 96190 размер актива

предел: следующий актив (ы)превышает рекомендуемый предел размера (244 КБ).

Здесь мой webpack.config.js:

const path = require("path");
const webpack = require("webpack")
// html template 

const HtmlWebpackPlugin= require("html-webpack-plugin"); 
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: path.resolve(__dirname, "..", "src", "index.html"), 
    filename:"index.html", 
  inject: true,
  minify: {
    collapseWhitespace: true
}
})

// minify text files 

const TerserPlugin = require('terser-webpack-plugin');


// hot middleware settings 

const HMR_Entry = "webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000"

// bundle weight map

// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// set NODE_ENV to production

const NODE_ENV_SETTING = new webpack.DefinePlugin({
  'process.env.NODE_ENV': "production"
})



//  ____   ____      
// |___     ___|
//    |  |  |
//    |  |  |
//  __|  |  |__
// |____   ____|     


// CONFIG 

module.exports= { 

  // mount_points
  context: path.resolve(__dirname, ".."),
  entry:[HMR_Entry, "./src"],
  output:{  
        path: path.resolve(__dirname, "..", "./dist"), 
        filename:"main.js"
  }, 

  // environment
  mode: "production", 
  target: "web",
  // watch: true,
  watchOptions: { 
    aggregateTimeout: 500,    
  },
  devtool: false,

  // modules process
    module: { 
        rules: [ 

      // script 

      {
        test: /\.js$/,
        exclude: path.resolve(__dirname, "node_modules"),
        use: {
          loader: "babel-loader"
        } 
      },

      // styles 

            {
        test: /\.css$/,
        exclude: path.resolve(__dirname, "node_modules"),
                use:["style-loader","css-loader"]
      },

      // images
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        exclude: path.resolve(__dirname, "node_modules"),
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              // optipng.enabled: false will disable optipng
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: '90-100'
              },
              gifsicle: {
                interlaced: false,
              },
              // the webp option will enable WEBP
              webp: {
                quality: 75
              }
            }
          },
        ],
      }
        ]
  },

  // additional process  
  plugins: [
    HtmlWebpackPluginConfig,  
    // BundleAnalyzerPlugin,
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),  
    NODE_ENV_SETTING
  ],

  optimization:{ 
    runtimeChunk:{ 
      name:"runtime"
    },

      minimizer: [new TerserPlugin()]

  }

}

Здесь мой server.js:

const express = require("express");
const app = express();
const compression = require('compression')
const port = 5000

// set webpackCompiler with client config 
const webpack = require('webpack');
const webpackConfig = require('./config/webpack.client');
const webpackCompiler = webpack(webpackConfig);

// compose devMiddleware with webpackCompiler
const webpackDevMiddleware = require("webpack-dev-middleware")(webpackCompiler, {
    noInfo: true, 
    // hot: true,
    filename: "main.js", 
    stats: {
      colors: true
    },
    historyApiFallback: true
    // publicPath: webpackConfig.output.publicPath
})

// compose hotMiddleware with webpackCompiler
const webpackHotMiddleware = require("webpack-hot-middleware")(webpackCompiler, { 
    log: console.log,
    path: "/__webpack_hmr",
    heartbeat: 10 * 1000
})

// set HMR middleware 
app.use(webpackDevMiddleware);
app.use(webpackHotMiddleware)

// Run static server
app.use(compression())
app.use(express.static("./dist"));
app.listen(port, () =>  { 
    console.log(`listen on ${port}`)
});

Здесь моя реакция index.js:

    import React from "react"
    import ReactDOM from "react-dom"
    import Editor from "./Editor"


    if (module.hot){module.hot.accept()} ;

    ReactDOM.render(
        <Editor/>,
        document.getElementById("root")
    )

Вот дерево моей папки:

.
├── config
│   ├── webpack.client.js
│   ├── webpack.config.js
│   └── webpack.server.js
├── dist
│   ├── 1.main.js
│   ├── index.html
│   └── main.js
├── dist2
│   ├── 1.main.js
│   ├── index.html
│   └── main.js
├── http.js
├── package.json
├── server
│   └── http.js
├── src
│   ├── Editor.css
│   ├── Editor.js
│   ├── index.css
│   ├── index.html
│   └── index.js
├── yarn-error.log
└── yarn.lock