webpack3配置: 热替换(HMR)问题

webpack + react的demo,热加载是可以局部刷新吗,控制台已经显示热加载启动了,为什么更新代码后还是重载页面,没有实现局部刷新
webpack配置

var webpack = require('webpack')

module.exports = {
  entry: __dirname + '/app/main',
  output: {
    path: __dirname + '/public',
    filename: 'bundle.js'
  },
  devtool: 'eval-source-map',

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

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react']
          }
        }
      }
    ]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],

  devServer: {
    contentBase: './public',
    historyApiFallback: true,
    inline: true,
    hot: true
  }
}
阅读 3.9k
2 个回答

没有加载react热更新插件

  1. webpack-dev-server并不能读取你的webpack.config.js的配置output!!
  2. webpack-dev-server打包生产的文件并不会添加在你的项目目录中!!
  3. html 中这样写
<body>
    <div id="app"></div>
    <script type="text/javascript" src="bundle.js"></script>
</body>

不能引用你webpack配置的bundle.js文件目录,webpack配置的这个bundle.js文件,只有在你手动打包webpack之后才会改变!

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进