Javascript 网页包热重加载反应

我知道有很多关于这个的问题，但我正在寻找一个解决方案，在2天14小时

我正试图为自己建立一个开发环境，但没有热自动更新的运气

我将webpack.config入口点更改为

'webpack/hot/dev server'

。当我在浏览器

http://localhost:3000/

我拿到了网站。在控制台中，它显示：

[HMR]正在等待来自WDS的更新信号…

，但当我更新某些内容时，页面不会重新加载。什么也没发生。我可以看到网页包捕获了更改并更新了捆绑包。我可以在使用F5重新加载页面时看到更改

当我输入

http://localhost/webpack-dev-server/

每当我进行更改时，它都会更新页面。但它会重新加载整个页面

我知道也许这是一个简单的解决方案，但相信我，我已经花了14个小时试图找到一个解决方案。我在拉扯头发

我的所有配置如下所示：

package.json

{
  "name": "sample",
  "version": "0.1.0",
  "description": "sample",
  "private": true,
  "main": "index.js",
  "scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --config=./webpack.config.dev.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Gökhan Öztürk",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.7.0",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-dev-expression": "^0.2.1",
    "babel-plugin-tcomb": "^0.3.24",
    "babel-plugin-webpack-loaders": "^0.8.0",
    "babel-polyfill": "^6.22.0",
    "babel-preset-env": "^1.1.8",
    "babel-preset-react": "^6.22.0",
    "babel-preset-react-app": "^2.0.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-react-optimize": "^1.0.1",
    "babel-preset-stage-0": "^6.22.0",
    "cross-env": "^3.1.4",
    "css-loader": "^0.26.1",
    "eslint": "^3.14.0",
    "eslint-config-airbnb": "^14.0.0",
    "eslint-formatter-pretty": "^1.1.0",
    "eslint-import-resolver-webpack": "^0.8.1",
    "eslint-loader": "^1.6.1",
    "eslint-plugin-flowtype": "^2.30.0",
    "eslint-plugin-flowtype-errors": "^2.0.3",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^3.0.2",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-react": "^6.9.0",
    "express": "^4.14.0",
    "file-loader": "^0.9.0",
    "flow-bin": "^0.38.0",
    "flow-typed": "^2.0.0",
    "html-webpack-plugin": "^2.26.0",
    "json-loader": "^0.5.4",
    "node-sass": "^4.3.0",
    "postcss-loader": "^1.2.2",
    "react-hot-loader": "^1.3.1",
    "redux-logger": "^2.7.4",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "tcomb": "^3.2.16",
    "url-loader": "^0.5.7",
    "webpack": "^1.14.0",
    "webpack-dev-middleware": "^1.9.0",
    "webpack-dev-server": "^1.16.2",
    "webpack-hot-middleware": "^2.15.0"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.2",
    "react-router": "^3.0.2",
    "react-router-redux": "^4.0.7",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0"
  }
}

webpack.config.dev.js

const path = require('path');
const fs = require('fs');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const appDirectory = fs.realpathSync(process.cwd());
function resolveApp(relativePath) {
  return path.resolve(appDirectory, relativePath);
}

module.exports = {
  debug: true,

  devtool: 'inline-sourcemap',

  entry: [
    'webpack-hot-middleware/client?http://localhost:3000/',
    'webpack/hot/only-dev-server',
    'babel-polyfill',
    './src/index'
  ],

  output: {
    path: resolveApp('build'),
    pathinfo: true,
    filename: 'static/js/bundle.js',
    publicPath: 'http://localhost:3000/'
  },

  resolve: {
    extensions: ['.js', '.json', '.jsx', '']
  },

  module: {
    // First, run the linter.
    // It's important to do this before Babel processes the JS.
    preLoaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'eslint',
        include: resolveApp('src'),
      }
    ],
    loaders: [
      // Diğer loaderlar tarafından işlem görmeyecek her dosya buradan yönlendirilecek.
      {
        exclude: [
          /\.html$/,
          /\.(js|jsx)$/,
          /\.css$/,
          /\.(scss|sass)$/,
          /\.json$/,
          /\.svg$/
        ],
        loader: 'url',
        query: {
          limit: 10000,
          name: 'static/media/[name].[hash:8].[ext]'
        }
      },

      {
        test: /\.css$/,
        loader: 'style!css?importLoaders=1!postcss'
      },
      {
        test: /\.(scss|sass)$/,
        loader: 'style!css?importLoaders=1!postcss!sass'
      },
      // JSON is not enabled by default in Webpack but both Node and Browserify
      // allow it implicitly so we also enable it.
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.(js|jsx)$/,
        loader: 'react-hot!babel',
        // loader: 'babel?cacheDirectory=true',
        include: resolveApp('src'),
        exclude: /node_modules/
      }
    ]
  },

  // We use PostCSS for autoprefixing only.
  postcss: function postCssAutoprefixer() {
    return [
      autoprefixer({
        browsers: [
          '>1%',
          'last 4 versions',
          'Firefox ESR',
          'not ie < 9', // React doesn't support IE8 anyway
        ]
      }),
    ];
  },

  plugins: [
    // Generates an `index.html` file with the <script> injected.
    new HtmlWebpackPlugin({
      inject: true,
      template: resolveApp('public/index.html'),
    }),

    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),

    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ],

  devServer: {
    hot: true,
    contentBase: './src',
    port: 3000
  },

  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};

public/index.html

<!doctype html>
<html lang="tr">
  <head>
    <title>site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

网站

看一个工作示例：

main.js

const express = require('express')
const debug = require('debug')('app:server')
const path = require('path')
const webpack = require('webpack')
const webpackConfig = require('../config/webpack.config')
const project = require('../config/project.config')
const compress = require('compression')

const app = express()

// Apply gzip compression
app.use(compress())

// ------------------------------------
// Apply Webpack HMR Middleware
// ------------------------------------
if (project.env === 'development') {
  const compiler = webpack(webpackConfig)

  debug('Enabling webpack dev and HMR middleware')
  app.use(require('webpack-dev-middleware')(compiler, {
    publicPath  : webpackConfig.output.publicPath,
    contentBase : project.paths.client(),
    hot         : true,
    quiet       : project.compiler_quiet,
    noInfo      : project.compiler_quiet,
    lazy        : false,
    stats       : project.compiler_stats
  }))
  app.use(require('webpack-hot-middleware')(compiler, {
    path: '/__webpack_hmr'
  }))

  // Serve static assets from ~/public since Webpack is unaware of
  // these files. This middleware doesn't need to be enabled outside
  // of development since this directory will be copied into ~/dist
  // when the application is compiled.
  app.use(express.static(project.paths.public()))

  // This rewrites all routes requests to the root /index.html file
  // (ignoring file requests). If you want to implement universal
  // rendering, you'll want to remove this middleware.
  app.use('*', function (req, res, next) {
    const filename = path.join(compiler.outputPath, 'index.html')
    compiler.outputFileSystem.readFile(filename, (err, result) => {
      if (err) {
        return next(err)
      }
      res.set('content-type', 'text/html')
      res.send(result)
      res.end()
    })
  })
} else {
  debug(
    'Server is being run outside of live development mode, meaning it will ' +
    'only serve the compiled application bundle in ~/dist. Generally you ' +
    'do not need an application server for this and can instead use a web ' +
    'server such as nginx to serve your static files. See the "deployment" ' +
    'section in the README for more information on deployment strategies.'
  )

  // Serving ~/dist by default. Ideally these files should be served by
  // the web server and not the app server, but this helps to demo the
  // server in production.
  app.use(express.static(project.paths.dist()))
}

module.exports = app

dev-server.js

const project = require('../config/project.config')
const server = require('../server/main')
const debug = require('debug')('app:bin:dev-server')

server.listen(project.server_port)
debug(`Server is now running at http://localhost:${project.server_port}.`)

project.config.js

  // ----------------------------------
  // Server Configuration
  // ----------------------------------
  server_host : ip.address(),  
  server_port : process.env.PORT || 1024,

---

只是想澄清一下：你是想更新你的html文件还是js文件？热模块不监视defaultno JS对index.html的更改。我与html文件没有任何关系。当我更改src/index.js中的某些内容时，页面不会更改，这是入口点。

  // ----------------------------------
  // Server Configuration
  // ----------------------------------
  server_host : ip.address(),  
  server_port : process.env.PORT || 1024,