CODEWITHSUNDEEP
webpack
runners3431
runners3431

Reputation: 1455

How do you setup webpack to watch and reload for HTML pages?

How do you setup webpack to watch and reload for HTML pages?

I'm using webpack 1.

I saw something about requiring index.html into your entry point.

That just doesn't feel right to me.

Upvotes: 1

Views: 78

Answers (1)

Roman
Roman

Reputation: 21757

For direct reloading html file you might want to use HtmlWebpackPlugin.

For reloading page through changing its dependencies use the following:

  1. You have to set a wepack.config.js in the directory of your html page.

  2. Then you need to set any css, js, jsx file for compilation with the help of webpack dev server like the following:

    var path                = require('path');
var webpack             = require('webpack');
var glob                = require("glob");
var HtmlWebpackPlugin   = require('html-webpack-plugin');

module.exports = {
    entry: {
        app: glob.sync('./css.css')
    },
    output: {
        path: path.resolve(__dirname, 'dist/js/'),
        filename: 'bundle.[name].js'        
    }
};

  3. After that, you need to refer to this file in your html page. For example, in this case, you need to add in the html file

    <head>
    script src="../dist/js/bundle.css.js" ></script>
<head>

  4. Then you need to run webpack dev server.

  5. Finally, you may want to test if everything works by changing css.css file. If everything is OK you will see that compiling is working in the console of the browser and that page is reloading.

Upvotes: 1

Related Questions