How to watch and reload index.html by using webpack-dev-server together with html-webpack-plugin #100

elaijuh · 2015-10-17T17:30:16Z

Every time I change the index.html template, I need to re-run the build task now.

jantimon · 2015-10-18T07:38:53Z

Hmm this should work - could you please try the 2.0 version or provide a demo?

viko16 · 2015-12-29T03:18:27Z

Same problem i met.

When i run webpack-dev-server --inline --hot --colors --content-base=./www, it prints webpack: bundle is now INVALID.

plugin version:

"html-webpack-plugin": "^2.1.0",
"webpack-dev-server": "^1.14.0"

uinz · 2016-02-25T07:10:30Z

Same

var webpack            = require('webpack')
  , path               = require('path')
  , HtmlWebpackPlugin  = require('html-webpack-plugin')
  , CleanWebpackPlugin = require('clean-webpack-plugin')
  , ExtractTextPlugin  = require("extract-text-webpack-plugin")
  , autoprefixer       = require('autoprefixer')

module.exports = {
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
    contentBase: './app',
    port: 8080,
  },

  entry: [
    path.resolve(__dirname, 'app/src/'),
  ],

  output: {
    path: path.resolve(__dirname, 'app/build/'),
    filename: './js/bundle?[hash].js'
  },

  module: {
    loaders: [
      {
        test: /\.jade$/,
        loader: 'jade'
      },

      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'app/src'),
        exclude: /node_modules/,
        loader: 'babel'
      },

      {
        test: /\.styl$/,
        include: path.resolve(__dirname, 'app/src'),
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader!stylus-loader")
      },

      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader")
      },
    ]
  },

  postcss: [ autoprefixer ],

  plugins: [
    new ExtractTextPlugin("./css/style?[hash].css"), // separate css

    new CleanWebpackPlugin(['app/build'], {
      verbose: true, 
      dry: false
    }),

    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './app/src/jade/index.jade',
      inject: 'body',
    }),

    new HtmlWebpackPlugin({
      filename: 'homepage.html',
      template: './app/src/jade/homepage.jade',
      inject: 'body',
    }),
  ]
}

webpack-dev-server --devtool eval --progress --hot --colors --host 0.0.0.0 --content-base app

webpack: bundle is now INVALID.
Hash: 020f485713bee7553bdf  
Version: webpack 1.12.14
Time: 154ms
                               Asset       Size  Chunks             Chunk Names
./css/style?020f485713bee7553bdf.css    1.93 kB       0  [emitted]  main
                          index.html  297 bytes          [emitted]  
chunk    {0} ./js/bundle?020f485713bee7553bdf.js, ./css/style?020f485713bee7553bdf.css (main) 213 kB
     + 79 hidden modules
Child html-webpack-plugin for "homepage.html":
    chunk    {0} homepage.html 6.11 kB
         + 3 hidden modules
Child html-webpack-plugin for "index.html":
    chunk    {0} index.html 6.1 kB [rendered]
        [0] ./~/html-webpack-plugin/lib/loader.js!./app/src/jade/index.jade 394 bytes {0} [built]
         + 2 hidden modules
webpack: bundle is now VALID.

  "devDependencies": {
    "autoprefixer": "^6.3.3",
    "babel-loader": "^6.2.3",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "clean-webpack-plugin": "^0.1.8",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "html-webpack-plugin": "^2.9.0",
    "jade": "^1.11.0",
    "jade-loader": "^0.8.0",
    "jquery": "^2.2.1",
    "normalize.css": "^3.0.3",
    "postcss-loader": "^0.8.1",
    "precss": "^1.4.0",
    "style-loader": "^0.13.0",
    "stylus-loader": "^1.5.1",
    "webpack-dev-server": "^1.14.1"
  }

epoch · 2016-05-12T12:51:41Z

"html-webpack-plugin": "^2.8.1",
"webpack-dev-server": "^1.14.1"

getting the same error

usergit · 2016-10-17T22:20:16Z

any updates to this issue?

jantimon · 2016-10-18T07:27:37Z

@usergit I am sorry but I really don't get the problem - every thing works as expected.

You change the html file, webpack sets the state to invalid and recompiles everything.

Only hot-module replacement is not possible.

viko16 · 2016-11-02T06:32:06Z

😨 unfortunately and this is the things i met.

When i change the html file, webpack does recompiled but page still have no refresh action.

  "devDependencies": {
    "html-webpack-plugin": "^2.24.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.2"
  }

  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'index.html')
    })
  ]

webpack-dev-server --inline --hot

jantimon · 2016-11-02T12:11:36Z

@viko16 there is no auto refresh by now - would be open for pull requests :)

MichalLytek · 2016-11-06T19:10:36Z

Temporary solutions are always the best 😆
Just require template in your entry file (app.js or sth):

import "./index.pug";

And you will have fast bundling time + reload but don't do this on production 😉

pspeter3 · 2016-11-17T15:19:37Z

It seems like Vue has solved this with https://github.com/vuejs-templates/webpack/blob/master/template/build/dev-server.js#L32-L37

jantimon · 2016-11-18T08:19:35Z

@pspeter3 wow that's nice - is there any way we could move this into this plugin?

pspeter3 · 2016-11-18T17:02:58Z

@jantimon I can try. I'll fork and submit a PR

pspeter3 · 2016-11-18T22:23:13Z

So I think the issue is that the plugin doesn't have access to the hot middleware plugin. It seems like the Vue dev server is doing the best thing.

Silentz0r · 2016-12-01T02:48:32Z

@19majkel94 Can you elaborate how you did it? i did import in my entry and did not reload the html.

milewski · 2017-01-07T07:15:55Z

i came a long way defeating one by one.. .ts, .babel, .scss.... and then i got stuck at .html, no hot reload for this on vanilla html.... nor even auto reload.. any way to get this working some other how ?

jantimon · 2017-01-07T11:35:39Z

It looks like that this is really hard to accomplish on compiler level but could be accomplished on the level of the dev-server. I guess it might also be possible to write a custom html-webpack-hmr-plugin which would introduce a new entry point e.g. using https://github.com/jantimon/extra-entry-webpack-plugin which does the hmr - maybe you want to start working on that?

windmaomao · 2017-01-31T16:59:13Z

Running it doesn't generate the /dist folder files. Instead, if i just run webpack --watch and lite-server, it works for me. For some reason webpack-dev-server does kick off html plugin, but for some reason the plugin doesn't write to /dist afterwards.

jantimon · 2017-02-01T07:43:35Z

@windmaomao that's completely unrelated to this thread - it's a performance boost by webpack-dev-server and can be solved by https://github.com/jantimon/html-webpack-harddisk-plugin or by setting the output filesystem - for further information please open a stackoverflow question

jacekk015 · 2017-02-09T19:20:05Z

In case if needed, here's working setup with hot reload of .js and index.html
For hot reload development:
npm run dev

For production:
npm run build

webpack.config.js

var webpack = require('webpack')
var 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/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    resolve: {},
    devServer: {
        historyApiFallback: true,
        noInfo: true
    },
    performance: {
        hints: false
    },
    devtool: '#eval-source-map'
}

if (process.env.NODE_ENV !== 'production') {
    module.exports.plugins = (module.exports.plugins || []).concat([
        new HtmlWebpackPlugin({
            template: './index.html'
        })
    ])
}

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true,
            debug: false
        })
    ])
}

package.json

  "name": "test1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "mithril": "^1.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-react-jsx": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "cross-env": "^3.1.4",
    "file-loader": "^0.10.0",
    "html-webpack-plugin": "^2.28.0",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
  }
}

/src/main.js

if (process.env.NODE_ENV !== 'production') {
    require('file-loader!../index.html')
}

test1_complete_package2.zip

milewski · 2017-07-26T04:41:53Z

i think yet a better solution was doing something like this

devServer: {
    contentBase: [ PathToTheFolderWhereYourHTMLsLives ],
    watchContentBase: true
}

this approach doesnt require any "requiring" inside js files...

jacekk015 · 2017-07-26T15:38:01Z

My approach is a hot reload and not full page reload.
If you change little piece of .js code you don't need to reload whole page.

milewski · 2017-07-27T02:06:39Z

Again, I just hate the fact that I need to add 'unnecessary' stuff in my js entries.. And somehow remember to remove that.. Or just leave there... Yet the one I showed still has HMR with js but with the html files will do a full page reload yes. Both ways not ideal.. Would rather study a possibility to create a plugin to inject html webpack plug-in outputs as an webpack entry and somehow get it done automatically...

youwenda · 2017-09-06T03:35:06Z

Using reload-html-webpack-plugin is done !!

cncuckoo · 2017-09-12T03:44:55Z

When you change the templates, the html-webpack-plugin does recompiling them, but it just not to re-write the new generated html files to the disk. Given this, even if the devServer reloading the pages, the result will not change. If you are in this case, try this plugin:

https://github.com/jantimon/html-webpack-harddisk-plugin

avdd · 2018-02-25T11:51:25Z

No need to write to disk or open more sockets: just use the html-webpack-plugin-after-emit event to trigger a content-changed message from the devserver::

let devServer; // set below
module.exports = {
  plugins: [reloadHtml],
  devServer: {
    before(app, server) {
      devServer = server;
    }
  }
}
function reloadHtml() {
  this.plugin('compilation',
    thing => thing.plugin('html-webpack-plugin-after-emit', trigger));
  const cache = {};
  function trigger(data, callback) {
    const orig = cache[data.outputName];
    const html = data.html.source();
    // plugin seems to emit on any unrelated change?
    if (orig && orig !== html)
      devServer.sockWrite(devServer.sockets, 'content-changed');
    cache[data.outputName] = html;
    callback();
  }
}

I'm sure someone can make a nice plugin out of this with more style, but this works for me.

sebastianseilund · 2018-04-23T21:39:54Z

reload-html-webpack-plugin doesn't seem to work with Webpack 4.

Thanks @avdd for the quick work-around, which worked for me (even though I wish this somehow worked out of the box between html-webpack-plugin and webpack-dev-server).

If anyone else runs into Webpack 4's deprecation warning:

DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

You can change reloadHtml to this:

function reloadHtml() {
  const cache = {}
  const plugin = {name: 'CustomHtmlReloadPlugin'}
  this.hooks.compilation.tap(plugin, compilation => {
    compilation.hooks.htmlWebpackPluginAfterEmit.tap(plugin, data => {
      const orig = cache[data.outputName]
      const html = data.html.source()
      // plugin seems to emit on any unrelated change?
      if (orig && orig !== html) {
        devServer.sockWrite(devServer.sockets, 'content-changed')
      }
      cache[data.outputName] = html
    })
  })
}

entr · 2018-05-09T12:43:53Z

@sebastianseilund not able to get this working compilation.hooks.htmlWebpackPluginAfterEmit.tap(..) produces:

TypeError: Cannot read property 'tap' of undefined

and indeed Object.keys( compilation.hooks ) is:

[ 'buildModule',
  'rebuildModule',
  'failedModule',
  'succeedModule',
  'finishModules',
  'finishRebuildingModule',
  'unseal',
  'seal',
  'optimizeDependenciesBasic',
  'optimizeDependencies',
  'optimizeDependenciesAdvanced',
  'afterOptimizeDependencies',
  'optimize',
  'optimizeModulesBasic',
  'optimizeModules',
  'optimizeModulesAdvanced',
  'afterOptimizeModules',
  'optimizeChunksBasic',
  'optimizeChunks',
  'optimizeChunksAdvanced',
  'afterOptimizeChunks',
  'optimizeTree',
  'afterOptimizeTree',
  'optimizeChunkModulesBasic',
  'optimizeChunkModules',
  'optimizeChunkModulesAdvanced',
  'afterOptimizeChunkModules',
  'shouldRecord',
  'reviveModules',
  'optimizeModuleOrder',
  'advancedOptimizeModuleOrder',
  'beforeModuleIds',
  'moduleIds',
  'optimizeModuleIds',
  'afterOptimizeModuleIds',
  'reviveChunks',
  'optimizeChunkOrder',
  'beforeChunkIds',
  'optimizeChunkIds',
  'afterOptimizeChunkIds',
  'recordModules',
  'recordChunks',
  'beforeHash',
  'contentHash',
  'afterHash',
  'recordHash',
  'record',
  'beforeModuleAssets',
  'shouldGenerateChunkAssets',
  'beforeChunkAssets',
  'additionalChunkAssets',
  'additionalAssets',
  'optimizeChunkAssets',
  'afterOptimizeChunkAssets',
  'optimizeAssets',
  'afterOptimizeAssets',
  'needAdditionalSeal',
  'afterSeal',
  'chunkHash',
  'moduleAsset',
  'chunkAsset',
  'assetPath',
  'needAdditionalPass',
  'childCompiler',
  'normalModuleLoader',
  'optimizeExtractedChunksBasic',
  'optimizeExtractedChunks',
  'optimizeExtractedChunksAdvanced',
  'afterOptimizeExtractedChunks' ]

webpack 4.8
html-webpack-plugin 3.20

entr · 2018-05-09T13:24:27Z

NVM, it was a result of bad ordering in webpack-merge, where our custom reloadHtml plugin was coming before HtmlWebpackPlugin

lock · 2018-06-08T14:05:10Z

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

jantimon closed this as completed Oct 22, 2015

avdd mentioned this issue Feb 25, 2018

Page does not refresh on HTML change when HMR is on webpack/webpack-dev-server#1271

Closed

2 tasks

lock bot locked as resolved and limited conversation to collaborators Jun 8, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to watch and reload index.html by using webpack-dev-server together with html-webpack-plugin #100

How to watch and reload index.html by using webpack-dev-server together with html-webpack-plugin #100

elaijuh commented Oct 17, 2015

jantimon commented Oct 18, 2015

viko16 commented Dec 29, 2015

uinz commented Feb 25, 2016

epoch commented May 12, 2016 •

edited

Loading

usergit commented Oct 17, 2016

jantimon commented Oct 18, 2016

viko16 commented Nov 2, 2016

jantimon commented Nov 2, 2016

MichalLytek commented Nov 6, 2016 •

edited

Loading

pspeter3 commented Nov 17, 2016

jantimon commented Nov 18, 2016

pspeter3 commented Nov 18, 2016

pspeter3 commented Nov 18, 2016

Silentz0r commented Dec 1, 2016

milewski commented Jan 7, 2017 •

edited

Loading

jantimon commented Jan 7, 2017 •

edited

Loading

windmaomao commented Jan 31, 2017

jantimon commented Feb 1, 2017

jacekk015 commented Feb 9, 2017 •

edited

Loading

milewski commented Jul 26, 2017

jacekk015 commented Jul 26, 2017

milewski commented Jul 27, 2017

youwenda commented Sep 6, 2017

cncuckoo commented Sep 12, 2017 •

edited

Loading

avdd commented Feb 25, 2018 •

edited

Loading

sebastianseilund commented Apr 23, 2018

entr commented May 9, 2018

entr commented May 9, 2018

lock bot commented Jun 8, 2018

How to watch and reload index.html by using webpack-dev-server together with html-webpack-plugin #100

How to watch and reload index.html by using webpack-dev-server together with html-webpack-plugin #100

Comments

elaijuh commented Oct 17, 2015

jantimon commented Oct 18, 2015

viko16 commented Dec 29, 2015

uinz commented Feb 25, 2016

epoch commented May 12, 2016 • edited Loading

usergit commented Oct 17, 2016

jantimon commented Oct 18, 2016

viko16 commented Nov 2, 2016

jantimon commented Nov 2, 2016

MichalLytek commented Nov 6, 2016 • edited Loading

pspeter3 commented Nov 17, 2016

jantimon commented Nov 18, 2016

pspeter3 commented Nov 18, 2016

pspeter3 commented Nov 18, 2016

Silentz0r commented Dec 1, 2016

milewski commented Jan 7, 2017 • edited Loading

jantimon commented Jan 7, 2017 • edited Loading

windmaomao commented Jan 31, 2017

jantimon commented Feb 1, 2017

jacekk015 commented Feb 9, 2017 • edited Loading

milewski commented Jul 26, 2017

jacekk015 commented Jul 26, 2017

milewski commented Jul 27, 2017

youwenda commented Sep 6, 2017

cncuckoo commented Sep 12, 2017 • edited Loading

avdd commented Feb 25, 2018 • edited Loading

sebastianseilund commented Apr 23, 2018

entr commented May 9, 2018

entr commented May 9, 2018

lock bot commented Jun 8, 2018

epoch commented May 12, 2016 •

edited

Loading

MichalLytek commented Nov 6, 2016 •

edited

Loading

milewski commented Jan 7, 2017 •

edited

Loading

jantimon commented Jan 7, 2017 •

edited

Loading

jacekk015 commented Feb 9, 2017 •

edited

Loading

cncuckoo commented Sep 12, 2017 •

edited

Loading

avdd commented Feb 25, 2018 •

edited

Loading