webpack-dev-server --hot vs HotModuleReplacementPlugin()

Question

С помощью следующей конфигурации я смог получить горячую замену модуля, работающую с HotModuleReplacementPlugin(), но не используя -hot при запуске webpack-dev-сервера , Мой вопрос: почему?

Практически все последние руководства по настройке замены горячего модуля используют --hot, но это не работает для меня.

var webpack = require("webpack"); 
 
var path = require("path"); 
 
    
 
const config = { 
 
    entry: path.resolve(__dirname, 'app/index.js') , 
 
    output: { 
 
    path: path.resolve(__dirname, 'output'), 
 
    filename: 'bundle.js', 
 
    publicPath: "static/" 
 
    }, 
 
    module: { 
 
    rules: [ 
 
     {test: /\.(js|jsx)$/, use: 'babel-loader'} 
 
    ] 
 
    }, 
 
    plugins: [ 
 
    new webpack.HotModuleReplacementPlugin() 
 
    ] 
 

 
}; 
 
    
 
module.exports = config;

Я ссылается мой файл кода, как это.

<script src="static/bundle.js"></script> 

Я запускаю свой сервер так.

webpack-dev-server --inline --colors --progress 

Версия.

webpack-dev-server 2.3.0 
webpack 2.2.1 

С этой настройкой загрузка горячего модуля работает правильно. Если я удалю плагин и запустил сервер-app -hot (как я видел во многих примерах), загрузка моего горячего модуля не работает. Сервер регистрирует изменение, происходит пересылка, моя веб-страница выглядит как перезагрузка, но контент не обновляется.

Я доступ через http://localhost:8080/webpack-dev-server/index.html

структуры выглядит следующим образом + в node_modules каталог.

. 
├── app 
│   └── index.js 
├── index.html 
├── output 
│   ├── bundle.js 
│   └── index.js 
├── package.json 
└── webpack.config.js 

---

Update

также попытался добавить devServer к WebPack конфигурации, которая имеет тот же результат.

devServer: { 
compress: true, 
publicPath: "http://localhost:8080/static/", 
filename: "bundle.js", 
hot: true, 
inline: true 

}

Answer 1

Вы установили, что devServer свойство в вашем webpack.config.js файл?

devServer: { 
    ... 
    historyApiFallback: true, 
    hot: true, 
    inline: true, 
    compress: true, 
    ... 
}, 
plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    ... 
], 
... 

package.json

"scripts": { 
    "development": "webpack-dev-server --progress --colors" 
} 

Answer 2

Вы можете добавить это так:

entry: { 
    'app': [ 
     'webpack-dev-server/client?http://localhost:8080', 
     'webpack/hot/only-dev-server', 
     `${PATHS.SOURCE}/index.jsx` 
    ] 
}