What are the 'hash'.hot-update.json or js files in build directory

Question

I am using the webpack-dev-server in development mode (watch). Some json and js files are crowding my build directory every time the server reloads like so :

'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?");
 /***/ 
 })  
})

I can't understand where does are coming from since i don't use hashed files.

Answer 1

What you are seeing here is webpack's Hot Module Replacement feature which generates diffs of JavaScript files that have changed, and then submits them as patches (along with metadata). You can learn more about this at webpack.js.org/concepts (under HMR)

Answer 2

This happens when you have asked webpack-dev-server to write on disk while you are in development mode. If for example you have something like this:

devServer: {
  devMiddleware: {
    writeToDisk: true,
  },
},

If you don't want them, you could write a function with a regExp. The example below tells to write on disk only files that don't contains the string hot-update.

devServer: {
  devMiddleware: {
    writeToDisk: (filePath) => {
      return !/hot-update/i.test(filePath); // you can change it to whatever you need
    },
  },
},