Question

我正在尝试使用webpack-dev-server和react-hot在我的项目中实现某种自动重新加载。

我正在使用babel将我的js从src目录转换为公共目录。

使用我当前的配置，我可以看到.json和.js更新文件正在进入公共目录。

但在我的错误控制台中我可以看到：

app.js：4473获取http://localhost:3000/sockjs-node/info?t=1473946358314 404（未找到）AbstractXHRObject._start @ app.js：4473（匿名函数）@ app.js：4362 app.js：795 [WDS]断开连接！

我有一个webpack.config.js（baseConfig），如下所示：

require('dotenv').config();
var path = require('path');
var autoprefixer = require('autoprefixer');
var precss = require('precss');
var cssnano = require('cssnano');

var ROOT_PATH = path.resolve(__dirname, 'src');
var BUILD_PATH = path.resolve(ROOT_PATH, '../public');

module.exports = {
    entry: '',
    output: {
        path: BUILD_PATH,
        filename: 'app.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/, // test for js and jsx files only
                loader: ['babel'],
                exclude: /node_modules/,
                query: {
                    "presets": ["es2015", "react"],
                    "ignore": ["/node_modules/"],
                }
            },
            {
                test: /\.css$/,
                loaders: [
                    'isomorphic-style-loader',
                    'css-loader',
                    'postcss-loader'
                ],
                exclude: /node_modules/
            }
        ]
    },
    postcss: function() {
        return [autoprefixer({browsers: ['last 2 versions']}), precss, cssnano];
    },
    plugins: []
}

也是一个webpack-client-config.js，如下所示：

require('dotenv').config();
var webpack = require('webpack');
var path = require('path');

var ROOT_PATH = path.resolve(__dirname, 'src');
var BUILD_PATH = path.resolve(ROOT_PATH, '../public');

var baseConfig = require('./webpack.config.js');

baseConfig.entry = [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:3000',
    (ROOT_PATH + '/client-render.js'),
];

baseConfig.plugins = [
    new webpack.HotModuleReplacementPlugin(),
]

baseConfig.devServer = {
    hot: true,
    publicPath: 'http://localhost:3000'
}

module.exports = baseConfig;

我显然对webpack有些不了解，有人关心为什么这不起作用？我可以访问localhost：3000 / app.js，可以在浏览器中看到脚本。我用express表示public为static。

HMR Webpack配置，给出404

0 个答案: