react-hot-loader 和 webpack 不工作

Question

在这上面花了几天时间，我把它扔出去寻求帮助。

尝试编译 webpack 3.5.5 和 react-hot-loader 1.3.1 并得到这些错误：

多（webpack）中的错误-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill react-hot-loader/patch ./src/entry.js 找不到模块：错误：无法解析“/home/terry/myProjects/PWA/apps-dev”中的 'react-hot-loader/patch' @multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill react-hot-loader/patch ./src/entry.js

多（webpack）中的错误-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill react-hot-loader/patch ./src/entry.js 找不到模块：错误：无法解析“/home/terry/myProjects/PWA/apps-dev”中的 'react-hot-loader/webpack' @multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill react-hot-loader/patch ./src/entry.js

我一直在按照网上的说明（或者我认为的那样）来设置以下配置文件：

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const sourcePath = path.join(__dirname, './src');
const publicPath = path.join(__dirname, './public')
const distPath = path.join(__dirname, './public/dist/');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

//for the code shared amongst modules
const extractCommons = new webpack.optimize.CommonsChunkPlugin({
  names: ['vendor', 'manifest'], //specify the common bundle's name
  minChunks: function (module) {  //accept only vendor libraries 
    // this assumes your vendor imports exist in the node_modules directory
    return module.context && module.context.indexOf('node_modules') !== -1;
  }
});


module.exports = env => {
  const isProd = env.prod ? true : false;

  return {
    cache: false,
    entry: [
       'babel-polyfill',
       'react-hot-loader/patch',
       // 'webpack-dev-server/client?http://localhost:3000',
       // 'webpack/hot/only-dev-server',
       sourcePath + '/entry.js'
    ],

    output: {
      filename: '[name].js',  //don't use hash in dev
      path: publicPath,  //where to store the bundled files
      publicPath: '/'
    },

    devtool: 'inline-source-map',

    module: {
    rules: [
     {
      test: /(\.js|\.jsx)$/,
        loaders: ['react-hot-loader/webpack', 'babel'],
        exclude: /node_modules/
      },
      {
        test: /\.html$/,
        exclude: /node_modules/,
        loader: 'file-loader',
        query: {
          name: '[name].[ext]'
        }
      },

      {
          test: /\.svg/,
          use: {
              loader: 'svg-url-loader',
              options: {}
          }
      },
      {
        test: /\.(jpg|png)$/,
        loader: 'url-loader',
        options: {
          limit: 25000,
        },
      },

      {
        test: /(\.scss|\.css)$/,
        loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader?sourceMap!resolve-url-loader!sass-loader?sourceMap'})
      }
    ]
  },
  resolve: {
    alias: {
      components:  path.resolve(__dirname, 'src', 'components'),
      navigation:  path.resolve(__dirname, 'src', 'navigation'),
      reducers:    path.resolve(__dirname, 'src', 'reducers'),
      actions:     path.resolve(__dirname, 'src', 'actions'),
      routes:      path.resolve(__dirname, 'src', 'routes'),
      utils:       path.resolve(__dirname, 'src', 'utils'),
      styles:      path.resolve(__dirname, 'src', 'styles'),
      images:      path.resolve(__dirname, 'public', 'images')
    },
    extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
    modules: [
      path.resolve(__dirname, 'node_modules'),
      sourcePath
    ]
  },

  devServer: {
    host: 'localhost',
    port: 3000,
    contentBase: './public/',
    historyApiFallback: true,
    // respond to 404s with index.html

    hot: true,
    // enable HMR on the server
  },

   plugins: [
    new webpack.HotModuleReplacementPlugin(),
    // enable HMR globally

    new webpack.NamedModulesPlugin(),
    // prints more readable module names in the browser console on HMR updates

    new webpack.NoEmitOnErrorsPlugin(),
    // do not emit compiled assets that include errors


    extractCommons,
    //css files

    new ExtractTextPlugin('shared.css'),

    new HtmlWebpackPlugin({
        template: 'index.template.ejs',
        inject: 'body',
    })

  ],
}
}

这是我的 .babelrc 文件：

    {
  "presets": [
    [
      "latest", {
        "es2015": {
          "modules": false
        }
      }
    ],
    "react",
    "stage-2"
  ],
  "plugins": [
  "transform-object-rest-spread",
    "react-hot-loader/babel-loader"
  ]
}

和我的条目文件：

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import { responsiveStoreEnhancer } from 'redux-responsive';
import reduxThunk from 'redux-thunk';
import reducers from './reducers';
import App from 'routes/App';
import injectTapEventPlugin from 'react-tap-event-plugin';

// Needed for onTouchTap
// 
injectTapEventPlugin();


const composeEnhancers = composeWithDevTools({});

const store = createStore(
  reducers,
  composeEnhancers(
    responsiveStoreEnhancer,
    applyMiddleware(
      reduxThunk
    ))
);

ReactDOM.render(
  <AppContainer>
  <Provider store={store} >
     <App />
   </Provider> 
  </AppContainer>
, document.getElementById('root')
);

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('routes/App', () => { render(
    <AppContainer>
  <Provider store={store} >
     <App />
   </Provider> 
  </AppContainer>) 
})
}

问题是在线文档很简陋，因为他们正在重新做所有事情。有谁能够帮助我？我现在很迷茫，不知道怎么走。

Answer 1

您正在尝试在使用 v1 包的同时使用 v3 配置。您应该将软件包升级到 v3。

npm install --save react-hot-loader@next

或

yarn install --save react-hot-loader@next

Answer 2

在您的 package.json 中添加以下命令：

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

react-hot-loader 和 webpack 不工作

react-hot-loader and webpack not working

webpack

webpack-dev-server

react-hot-loader