我的问题是，无论我做什么，我都会在wepack_hmr上得到404，我一辈子都无法弄清楚为什么它不可用。
完整的Webpack配置
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'
}
};
节点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.
它让我运行，但不是：/
好的，人们很容易看到我做了什么让它在这里工作，它是：
我认为我更容易完全删除scs，只需开箱即用css模块。这似乎帮助很大。
我曾经git@github.com：christianalfoni/webpack-epress-bilerplate.git帮助我引导自己通过。知道我有一件可以工作的事情实际上教会了我很多，比我在交webpack之前学到的要多得多。正如你所能猜到的，这并不多：D
同样，真正有帮助的一个主要变化是毫不奇怪地改变了道路。但这些都是相对于output.path中的路径性的，我以前读过这篇文章，但认为这是相对于wepack.config.js的，并不是说从那时起，所有东西都会被视为文档根，即使是html和css。
**关键部分：(**
我还必须更新我的快递设置，因为我没有给它一个express.static路径。。。哦，我的愚蠢，我怎么会错过这么基本的东西呢。。因此：
快递
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
'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']}))
];
}
};
事实上，我已经发布了两次相同的答案。但两者都有关联。遗憾的是：(