Reload on HTML changes in webpack

Question

I'm trying to wrap my head around webpack and how it processes resources.

Here's my project structure:

/dist
  (files that can be pushed to server)
/src
  /styles
    s.less
  /js
    main.js
    a.js
  /img
    splash.png
  profile.html
entry.js (webpack entry file)

What I'm trying to do:

• LESS files are compiled to CSS and put into bundle along with JS
• Images are either copied /src/img -> /dist/img with their original names (good for big images) or base64'd and put into bundle (good for icons)
• htmls are copied /src/ -> /dist/ with their original names
• every time I change html or anything in the styles or js, it does above steps and reloads page in browser

Basically I need to be able to see current state of application without ever touching the browser window

What i've tried

I ran

• webpack-dev-server --content-base /dist --hot-loading (with and without --hot-loading), but this doesn't reload on CSS/LESS changes

• above along with webpack --watch, this solved CSS reloading, but I still need to copy html and images to /dist manually

• above two along with gulp task that watches html and images and copies them to dist. This solved copying problem, but it doesn't notify webpack-dev-server of changes so I need to F5 each time I change HTML; it defeats the whole purpose of hot reloading.

• I tried adding file-loader but this doesn't work for HTML since it produces JS script that requires html file

Here's my entry.js

require("./src/js/main");
require("./src/css/s.less");

And webpack.config.js:

var path = require('path');
var webpack = require("webpack");
module.exports = {
    entry: "./entry.js",
    output: {
        path: path.join(__dirname,'/dist/js'),
        filename: "bundle.js"
    },
    plugins: [
        new webpack.ProvidePlugin({
            $ : "jquery",
            jQuery : "jquery",
            "window.jQuery" : "jquery",
            "root.jQuery" : "jquery"
        })
    ],
    module: {
        loaders: [
            {
                test: /\.less$/,
                loader: "style!raw!less"
            }
        ]
    }
};

---

Is there a way to solve this using webpack only?

Answer 1

I guess the problem is that your output.path /dist/js is not matching with --content-base /dist [root directory of webpack-dev-server].

You can either try changing the output.path to /dist and then link the bundled output js in html or change the content base to /dist/js

Here is the link for your reference: https://stackoverflow.com/a/47658586/1681972