我找不出React Hot Loader。我的bundle.js是有效的，并且我的服务器连接，但是我在浏览器中看到一条无法获得的消息
问题描述：
我可以让webpack运行并连接服务器，但是我在浏览器中看到的所有内容都是无法获取消息。有人可以看看他们是否可以发现我搞乱了配置。我的所有组件都在一个叫做公共文件，所以相对于webpack.config.js文件，这将是'./公众我找不出React Hot Loader。我的bundle.js是有效的，并且我的服务器连接，但是我在浏览器中看到一条无法获得的消息
webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: [
'script!jquery/dist/jquery.min.js',
'script!foundation-sites/dist/foundation.min.js',
'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
'./public/index.jsx'
],
externals: {
jquery: 'jQuery'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery'
})
],
output: {
path: __dirname,
filename: './public/bundle.js',
publicPath: './public/'
},
resolve: {
root: __dirname,
alias: {
App: 'public/components/App.jsx',
Home: 'public/components/Home.jsx',
Footer: 'public/components/Footer.jsx',
Inventory: 'public/components/Inventory.jsx',
Login: 'public/components/nav/Login.jsx',
Navbar: 'public/components/nav/Navbar.jsx',
ProductSearch: 'public/components/Product-Search.jsx',
SingleProduct: 'public/components/Single-Product.jsx',
Product: 'public/components/Product.jsx',
Signup: 'public/components/Signup.jsx',
LandingNavbar: 'public/components/nav/LandingNavbar.jsx',
ProductSearch: 'public/components/ProductSearch.jsx',
Examples: 'public/components/Examples.jsx',
Pricing: 'public/components/Pricing.jsx',
Profile: 'public/components/Profile.jsx',
Checkout: 'public/components/Checkout.jsx',
Receipt: 'public/components/Receipt.jsx',
RequireAuth: 'public/components/auth/require_auth.jsx',
Signout: 'public/components/Signout.jsx',
Tour: 'public/components/tour/Tour.jsx',
BusinessTypes: 'public/components/tour/BusinessTypes.jsx',
Customers: 'public/components/tour/Customers.jsx',
Features: 'public/components/tour/Features.jsx',
GettingStarted: 'public/components/tour/GettingStarted.jsx',
MultiStore: 'public/components/tour/MultiStore.jsx',
Support: 'public/components/tour/Support.jsx',
Actions: 'public/actions/index.js'
},
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react'],
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/
}
]
}
};
服务器。 JS
const express = require('express');
const http = require('http');
const bodyParser = require('body-parser');
const morgan = require('morgan');
const app = express();
const router = require('./router');
const mongoose = require('mongoose');
const serverConfig = require('./config.js');
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
// DB Setup for mlab
mongoose.connect(serverConfig.database, function(err) {
if (err) {
console.log(err);
} else {
console.log("Connected to the database");
}
});
// Connects to local database
// mongoose.connect('mongodb://localhost:auth/auth');
// App Setup
app.use(morgan('combined')); //logs incoming requests
app.use(bodyParser.json({ type: '*/*' })); //parses incoming requests into JSON, '*/*' accepts any type of request
app.use(express.static(__dirname + '/public')); //serves public folder containing front-end
app.get('/', function (req, res) {
res.send(__dirname + '/public/index.html'); //serves index.html when home route is hit
});
router(app);
//Server Setup
const port = process.env.PORT || 3000;
// Webpack dev server below
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true
}).listen(port, 'localhost', function (err, result) {
if (err) {
return console.log(err);
}
console.log('Listening at http://localhost:3000/');
});