404因为重新启动了webpack-dev-server [英] 404 because of restarting the webpack-dev-server

问题描述

当我尝试更改我的反应组件并保存它以查看热载入程序是否更新我的页面时，我正在开发人员工具中获取此信息：

I'm getting this in my developer tools when I try change my react component and save it to see if hot loader updated my page:

GET http://localhost:3000/public/bundle/76566a1ad7e45b834d4e.hot-update.json 404 (Not Found)hotDownloadManifest @ main.js:26hotCheck @ main.js:210check @ main.js:9288(anonymous function) @ main.js:9346
main.js:9303 [HMR] Cannot find update. Need to do a full reload!
main.js:9304 [HMR] (Probably because of restarting the webpack-dev-server)

我不知道为什么会发生这种情况。我正在尝试运行django作为您的后端服务器（ webpack说明）

I'm not sure why this is occurring. I am trying to run django as my backend server (webpack instructions)

这是我的webpack.watch.js：

Here is my webpack.watch.js:

var path = require('path');
var config = require("./webpack.config.js");
var Webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var port = process.env.WEBPACK_PORT || 3000;
var host = process.env.HOST || 'localhost';

config.entry.unshift(
    "webpack-dev-server/client?http://" + host + ":" + port,
    "webpack/hot/only-dev-server"   // only prevents reload on syntax errors
);

config.plugins = [
    new Webpack.HotModuleReplacementPlugin(),
    new Webpack.NoErrorsPlugin(), // don't reload if there is an error
    new ExtractTextPlugin("style.css", {
        allChunks: true
    })
];

config.module.loaders = [
    { test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
    { test: /\.json$/, loader: 'json-loader' },
    { test: /\.jsx$/, loaders: ['react-hot', 'babel-loader'], include: path.join(__dirname, 'app') },
    { test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
    { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
    { test: /\.scss$/, exclude: /node_modules/, loaders: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader') }
];

config.devServer = {
    publicPath:  config.output.publicPath,
    filename: 'main.js',
    contentBase: './public',
    hot:         true,
    // Make connection between webpack-dev-server and its runtime set inline: true
    inline:      true,
    lazy:        false,
    quiet:       true,
    noInfo:      true,
    headers:     {"Access-Control-Allow-Origin": "*"},
    stats:       {colors: true},

    // webpack-dev-server will serve built/bundled static files from host:port
    host:        "0.0.0.0",
    port:        port
};

module.exports = config;

这是我的webpack.config.js：

Here is my webpack.config.js:

module.exports = {
    entry: [
        './app/index.js'
    ],

    output: {
        path: './public/bundle',
        filename: 'main.js',
        publicPath: 'http://localhost:3000/public/bundle/'
    },

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}),
    ],

    module: {
        loaders: [
            { test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
            { test: /\.json$/, loader: 'json-loader' },
            { test: /\.jsx$/, loaders: ['react-hot', 'babel-loader'], include: path.join(__dirname, 'app') },
            { test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
            { test: /\.scss$/, exclude: /node_modules/, loaders: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader') }
        ]
    },
}

推荐答案

而不是使用

entry: [
    './app/index.js'
],

作为您的条目

添加两个附加条目，如下所示：

add two additional entries along with it like this:

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

这篇关于404因为重新启动了webpack-dev-server的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！