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/ponents/forms/SignIn.js":
 /*!*******************************************!*\
 !*** ./client/ponents/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/ponents/forms/SignIn.js?");
 /***/ 
 })  
})

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

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/ponents/forms/SignIn.js":
 /*!*******************************************!*\
 !*** ./client/ponents/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/ponents/forms/SignIn.js?");
 /***/ 
 })  
})

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

• javascript
• webpack
• webpack-dev-server

3 Answers 3

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/concepts (under HMR)

This can happen when you ask 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 contain the string hot-update.

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

You can use webpack-clean-plugin instead of using option clean:true in your webpack config.

This plugin helps us clean everything including files generated by hot module replacement. Of course we will be having those two files but they will get replaced each time we make any change to any file.

npm install --save-dev clean-webpack-plugin


const { CleanWebpackPlugin } = require("clean-webpack-plugin");

plugins: [
 new CleanWebpackPlugin()
]