[英]Correct way to configure babel-loader in webpack for HMR
大约一周前,我在向项目中添加HMR时遇到问题,问题在于它只是无法正常工作,控制台显示了HMR Enabled,并且还检测到文件上的更改,但是没有重新呈现视图,控制台将记录:
[HMR] Updated modules:
[HMR] - ./app/src/components/app.jsx
[HMR] App is up to date.
但是在代码检查器中,视觉上都不会改变。
经过大量的实验,我发现问题是由babel-loader造成的,它以某种方式干扰了webpacks HMR电机或类似的东西。 我通过在babel加载程序中排除索引文件来解决它,但是我认为这不是最好的方法,因为现在我无法在index.jsx文件中使用某些js功能。 我想知道是否有更好的方法来解决此问题,也许是在我的配置中还是在设置Webpacks热中间件方面。
这是我的webpack配置:
module.exports = {
resolve: {
extensions: ['*', '.js', '.jsx']
},
entry: [
'webpack-hot-middleware/client', './app/src/index.jsx'
],
output: {
path: path.resolve(__dirname, 'build/js'),
filename: 'bundle.js',
publicPath: '/public'
},
devtool: 'cheap-module-source-map',
module: {
rules: [{
test: /\.jsx?$/,
exclude: /node_modules/,
include: path.resolve(__dirname, 'app/src/'),
exclude: path.resolve(__dirname, 'app/src/index.jsx'),
use: [{
loader: 'babel-loader',
options: {
presets: [
'react-hmre'
],
plugins: [
'transform-object-rest-spread'
]
}
}],
}]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
}
这就是我在服务器中设置热中间件和react-hot-loader的方式:
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const webpackConfig = require('./webpack.dev.config')
const compiler = webpack(webpackConfig)
app.use(webpackDevMiddleware(compiler, {
noInfo: true,
publicPath: webpackConfig.output.publicPath
}))
app.use(webpackHotMiddleware(compiler))
提前致谢。
所以这就是我所想的babel配置,您需要选项modules: false
env预设中为modules: false
,以便让webpack处理这些模块,这是一个菜鸟的错误,但是,伙计,这让我发疯了好几天。
正确的环境预设配置如下:
['env', {modules: false}]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.