1

我正在尝试设置一个快速服务器来开发具有热重载的 React 项目，但 HMR 事物由于某种原因请求了错误的路径，我无法通过更改“publicPath”选项来修复它。即使这是我服务器静态文件的文件夹，它也会请求“公共”文件夹，因此会导致错误。如何调整配置以使 HMR 开始工作？这是我在控制台中看到的错误： 错误： 我的 Webpack 配置：

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

const tsRules = {
    test: /\.ts(x?)$/,
    use: [
        {loader: 'react-hot-loader/webpack'},
        {loader: 'awesome-typescript-loader'},
    ]
};

const scssRules = {
    test:/\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader']
};

//All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
const jsRules = {
    enforce: "pre",
    test: /\.js$/,
    loader: "source-map-loader"
};

module.exports = {
  entry: [
    './js/App.tsx',
    'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000'
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public'),
    publicPath: '.'
  },
  resolve: {
    extensions:['.ts','.tsx','.js', '.json']
  },
  module: {
    rules: [
        tsRules,
        scssRules
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],
  externals: {
    //"react": "React",
    //"react-dom": "ReactDOM"
  },
  devtool: '#source-map',
}

服务器.js：

import http from 'http';
import express from 'express';
import bodyParser from 'body-parser';
import openBrowser from 'react-dev-utils/openBrowser';

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var config = require('../webpack.config');
var compiler = webpack(config);

const app = express();
const port = process.env.PORT || 3090;

//middleware

app.use(webpackDevMiddleware(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath 
}));
app.use(webpackHotMiddleware(compiler,{
    log: console.log,
    path: '/__webpack_hmr'
}));
app.use(express.static('public'));

const server = http.createServer(app);
server.listen(port, () => {
    console.log('listening on port' + port);
    openBrowser(`http://localhost:${port}/`);
});

文件夹结构：

4

1 回答 1

0

我也遇到了这个问题，我是这样解决的：

1) 在 webpack 配置中，“入口”配置的顺序很重要，因此将 'webpack-hot-middleware/client...' 设置为数组的第一项

2）为中间件定义一个公共路径，如下所示：

"webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr"

希望这可以帮助！

于 2018-01-03T20:24:54.683 回答