忽略了对不接受模块的更新

Question

控制台输出Ignored an update to unaccepted module错误，如何解决？

\n\n

log.js:25 Ignored an update to unaccepted module ./src/print.js -> 1\nlog.js:25 [HMR] The following modules couldn\'t be hot updated: (They would need a full reload!)\nlog.js:25 [HMR]  - ./src/print.js\n

\n\n

整个控制台消息是：

\n\n

log.js:23 [HMR] Waiting for update signal from WDS...\nlog.js:23 [HMR] Waiting for update signal from WDS...\nclient?cd17:64 [WDS] Hot Module Replacement enabled.\nclient?cd17:64 [WDS] Hot Module Replacement enabled.\nclient?cd17:67 [WDS] App updated. Recompiling...\nclient?cd17:67 [WDS] App updated. Recompiling...\nclient?cd17:67 [WDS] App updated. Recompiling...\nclient?cd17:67 [WDS] App updated. Recompiling...\nclient?cd17:193 [WDS] App hot update...\nlog.js:23 [HMR] Checking for updates on the server...\nclient?cd17:193 [WDS] App hot update...\nlog.js:23 [HMR] Checking for updates on the server...\nlog.js:25 Ignored an update to unaccepted module ./src/print.js -> 1\n./node_modules/webpack/hot/log.js.module.exports @ log.js:25\nonUnaccepted @ only-dev-server.js:25\nhotApply @ bootstrap e5893b5\xe2\x80\xa6:437\n(anonymous) @ only-dev-server.js:20\nlog.js:25 [HMR] The following modules couldn\'t be hot updated: (They would need a full reload!)\n./node_modules/webpack/hot/log.js.module.exports @ log.js:25\n./node_modules/webpack/hot/log-apply-result.js.module.exports @ log-apply-result.js:12\n(anonymous) @ only-dev-server.js:39\nlog.js:25 [HMR]  - ./src/print.js\n./node_modules/webpack/hot/log.js.module.exports @ log.js:25\n(anonymous) @ log-apply-result.js:14\n./node_modules/webpack/hot/log-apply-result.js.module.exports @ log-apply-result.js:13\n(anonymous) @ only-dev-server.js:39\nlog.js:23 [HMR] Nothing hot updated.\nlog.js:23 [HMR] App is up to date.\nindex.js:8 Accepting the updated printMe module!\nlog.js:23 [HMR] Updated modules:\nlog.js:23 [HMR]  - ./src/print.js\nlog.js:23 [HMR] App is up to date.\n

\n\n

以下是我的代码：

\n\n

webpack.config.js：

\n\n

const path = require(\'path\');\nconst HtmlWebpackPlugin = require(\'html-webpack-plugin\');\nconst CleanWebpackPlugin = require(\'clean-webpack-plugin\');\nconst webpack = require(\'webpack\');\n\nmodule.exports = {\n  devtool: \'inline-source-map\',\n  devServer: {\n    contentBase: path.resolve(__dirname, \'dist\'),\n    hotOnly: true,\n  },\n  entry: {\n    app: \'./src/index.js\',\n    print: \'./src/print.js\'\n  },\n  output: {\n    filename: \'[name].bundle.js\',\n    path: path.resolve(__dirname, \'dist\'),\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n      title: \'Hot Module Replacement\',\n      filename: \'index.html\',\n    }),\n    new CleanWebpackPlugin([\'dist\']),\n    new webpack.HotModuleReplacementPlugin(),\n    new webpack.NamedModulesPlugin(),\n  ],\n};\n

\n\n

./src/index.js：

\n\n

import _ from \'lodash\';\nimport printMe from \'./print.js\';\n\nif(module.hot) {\n  module.hot.accept(\'./print.js\', function() {\n    console.log(\'Accepting the updated printMe module!\');\n\n    document.body.removeChild(element);\n    element = component();\n    document.body.appendChild(element);\n  });\n}\n\nlet element = component();\n\nfunction component() {\n  const element = document.createElement(\'div\');\n  const btn = document.createElement(\'button\');\n\n  element.innerHTML = _.join([\'Hell\', \'webpack\'], \' \');\n\n  btn.innerHTML = \'Click me and check the console!\';\n  btn.onclick = printMe;\n\n  element.appendChild(btn);\n\n  return element;\n}\n\ndocument.body.appendChild(element);\n

\n\n

./src/print.js：

\n\n

export default function printMe() {\n  //console.log(\'I get called from print.js!\');\n  console.log(\'Updating print.js...\')\n}\n

\n\n

包.json：

\n\n

{\n  "name": "webpack-demo",\n  "version": "1.0.0",\n  "description": "",\n  "main": "index.js",\n  "scripts": {\n    "build": "webpack",\n    "start": "webpack-dev-server --open"\n  },\n  "keywords": [\n    "webpack",\n    "demo"\n  ],\n  "author": "",\n  "license": "MIT",\n  "dependencies": {\n    "lodash": "^4.17.4"\n  },\n  "devDependencies": {\n    "clean-webpack-plugin": "^0.1.16",\n    "html-webpack-plugin": "^2.29.0",\n    "webpack": "^3.4.1",\n    "webpack-dev-server": "^2.6.1"\n  }\n}\n

\n\n

其他环境：

\n\n

\n
• 节点 v7.4.0
\n
• npm 4.0.5
\n
• macOS 塞拉利昂 10.12
\n
• 浏览器 v59.0.3071.115
\n

\n\n

请给我帮助。

\n

Answer 1

经过调试和测试，我想我知道答案了。

Webpack-dev-server 为每个条目创建一个客户端脚本。

当我不编写任何 HMR 界面时，控制台输出如下：

看来对于app(./src/index.js)客户端脚本来说，index.js将接受其依赖项的更改 - print.js。

但对于print(./src/print.js)客户端脚本来说，没有任何东西会接受其依赖项的更改 - print.js。

因此，仅编写一个 HMR 接口index.js对第二种情况不起作用，并且会引发Ignored an update to unaccepted module错误。