Javascript 热模块更换已启用，但不工作http://localhost:3000/__webpack_hmr

我的问题是，无论我做什么，我都会在

wepack\u hmr

上得到一个404，我一辈子都无法找出它为什么不可用

完整网页包配置

var url = 'http://localhost:3000';

module.exports = {

    resolve: {
        extensions: ['', '.js']
    },

    entry: ['webpack-hot-middleware/client','./src/client/js/Kindred'],

    devtool: 'cheap-module-source-map',

    module: {
        loaders:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {presets: ['es2015', 'react', 'react-hmre', 'stage-0']}
            },
            {test: /\.png$/, loader: "url-loader?limit=100000"},
            // Images
            {test: /\.jpg$/, loader: "file-loader"},
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file?name=./font/[name].[ext]'
            },
            // Stylesheets
            { test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 
                [
                    'css?sourceMap&modules&importLoaders=1',
                    'sass?sourceMap&modules',
                ]
            ) },
            // Font Definitions
            { test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=public/font/[name].[ext]' },
            { test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=public/font/[name].[ext]' },
            { test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=public/font/[name].[ext]' },
            { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=public/font/[name].[ext]' },
            { test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=public/font/[name].[ext]' }
        ]
    },

    sassLoader: {
        includePaths: [ 'src/client/scss' ]
    },

    plugins: process.env.NODE_ENV === 'production' ? [
        new ExtractTextPlugin ('app.css', {allChunks: true}),
        new webpack.optimize.DedupePlugin (),
        new webpack.optimize.OccurrenceOrderPlugin (),
        new webpack.optimize.UglifyJsPlugin ()
    ] :  [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new ExtractTextPlugin("style.css")
    ],

    devServer: {
        hot: true,
        contentBase: './public'
    },

    output: {
        path: path.join(__dirname),
        publicPath: '/',
        filename: 'bundle.js'
    }

};

'use strict';
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var qs = require('querystring');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var stripInlineComments = require('postcss-strip-inline-comments');

module.exports = {
    devtool: 'eval-source-map',
    // resolve: { modulesDirectories: ['node_modules'], extension: ['', '.js', '.css'] },
    entry: [
        'webpack-hot-middleware/client?reload=true',
        path.join(__dirname, 'src/client/js/Kindred')
        // path.join(__dirname, 'app/main')
    ],
    output: {
        path: path.join(__dirname, '/public/'),
        filename: '[name].js',
        publicPath: '/'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.tpl.html',
            inject: 'body',
            filename: 'index.html'
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ],
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {"presets": ["react", "es2015", "stage-0", "react-hmre"]}
            }, {
                test: /\.json?$/,
                loader: 'json'
            },
            {
                test: /\.jpg$/, loader: "file-loader"
            },
            {
                test: /\.css$/,
                loaders: [
                    'style-loader',
                    'css-loader?importLoaders&' + qs.stringify({
                        modules: true,
                        importLoaders: 1,
                        localIdentName: '[path][name]-[local]'
                    }),
                    'postcss-loader?parser=postcss-scss'
                ]
            },
            // Font Definitions
            { test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=font/[name].[ext]' },
            { test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=font/[name].[ext]' },
            { test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=font/[name].[ext]' },
            { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=font/[name].[ext]' },
            { test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=font/[name].[ext]' }
        ]
    },
    postcss: function (webpack) {
        return [
            stripInlineComments
            , precss
            , autoprefixer
            , require('postcss-simple-vars')
            , require('postcss-nested'
            , autoprefixer({browsers: ['last 2 versions']}))
        ];
    }
};

要运行的节点cmd

webpack-dev-server --inline --history-api-fallback --port 3000

加载页面时

[HMR] Waiting for update signal from WDS...
home:1 GET http://localhost:3000/__webpack_hmr 
client:22 [WDS] Hot Module Replacement enabled.

---

它需要我运行，但不是：//p>好的，这样人们就可以很容易地看到我是如何让它在这里工作的：

我认为对我来说，完全删除SCS并直接使用css模块更容易。这似乎帮助很大

我曾经git@github.com：christianalfoni/webpack-express-boilerplate.git帮助我引导自己通过。知道我有一个工作的东西实际上教会了我很多东西，比我以前在网页上学到的要多得多。正如你可以猜到的那样，这并不是很重要：D

还有一个真正有帮助的主要变化是毫不奇怪地改变了道路。但是这些都是相对于

output.path

中的路径性的，我以前读过这篇文章，但我认为这是相对于

wepack.config.js

的，并不是说从那以后所有的东西都可以算作文档根，即使对于html和css也是如此

**关键部分：）**

我还必须更新我的express设置，因为我没有给它一个

express.static

path。。。哦，我的愚蠢，我怎么会错过这样一件基本的事情。。因此：

Express

app.use(express.static(__dirname + '/public/')); //Don't forget me :(

最终CSS

/* Webfont: Lato-Black */@font-face {
    font-family: 'LatoBlack';
    src: url('/font/Lato-Black.eot'); /* IE9 Compat Modes */
    src: url('/font/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/font/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
         url('/font/Lato-Black.woff') format('woff'), /* Modern Browsers */
         url('/font/Lato-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

Wekpack.config

var url = 'http://localhost:3000';

module.exports = {

    resolve: {
        extensions: ['', '.js']
    },

    entry: ['webpack-hot-middleware/client','./src/client/js/Kindred'],

    devtool: 'cheap-module-source-map',

    module: {
        loaders:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {presets: ['es2015', 'react', 'react-hmre', 'stage-0']}
            },
            {test: /\.png$/, loader: "url-loader?limit=100000"},
            // Images
            {test: /\.jpg$/, loader: "file-loader"},
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file?name=./font/[name].[ext]'
            },
            // Stylesheets
            { test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 
                [
                    'css?sourceMap&modules&importLoaders=1',
                    'sass?sourceMap&modules',
                ]
            ) },
            // Font Definitions
            { test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=public/font/[name].[ext]' },
            { test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=public/font/[name].[ext]' },
            { test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=public/font/[name].[ext]' },
            { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=public/font/[name].[ext]' },
            { test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=public/font/[name].[ext]' }
        ]
    },

    sassLoader: {
        includePaths: [ 'src/client/scss' ]
    },

    plugins: process.env.NODE_ENV === 'production' ? [
        new ExtractTextPlugin ('app.css', {allChunks: true}),
        new webpack.optimize.DedupePlugin (),
        new webpack.optimize.OccurrenceOrderPlugin (),
        new webpack.optimize.UglifyJsPlugin ()
    ] :  [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new ExtractTextPlugin("style.css")
    ],

    devServer: {
        hot: true,
        contentBase: './public'
    },

    output: {
        path: path.join(__dirname),
        publicPath: '/',
        filename: 'bundle.js'
    }

};

'use strict';
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var qs = require('querystring');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var stripInlineComments = require('postcss-strip-inline-comments');

module.exports = {
    devtool: 'eval-source-map',
    // resolve: { modulesDirectories: ['node_modules'], extension: ['', '.js', '.css'] },
    entry: [
        'webpack-hot-middleware/client?reload=true',
        path.join(__dirname, 'src/client/js/Kindred')
        // path.join(__dirname, 'app/main')
    ],
    output: {
        path: path.join(__dirname, '/public/'),
        filename: '[name].js',
        publicPath: '/'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.tpl.html',
            inject: 'body',
            filename: 'index.html'
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ],
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {"presets": ["react", "es2015", "stage-0", "react-hmre"]}
            }, {
                test: /\.json?$/,
                loader: 'json'
            },
            {
                test: /\.jpg$/, loader: "file-loader"
            },
            {
                test: /\.css$/,
                loaders: [
                    'style-loader',
                    'css-loader?importLoaders&' + qs.stringify({
                        modules: true,
                        importLoaders: 1,
                        localIdentName: '[path][name]-[local]'
                    }),
                    'postcss-loader?parser=postcss-scss'
                ]
            },
            // Font Definitions
            { test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=font/[name].[ext]' },
            { test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=font/[name].[ext]' },
            { test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=font/[name].[ext]' },
            { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=font/[name].[ext]' },
            { test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=font/[name].[ext]' }
        ]
    },
    postcss: function (webpack) {
        return [
            stripInlineComments
            , precss
            , autoprefixer
            , require('postcss-simple-vars')
            , require('postcss-nested'
            , autoprefixer({browsers: ['last 2 versions']}))
        ];
    }
};

---

事实上，我已经发布了两次相同的答案。但它们都是相关的。遗憾的是：（

Webpack hmr是一个棘手的恶魔，要想正常工作，它还不够令人愉快，我无法为您完成。我建议您查看一个包含它的可用react样板文件，并查找配置之间的差异。哈哈，约翰：）我很感谢你的帮助，也很清楚这可能会变得很糟糕。是的，对不起，呵呵，我通常喜欢帮助人们解决与反应相关的问题，不介意直接编写代码，但网页配置是最糟糕的。。LOLK来自咕噜->咕噜->网页包。我必须说，网页对我来说似乎是最黑的盒子。但这几乎可以肯定，因为我没有像其他人一样阅读文档。：）webpack热中间件-我相信这一个只适用于express，您在这里使用的是webpack开发服务器。此外，HMR不适用于ExtractTextPlugin。