Question

当我将Webpack与ReactJS一起使用时，我的应用程序无法显示我的ReactJS内容。我无法弄清楚出什么问题了，因为我已经在服务器和客户端上很好地配置了我的HMR，也对模块进行了热接受。

我也尝试将dist移到另一个文件夹dist2上进行一些操作，以了解问题是否出自我的index.html。似乎我的HMR自动将我的index.html加载到内存中，声明了文件夹的假名，此外，我注意到html主机中有一些文本，并且html文本显示在页面上。只有ReactJS内容无法在页面上推送。

我也尝试使用publicPath变量，似乎没有什么更好的。

我想知道问题是否出在URL history上，但是我只是在“ /”根路径上提供我的应用程序，因此历史记录不会成为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   KiB）。

这是我的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

Webpack4-HMR _ React-我的应用程序构建，但返回空白页

0 个答案: