0

我正在尝试使用 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，它们是...

请参阅此存储库：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.

非常感谢您的帮助！

4

2 回答 2

2

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

（webpack/hot/only-dev-server 用于您想要/需要手动重新加载时，请参阅https://github.com/webpack/webpack/issues/418）

此外，您需要在您的开发配置中指定一个公共路径（例如 output.publicPath）。例如：

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

（这里需要一个绝对路径才能使 css 中的图像与源映射一起使用）

在您的产品配置中，您仍然需要一些东西，例如

publicPath: '/',

您还需要在 HMR 工作的入口点中使用它。（它将通过在 prod 中的缩小作为其“无法访问”的代码来删除）

if (module.hot) {
     module.hot.accept();
}
于 2016-07-01T10:45:05.850 回答
1

更新：使用您的 github 存储库。

一个可能的解决方案是使用 html-webpack-plugin 来提供你的包。您所要做的就是 npm install 并将其添加到您的插件配置中：

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 上使用热重载。

npm i html-loader --save-dev

用法：

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

然后将其添加到您的 package.json 中：

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

https://webpack.github.io/docs/webpack-dev-server.html，“内联模式”部分中的说明。

您可以测试的另一个解决方案是在 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”。

希望能帮助到你。

于 2016-07-01T12:35:48.793 回答