2017-08-05 276 views
0

控制檯輸出Ignored an update to unaccepted module錯誤,如何解決?忽略對未接受模塊的更新

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

整個控制檯消息是:

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

以下是我的代碼:

webpack.config.js:

const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const CleanWebpackPlugin = require('clean-webpack-plugin'); 
const webpack = require('webpack'); 

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

./src/ index.js:

import _ from 'lodash'; 
import printMe from './print.js'; 

if(module.hot) { 
    module.hot.accept('./print.js', function() { 
    console.log('Accepting the updated printMe module!'); 

    document.body.removeChild(element); 
    element = component(); 
    document.body.appendChild(element); 
    }); 
} 

let element = component(); 

function component() { 
    const element = document.createElement('div'); 
    const btn = document.createElement('button'); 

    element.innerHTML = _.join(['Hell', 'webpack'], ' '); 

    btn.innerHTML = 'Click me and check the console!'; 
    btn.onclick = printMe; 

    element.appendChild(btn); 

    return element; 
} 

document.body.appendChild(element); 

./src/print.js:

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

的package.json:

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

其他環境:

  • 節點V7.4.0
  • NPM 4.0.5
  • MACOS塞拉利昂10.12
  • 鉻v59.0.3071.115

請給我幫忙。

回答

0

經過調試和測試,我想我知道答案。

Webpack-dev-server爲每個條目創建一個客戶端腳本。

當我不寫任何HMR接口,控制檯輸出是這樣的:

enter image description here

這似乎是爲app(./src/index.js)客戶端腳本,index.js將接受其依賴的變化 - print.js

但是對於print(./src/print.js)客戶端腳本,沒有東西會接受其依賴項的更改 - print.js

因此,只有在index.js中寫入HMR接口才能工作到第二種情況,並且會拋出Ignored an update to unaccepted module錯誤。