带有 React Hot Loader 的 Webpack 开发服务器

Posted 2023-02-21

【中文标题】带有 React Hot Loader 的 Webpack 开发服务器

【英文标题】：Webpack Dev Server with React Hot Loader

【发布时间】：2017-01-06 15:22:16

【问题描述】：

我有一个本身就可以完美运行的 webpack 配置。我正在尝试按照建议将 React Hot Loader 与 HMR 一起安装，这需要 webpack-dev-server。在这里我无法让它工作。我找不到我的捆绑包所在的位置。我希望它位于localhost:3000。

我的webpack.config.js：

var webpack = require('webpack');
var path = require('path');

module.exports = 
  watch: true,

  devtool: 'eval',

  // entry: './src/main.js', This runs just for webpack bundling

  entry:[
    'webpack-dev-server/client?http:localhost:9000', // WebpackDevServer host and port
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
    './src/main.js' // Your appʼs entry point
  ],

  output: 
    path: path.resolve(__dirname, 'public', 'dist'),
    filename: 'main.js'/*,
    publicPath: '/dist/'*/
  ,

  module: 
    loaders: [
      test: /\.js$/,
      loaders: ['react-hot', 'babel-loader?cacheDirectory=true,presets[]=react,presets[]=es2015'],
      exclude: function(path) 
        var isModule = path.indexOf('node_modules') > -1;
        var isJsaudio = path.indexOf('jsaudio') > -1;

        if (isModule && !isJsaudio) 
          return true;
        
      
    , 
      test: /\.json$/,
      loader: "json-loader"
    ]
  ,

  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],

  resolve: 
    extensions: ['', '.js', '.json', 'index.js'],
    root: [
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'node_modules'),
      path.resolve(__dirname, 'node_modules', 'jsaudio', 'src')
    ]
  ,

  target: 'web',

  node: 
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  
;

还有webpack-server.js：

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), 
    publicPath: '/dist/',
  hot: true,
  historyApiFallback: true
).listen(9000, 'localhost', function (err, result) 
  if (err) 
    return console.log(err);
  

  console.log('Listening at http://localhost:9000/');
);

更新：链接的问题没有帮助，尤其是因为它甚至没有确认的答案。

【问题讨论】：

Webpack Dev Server (webpack-dev-server) Hot Module Replacement (HMR) Not Working的可能重复

链接的问题没有帮助，尤其是因为它甚至没有确认的答案。

【参考方案1】：

我建议尝试 react-hot-loader v3，因为热重载工作的更新已经简化（在我看来！）。

在 webpack 然后尝试点现在只需要：

entry: 
    app: [
        'react-hot-loader/patch',
        'webpack-hot-middleware/client',
        `$SRC/client-entry.js`
    ]

这里是一个示例应用程序的链接，react-lego 我创建它是为了帮助人们add react-hot-loader v3 使用他们的应用程序。希望对你有帮助