javascript - build 目录中的 .hot-update.json、.hot-update.js 和 .hot-update.js.map 文件是什么？

Question

我正在使用 webpack-dev-server处于开发模式( watch )。每次服务器重新加载时，一些 json 和 js 文件都会挤满我的构建目录，如下所示:'hash'.hot-update.json :

{"h":"05e9f5d70580e65ef69b","c":{"main":true}}

'hash'.hot-update.js :

webpackHotUpdate("main",{
 ***/ "./client/components/forms/SignIn.js":
 /*!*******************************************!*\
 !*** ./client/components/forms/SignIn.js ***!
 \*******************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 "use strict";
 eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n\tvalue: true\n});\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar SignIn = function (_Component) {\n\t_inherits(SignIn, _Component);\n\n\tfunction SignIn(props) {\n\t\t_classCallCheck(this, SignIn);\n\n\t\tvar _this = _possibleConstructorReturn(this, (SignIn.__proto__ || Object.getPrototypeOf(SignIn)).call(this, props));\n\n\t\t_this.state = { value: '' };\n\n\t\t_this.handleChange = _this.handleChange.bind(_this);\n\t\t_this.handleSubmit = _this.handleSubmit.bind(_this);\n\t\treturn _this;\n\t}\n\n\t_createClass(SignIn, [{\n\t\tkey: 'handleChange',\n\t\tvalue: function handleChange(event) {\n\t\t\tthis.setState({ value: event.target.value });\n\t\t}\n\t}, {\n\t\tkey: 'handleSubmit',\n\t\tvalue: function handleSubmit(event) {\n\t\t\tfetch('http://localhost:3000/', {\n\t\t\t\tmethod: 'POST',\n\t\t\t\theaders: {\n\t\t\t\t\tAccept: 'application/json',\n\t\t\t\t\t'Content-Type': 'application/json'\n\t\t\t\t},\n\t\t\t\tbody: JSON.stringify({\n\t\t\t\t\tname: this.state.value\n\t\t\t\t})\n\t\t\t}).then(function (res) {\n\t\t\t\tconsole.log(res);\n\t\t\t}).catch(function (err) {\n\t\t\t\treturn err;\n\t\t\t});\n\t\t\tevent.preventDefault();\n\t\t}\n\t}, {\n\t\tkey: 'render',\n\t\tvalue: function render() {\n\t\t\treturn _react2.default.createElement(\n\t\t\t\t'div',\n\t\t\t\tnull,\n\t\t\t\t_react2.default.createElement(\n\t\t\t\t\t'form',\n\t\t\t\t\t{ onSubmit: this.handleSubmit },\n\t\t\t\t\t_react2.default.createElement(\n\t\t\t\t\t\t'label',\n\t\t\t\t\t\tnull,\n\t\t\t\t\t\t'Name:',\n\t\t\t\t\t\t_react2.default.createElement('input', { type: 'text', value: this.state.value, onChange: this.handleChange })\n\t\t\t\t\t),\n\t\t\t\t\t_react2.default.createElement('input', { type: 'submit', value: 'Submit' })\n\t\t\t\t),\n\t\t\t\t_react2.default.createElement(\n\t\t\t\t\t'h1',\n\t\t\t\t\tnull,\n\t\t\t\t\t'   '\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\t}]);\n\n\treturn SignIn;\n}(_react.Component);\n\nexports.default = SignIn;\n\n//# sourceURL=webpack:///./client/components/forms/SignIn.js?");
 /***/ 
 })  
})

因为我不使用散列文件，所以我不明白它是从哪里来的。

Answer 1

您在这里看到的是 webpack 的热模块替换功能，它生成已更改的 JavaScript 文件的差异，然后将它们作为补丁(连同元数据)提交。你可以在 webpack.js.org/concepts 了解更多信息(在 HMR 下)