1

我的代码没有使用 HMR 重新加载时遇到问题。我正在使用 CLI webpack 开发服务器。可以看到更改并且 webpack 会重新编译，但站点不会重新加载。

控制台日志：

[Log] [WDS] Hot Module Replacement enabled.
[Log] [WDS] App updated. Recompiling... (x2)
[Log] [WDS] App hot update...
[Log] [HMR] Checking for updates on the server...
[Warning] [HMR] Update failed: parse@[native code]
onreadystatechange@http://localhost:8080/assets/vendor.js:67:38

此错误是注入的 Webpack 代码的一部分：

request.onreadystatechange = function() {
     ...
  var update = JSON.parse(request.responseText); <-- this breaks

我的代码基本上是这样的：https ://github.com/jaredpalmer/react-production-starter除了我将它切换到 Koa2。在此过程中，由于各种原因，我无法在 HMR 中使用 build，所以现在我求助于外部服务器。

我的配置：

{
  devtool: 'eval',
  entry: {
    main: [
     path.join(process.cwd(), 'client'),
    ],
    vendor: [
      'react',
      'react-dom',
      'react-router',
      'redux',
      'react-redux',
      'aphrodite'
    ]
  },
  output: {
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
    publicPath: '/assets/',
    path: path.join(process.cwd(), 'public/assets')
  },
  module: {

    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /(node_modules|server)/,
        query: {
          cacheDirectory: false,
          presets: ["es2015", "react", "stage-0"]
        }
      },
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
      '__DEV__': true
    }),
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', 2),
    new webpack.NoErrorsPlugin()
  ],
}

我调用 webpack 服务器：

webpack-dev-server --config tools/webpack.client.dev.js --hot --inline

可能是什么问题？似乎 webpack 正在接收无效信息来解析，但我不知道它应该是什么或来自什么。

客户端 index.js 文件与此处相同。

我重新安排了提供初始渲染的代码，但它们非常相似。这是原始服务器代码。主要是我把它变成了一条包罗万象的路线router.all('*')，并稍微改变了 html，但大部分都是一样的。以下是脚本标签：

 <script>window.renderedClassNames = ${JSON.stringify(data.css.renderedClassNames)};</script>
 <script>window.INITIAL_STATE = ${JSON.stringify(initialState)};</script>
 <script src="${ env === 'production' ? '/assets/vendor.js' : 'http://localhost:8080/assets/vendor.js'}" ></script>
 <script async src="${ env === 'production' ? '/assets/main.js' : 'http://localhost:8080/assets/main.js'}" ></script>

该client/index.js文件在底部包含以下内容：

if (module.hot) {
  module.hot.accept('../common/routes/root', () => {
    unsubscribeHistory()
   setTimeout(render)
  })
 }

然而，它从未被调用。

有人可以发光吗？

4

0 回答 0