我的 React 应用程序中的更新不考虑在内 Webpack 开发服务器

Question

我正在尝试使用Webpack和Babel为我的React应用程序设置一个环境。我使用JSX来实现组件，我想利用实时加载。

这是我的package.json文件:

{
  (...)
  "scripts": {
    "start": "webpack-dev-server --hot --inline"
  },
  "dependencies": {
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "jsx-loader": "^0.13.2",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

以下是我的Webpack配置:

var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
  entry: [
    'webpack-dev-server/client?http://0.0.0.0:8080',
    'webpack/hot/only-dev-server',
    APP_DIR + '/index.jsx'
  ],
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module : {
    loaders : [
      {
        test : /.jsx?/,
        include : APP_DIR,
        loaders: ['react-hot', 'babel']
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};
module.exports = config;

在执行npm run start并使用此配置后，我在控制台上看到检测到JSX文件中的更新，但浏览器没有更新。此外，如果我看一下module.js文件，我的更新没有被考虑在内。

运行webpack -d命令，它们是…

查看repo: https://github.com/templth/react-webpack-hot-reload.

额外的提示。我在浏览器的JavaScript控制台中看到了以下跟踪:

[HMR] Waiting for update signal from WDS...
Download the React DevTools for a better development experience: https://(...)/react-devtools
XHR finished loading: GET "http://localhost:8080/sockjs-node/info?t=1467375470671".AbstractXHRObject._start @ abstract-xhr.js:132(anonymous function) (...)
[WDS] Hot Module Replacement enabled.
[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
GET http://localhost:8080/src/client/0cf06dae430007853b6f.hot-update.json 404 (Not Found)hotDownloadManifest @ bootstrap (...)
[HMR] Cannot find update. Need to do a full reload!

only-dev-server.js: 28[HMR](可能是因为重新启动webpack-dev-server)

和启动webpack开发服务器的控制台中

Hash: 85771179bfa8706bc10f
Version: webpack 1.13.1
Time: 275ms
                           Asset      Size  Chunks             Chunk Names
                       bundle.js    991 kB       0  [emitted]  main
0.8073da5d40a8dd413f96.hot-update.js    3.6 kB    0, 0  [emitted] main, main
8073da5d40a8dd413f96.hot-update.json  36 bytes          [emitted]  
chunk    {0} bundle.js, 0.8073da5d40a8dd413f96.hot-update.js, 0.8073da5d40a8dd413f96.hot-update.js (main) 897 kB [rendered]
   [76] ./src/client/app/index.jsx 3.58 kB {0} [built]
     + 255 hidden modules
webpack: bundle is now VALID.

非常感谢你的帮助!

Answer 1

你的入口点应该只是webpack/hot/dev-server

(webpack/hot/only-dev-server是为当你想要/需要手动重新加载，参见https://github.com/webpack/webpack/issues/418)

另外，您需要在dev配置中指定一个publicPath(例如output.publicPath)。例如:

publicPath: 'http://localhost:8080/'

(这里需要一个绝对路径，以便css中的图像与sourcemaps一起工作)

在您的prod配置中，您仍然需要这里的内容，例如

publicPath: '/',

要使HMR工作，您还需要在入口点中使用它。(它将在prod中被最小化，因为它的'不可达'代码)

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

Answer 2

更新:使用您的github repo。

一个可能的解决方案是使用html-webpack-plugin来服务你的bundle。你所要做的就是npm安装它并把它添加到你的插件配置中:

npm i html-webpack-plugin --save-dev

用法:

var HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
        template: './src/client/index.html'
    }),
  ]

从你的index.html中删除<script src="public/bundle.js" type="text/javascript"></script>，现在它会自动为你添加

然后访问http://localhost:8080/，一切都应该正常。

好处:你也可以使用html-loader和——inline配置来对html使用热加载。

用法:

{
  test: /.html$/,
  loader: 'html-loader'        
} 

然后添加到package.json:

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

在https://webpack.github.io/docs/webpack-dev-server.html， "Inline mode"一节中的解释

---

你可以测试的另一个解决方案是在webpack.config.js中使用devServer配置:

module.exports = {
    devServer: {
        inline: true,
        port: 3333
    },
    ...

然后使用publicPath:

publicPath: 'http://localhost:3333/'

在我的package.json中:

"start": "webpack-dev-server --content-base app",

从webpack.config.js中删除这些行:

'webpack-dev-server/client?http://0.0.0.0:8080',
'webpack/hot/only-dev-server',

你也可以直接使用"npm start"，而不需要"run"。

希望能有所帮助。