react-hot-loader和webpack無法正常工作

Question

在花了幾天的時間之後，我就拋出了這個問題。

試圖編譯的WebPack 3.5.5和反應熱裝載機1.3.1和獲得這些錯誤：

ERROR多（的WebPack）-dev - 服務器/客戶端？ http://localhost:3000 webpack/hot/dev-server babel-polyfill react-hot-loader/patch ./src/entry.js 模塊未找到：錯誤：無法解析'react-hot-loader/patch'in'/ home/terry/myProjects/PWA/apps-dev' @ multi（webpack）-dev-server/client？ http://localhost:3000 webpack/hot/dev-server babel-polyfill react-hot-loader/patch ./src/entry.js

錯誤在multi（webpack）-dev-server/client？ http://localhost:3000 webpack/hot/dev-server babel-polyfill react-hot-loader/patch ./src/entry.js 未找到模塊：錯誤：無法解析'react-hot-loader/webpack'in'/ home/terry/myProjects/PWA/apps-dev' @ multi（webpack）-dev-server/client？ http://localhost:3000的WebPack /熱/ dev的服務器通天-填充工具反應熱裝載機/補丁./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 
// http://stackoverflow.com/a/34015469/988941 
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" 
}