Webpack HMR не перезагружать HTML

Question

Minimalistic repository for problem testing

Я имею простую структуру проекта сейчас:

root 
    |-src 
    --|index.pug 
    --|--styles.css 
    --|--app.js 
    |-public 
    --|--img 

Пакеты:

"devDependencies": { 
    "css-loader": "^0.26.1", 
    "html-loader": "^0.4.4", 
    "html-webpack-plugin": "^2.26.0", 
    "pug": "^2.0.0-beta6", 
    "pug-loader": "^2.3.0", 
    "style-loader": "^0.13.1", 
    "webpack": "^1.14.0", 
    "webpack-dev-server": "^1.16.2" 
    } 

В app.js я просто требуют, чтобы стилей и используйте app.js как запись в файле webpack.config.js, которая выглядит так:

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

let src = { 
    app: path.resolve(__dirname,'src', 'app.js'), 
    public: path.resolve(__dirname, 'public'), 
    html: {template: path.resolve(__dirname, 'src', 'index.pug')} 
} 

module.exports = { 
    resolve: ['', '.js', '.css', '.pug'], // tried with or without it. Change nothing 
    entry: src.app, 
    output: { 
     path: src.public, 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.css$/, 
       loader: "style-loader!css-loader" 
      }, 
      { 
       test: /\.pug$/, 
       loader: 'pug-loader', 
       query: { 
        pretty: true 
       } 
      } 
     ] 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      title: 'index.html', 
      template: src.html.template 
     }) 
    ], 
    devServer: { 
     contentBase: src.public 
    }, 
    devtool: 'sourcemap' 
} 

Run WebPack-DEV-сервер: webpack-dev-server --hot --inline

После этого я получил хорошую горячую замену CSS, но не для HTML. Когда я изменяю файл шаблона index.pug, я получаю некоторые сообщения консоли, зависит от требуемого шаблона-шаблона в app.js или нет.

Файл app.js (WebPack точка входа)

// without requiring template got: 
    //[WDS] App updated. Recompiling... [WDS] App hot update... 
    // and nothing happens 
/* 
When template required I got these messages: 

[HMR] Cannot apply update. Need to do a full reload! 
(anonymous) @ dev-server.js:18 
hotApply @ bootstrap f3d9aa9…:390 
hotUpdateDownloaded @ bootstrap f3d9aa9…:303 
hotAddUpdateChunk @ bootstrap f3d9aa9…:283 
webpackHotUpdateCallback @ bootstrap f3d9aa9…:4 
(anonymous) @ 0.f3d9aa9….hot-update.js:1 
dev-server.js:19[HMR] Error: Aborted because 83 is not accepted 
    at hotApply (http://localhost:8080/bundle.js:391:31) 
    at hotUpdateDownloaded (http://localhost:8080/bundle.js:304:13) 
    at hotAddUpdateChunk (http://localhost:8080/bundle.js:284:13) 
    at webpackHotUpdateCallback (http://localhost:8080/bundle.js:5:12) 
    at http://localhost:8080/0.f3d9aa9823a803392473.hot-update.js:1:1 
And page reloads by refreshing. 
*/ 
    require('./index.pug'); 

    require('./styles.css'); 

С чистого HTML вместо мопса то же самое. Как это можно исправить?

Answer 1

Вы используете IDE? Для Intelij: Настройки ▶ ︎ Системные настройки ▶ ︎ Синхронизация ▶ ︎ отключить безопасную запись. Может быть, это поможет вам. Спасибо

Answer 2

Я не уверен, что не так с вашей настройкой, но она в целом должна работать. Вот минималистская конфигурация webpack, в которой работают как html, так и css-инъекции с HMR. Надеюсь, это поможет:

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

module.exports = { 
    entry: './src/main.js', 
    output: { 
     path: path.resolve(__dirname, './dist'), 
     publicPath: '/dist/', 
     filename: 'build.js' 
    }, 
    module: { 
     rules: [{ 
       test: /\.js$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/ 
      } 
     ] 
    }, 
    devtool: false, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: './index.html' 
     }) 
    ], 
};