求助配置支持Hot Module Replacement的React应用Webpack环境

Got it, let's get your React app set up with Webpack and Hot Module Replacement (HMR) so you can make changes without full page reloads. Here's a step-by-step guide tailored to your current setup:

1. Update Your package.json #

First, we need to add Webpack-related dependencies and tweak your scripts. Here's the updated version (I've filled in the truncated css-loader entry and added missing dev dependencies):

{
  "name": "react-redux",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  },
  "scripts": {
    "start": "webpack-dev-server --open --hot",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "css-loader": "^0.28.11",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.3",
    "style-loader": "^0.23.1"
  }
}

Note: I replaced the babel-node start script with webpack-dev-server since we're moving to Webpack for serving. If you prefer to keep using your custom srcServer.js, we'll adjust that later.

2. Create a webpack.config.js File #

In your project root, add this Webpack configuration file. It handles JS/JSX transpilation, CSS loading, and enables HMR:

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

module.exports = {
  entry: [
    'babel-polyfill',
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index.js' // Update this to your actual entry file path
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public'), // Path to your HTML file
    hot: true,
    port: 3000,
    historyApiFallback: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin() // Shows which modules are updated in HMR
  ],
  mode: 'development'
};

3. Adjust Your React Entry File (e.g., src/index.js) #

To enable HMR for React components, add this snippet at the bottom of your entry file:

if (module.hot) {
  module.hot.accept();
}

For class components, you might want to use react-hot-loader for better HMR support, but the above works for basic setups. If you need it, just install react-hot-loader@4 and update your babel preset to include it.

4. (Optional) Keep Using Custom srcServer.js #

If you want to stick with your existing tools/srcServer.js instead of webpack-dev-server, update it to use Webpack middleware:

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('../webpack.config.js');

const app = express();
const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath,
  hot: true
}));

app.use(webpackHotMiddleware(compiler));

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

Don't forget to install express, webpack-dev-middleware, and webpack-hot-middleware if you go this route.

5. Run the App #

Install the new dependencies first:

npm install

Then start the server:

npm start

Your app should now open in the browser, and any changes you make to components or CSS will update instantly without a full page reload.

内容的提问来源于stack exchange，提问作者bikky barnwal