更改

Question

我有以下webpack.config.js：

"use strict";

const debug = process.env.NODE_ENV !== "production";

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

module.exports = {
  devtool: debug ? 'inline-sourcemap' : null,
  devServer: {
    inline: true,
    port: 3333,
    hot: true,
    contentBase: "src/static/",
    historyApiFallback: {
      index: '/index-static.html'
    }
  },
  entry: [
    'webpack-dev-server/client?http://localhost:3000/',
    'webpack/hot/only-dev-server', 
    './src/app-client.js'
  ],
  output: {
    path: path.join(__dirname, 'src', 'static', 'js'),
    publicPath: "/js/",
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: path.join(__dirname, 'src'),
      loader: ['babel-loader'],
      query: {
        cacheDirectory: 'babel_cache',
        presets: debug ? ['react', 'es2015', 'react-hmre'] : ['react', 'es2015']
      }
    },
{ test: /\.jsx?$/, loaders: ['react-hot', 'jsx?harmony'], include: path.join(__dirname, 'src') }
    ]
  },
  plugins: debug ? [] : [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false },
      mangle: true,
      sourcemap: false,
      beautify: false,
      dead_code: true
    }),
  ]
};

的package.json

{
  "name": "judo-heroes",
  "version": "1.0.0",
  "description": "Simple application to showcase how to achieve universal rendering and routing with React and Express.",
  "main": "src/server.js",
  "repository": "git@github.com:lmammino/judo-heroes.git",
  "scripts": {
    "start": "NODE_ENV=development node_modules/.bin/babel-node --presets 'react,es2015' src/server.js",
    "start-dev": "npm run start-dev-hmr",
    "start-dev-single-page": "node_modules/.bin/http-server src/static",
    "start-dev-hmr": "node_modules/.bin/webpack-dev-server --progress --inline --hot",
    "build": "NODE_ENV=development node_modules/.bin/webpack -d"
  },
  "author": "Luciano Mammino",
  "license": "MIT",
  "dependencies": {
    "babel-cli": "^6.11.4",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.5",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "babel-preset-react-hmre": "^1.1.1",
    "ejs": "^2.5.1",
    "express": "^4.14.0",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-router": "^2.6.1"
  },
  "devDependencies": {
    "http-server": "^0.9.0",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.14.1"
  }
}

每次我更改某些组件时，我都会尝试让浏览器刷新，但不会发生更改。

Answer 1

您的问题可能是因为第一个加载程序匹配后您没有使用测试test: /\.jsx?$/,访问加载程序。

您可以尝试在第一个模块中使用react-hot吗？

{
  test: path.join(__dirname, 'src'),
  loader: ['react-hot','babel-loader'],
  query: {
    cacheDirectory: 'babel_cache',
    presets: debug ? ['react', 'es2015', 'react-hmre'] : ['react', 'es2015']
  }
},

从长远来看，对这种装载机进行更精确的测试会更好。

Answer 2

我只需运行此命令：

“start-dev-hmr”：“node_modules / .bin / webpack-dev-server --progress --inline --hot”，

来自

{
  "name": "judo-heroes",
  "version": "1.0.0",
  "description": "Simple application to showcase how to achieve universal rendering and routing with React and Express.",
  "main": "src/server.js",
  "repository": "git@github.com:lmammino/judo-heroes.git",
  "scripts": {
    "start": "NODE_ENV=production node_modules/.bin/babel-node --presets 'react,es2015' src/server.js",
    "start-dev": "npm run start-dev-hmr",
    "start-dev-single-page": "node_modules/.bin/http-server src/static",
    "start-dev-hmr": "node_modules/.bin/webpack-dev-server --progress --inline --hot",
    "build": "NODE_ENV=production node_modules/.bin/webpack -p"
  },
  "author": "Luciano Mammino",
  "license": "MIT",
  "dependencies": {
    "babel-cli": "^6.11.4",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.5",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "babel-preset-react-hmre": "^1.1.1",
    "ejs": "^2.5.1",
    "express": "^4.14.0",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-router": "^2.6.1"
  },
  "devDependencies": {
    "http-server": "^0.9.0",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.14.1"
  }
}