WebPACKのHMRは、私が今、最も単純なプロジェクト構造を持つHTML

Question

Minimalistic repository for problem testing

をリロードしませんスタイルを編集し、webpack.config.jsのエントリとしてapp.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' 
} 

ランのWebPACK-devのサーバー：その後webpack-dev-server --hot --inline

私はではなく、HTMLのために、CSSの素敵なホット交換を得ました。私がindex.pugテンプレートファイルを変更すると、コンソールメッセージがapp.jsの必要なpug-templateに依存するかどうかがわかります。

ファイルapp.js（WebPACKのエントリポイント）の代わりにパグの純粋なHTMLで

// 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'); 

は同じです。どのように修正することができますか？

Answer 1

IDEを使用していますか？ Intelijの場合：設定▶︎システム設定▶︎同期▶safe安全書き込みを無効にします。あなたに役立つかもしれません。ありがとう

Answer 2

セットアップに何が問題なのかよく分かりませんが、一般的にうまくいくはずです。 ここでは、HMRを使ったhtmlとcssの両方の注入がうまくいく、最小限のwebpack設定があります。それが欲しいと思っています。

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' 
     }) 
    ], 
};