react-hot-loader 和 webpack 不工作

Posted 2023-02-22

【中文标题】react-hot-loader 和 webpack 不工作

【英文标题】：react-hot-loader and webpack not working

【发布时间】：2018-02-11 15:39:17

【问题描述】：

在花了几天时间之后，我把它扔了寻求帮助。

尝试编译 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:3000webpack/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:3000webpack/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
// http://***.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>) 
)

问题是在线文档很少，因为他们正在重新做所有事情。有谁能够帮我？我现在很困惑，我不知道是哪条路。

【参考方案1】：

在你的 package.json 中添加下面这个命令：

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

【参考方案2】：

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

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

或

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

【讨论】：

谢谢亚当。它现在可以编译，但现在在浏览器中加载项目时出现以下错误：bootstrap b6b7eea…:710 Uncaught TypeError: os.homedir is not a function

@Coco 你能接受解决你最初问题的答案吗？

谢谢你，亚当·拉文。 yarn 包工作正常，但 npm 包不工作？？