webpack 配置 react-hot-loader 不生效

Question

react-hot-loader 不生效，发现 module.hot.accept 回调没执行。

按照文档配置的：
https://github.com/gaearon/re...

目录结构

• webpack-test

  • node_modules

  • src

    • index.js
    • main.js
    • style.pcss
    • tpl.html
  • .babelrc
  • package.json
  • webpack.config.js

webpack.config.js

// import webpack from 'webpack';
// import path from 'path';
//
// import ExtractTextPlugin from 'extract-text-webpack-plugin';
// import HtmlWebpackPlugin from 'html-webpack-plugin';
// import CleanWebpackPlugin from 'clean-webpack-plugin';
//
// import cssnext from 'postcss-cssnext';
// import precss from 'precss';
// import pxtorem from 'postcss-pxtorem';
// import autoprefixer from 'autoprefixer';

const webpack = require('webpack');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const cssnext = require('postcss-cssnext');
const precss = require('precss');
const pxtorem = require('postcss-pxtorem');
const autoprefixer = require('autoprefixer');

const webpackConfig = {
  entry: {
    vendor: ['babel-polyfill', 'react-hot-loader/patch', 'react', 'react-dom'],
    index: './src/index',
    main: './src/main'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].js',
    chunkFilename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          // {
          //   loader: 'bundle-loader',
          //   options: {
          //     // lazy: true
          //   }
          // },
          'babel-loader'
        ]
      },
      {
        test: /\.(css|pcss)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              minimize: true,
              modules: true,
              localIdentName: '[local]_[hash:5]'
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: (loader) => [
                cssnext(),
                precss(),
                pxtorem({
                  rootValue: 75,
                  propList: ['*']
                }),
                autoprefixer()
              ]
            }
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 5120
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin('dist'),
    new HtmlWebpackPlugin({
      template: './src/tpl.html'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }
    })
  ]
};

console.log(process.env.NODE_ENV)

if (process.env.NODE_ENV === 'development') {
  // 开发环境
  webpackConfig.devtool = 'inline-source-map';
  webpackConfig.devServer = {
    contentBase: path.resolve(__dirname, 'dist'),
    hot: true
  };
  webpackConfig.plugins.push(
    new webpack.HotModuleReplacementPlugin()
  );
} else {
  // 生产环境

}

// export default webpackConfig;

module.exports = webpackConfig;

.babelrc

{
  "presets": [
    ["env", {"modules": false}],
    "stage-0",
    "stage-1",
    "stage-2",
    "stage-3",
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './index';
import { AppContainer } from 'react-hot-loader';

const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('root')
  )
};

render(App);

if (module.hot) {
  console.log(module.hot);
  module.hot.accept('./index', () => {
    alert(123)
    render(App)
  });
}

index.js

import css from './style.pcss';
import React from 'react';

class App extends React.Component {
  render () {
    return (
      <h1>1</h1>
    )
  }
}

export default App;

package.json

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack -p --progress",
    "start": "cross-env NODE_ENV=development webpack-dev-server --open"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    "bundle-loader": "^0.5.5",
    "clean-webpack-plugin": "^0.1.17",
    "cross-env": "^5.1.1",
    "css-loader": "^0.28.7",
    "cssnano": "^3.10.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.5",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "lodash": "^4.17.4",
    "postcss-cssnext": "^3.0.2",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-pxtorem": "^4.0.1",
    "precss": "^2.0.0",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "style-loader": "^0.19.0",
    "uglifyjs-webpack-plugin": "^1.1.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.8.1"
  },
  "dependencies": {
    "react-hot-loader": "^3.1.3",
    "webpack-dev-server": "^2.9.4"
  }
}

Answer 1

你需要搭配webpack-dev-server来使用，且需要设置hot选项。
命令行形式：

"scripts": {
  ...
 "start": "webpack-dev-server --hot"
}

也可以直接在webpack中配置：

devServer: {
        host: "0.0.0.0",
        port: config.port,
        historyApiFallback: true,
        hot: true,
        stats: {
            colors: true
        },
        disableHostCheck: true,
        inline: true,
        contentBase: path.join(rootPath, 'dist'),
        publicPath: '/',
        clientLogLevel: "none"
   }

Answer 2

js的loader没有设置好，需要react-hot-loader/webpack，配置可参考https://github.com/LoveLiveSu...

另外你的react-hot-loader是正式版，建议使用beta版，我用正式版也没有成功。

Answer 3

推荐您看一下：https://segmentfault.com/a/11...

Answer 4

https://segmentfault.com/a/11...

Answer 5

http://www.lixuejiang.me/2017...

Answer 6

同样有这样的问题

Answer 7

我也有这个问题，完全不起效