所以我一直在尝试为React配置热重载,我正在使用带有express的webpack2和用于HMR的webpack-hot-middleware .
我使用Windows子系统Linux从ubuntu运行服务器,我在Windows上使用普通的Chrome作为客户端 .
它在我的Mac上运行得很好,但是在Windows上却没有,我尝试将浏览器连接到'localhost'和'127.0.0.1',还明确地将express上的主机名设置为'localhost','127.0.0.1'和'0.0.0.0'但它们都不起作用 .
Webpack甚至不会在文件更改时重建 .
这是我的webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: [
path.resolve(__dirname, './src/index.jsx'),
'webpack-hot-middleware/client'
],
devtool: 'inline-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
],
output: {
path: path.resolve(__dirname, './dist'),
filename: 'app.bundle.js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: [/node_modules/],
use: [{
loader: 'babel-loader',
options: {
presets: ['react', 'env']
}
}]
}
]
}
}
中间件配置
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
app.use(webpackHotMiddleware(compiler));
app.listen(port, () => {
console.log('Listening on port ', port);
});
1 回答
我也遇到过这种情况,这似乎是linux子系统之外文件更改的问题 . 我使用Atom进行编辑而不是看到重建 . 但是,如果我从bash触摸文件或通过vi编辑它们,我会看到重新构建和重新加载 . 我从atom制作webpack通知文件更改并没有太远,但是如果我在我的环境中设置CHOKIDAR_USEPOLLING = true,那么在一些短轮询间隔之后,这些更改最终会被注意到 .