webpack build目录中的. hot-update.json、. hot-update.js和. www.example.com文件是什么hot-update.js.map?

omqzjyyz  于 2023-05-18  发布在  Webpack
关注(0)|答案(2)|浏览(179)

我在开发模式下使用webpack-dev-server(手表)。每当服务器重新加载时,一些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?");
 /***/ 
 })  
})

我不知道是从哪里来的,因为我不使用散列文件。

ukdjmx9f

ukdjmx9f1#

你在这里看到的是webpack的Hot Module Replacement功能,它生成已经更改的JavaScript文件的差异,然后将它们作为补丁(沿着元数据)提交。您可以在webpack.js.org/concepts(在HMR下)了解更多信息。

k4aesqcs

k4aesqcs2#

当您在开发模式下要求webpack-dev-server在磁盘上写入数据时,可能会发生这种情况。例如,如果你有这样的东西:

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

如果你不想要它们,你可以用regExp写一个函数。下面的例子告诉只在磁盘上写入不包含字符串hot-update的文件。

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

相关问题