How to watch index.html using webpack-dev-server and html-webpack-plugin
WebpackWebpack Dev-ServerWebpack Problem Overview
I am using webpack-dev-server for development with html-webpack-plugin to generated the index.html with revision sources. The thing is every time I change the index.html the bundle system will not rebuild again. I know the index is not in the entry, but is there a way to solve this?
Webpack Solutions
Solution 1 - Webpack
The problem is that index.html is not being watched by Webpack. It only watches those files that are "required" or "imported" somewhere in your code and the loaders are testing for.
The solution has two parts.
First require the index.html file in your entry point. Technically, you can require it anywhere in your application, but this is pretty convenient. I'm sure you could also just require your template if you were using a template with your html-webpack-plugin.
I required my index.html in my index.js file, which is my entry point:
require('./index.html')
const angular = require('angular')
const app = angular.module('app', [])
//...so on and so forth
Finally, install and add the raw-loader with all of your other loaders, to your Webpack config file. Thus:
{
test: /\.html$/,
loader: "raw-loader"
}
The raw loader will convert just about any file that is "required" into a string of text and, then, Webpack will watch it for you and refresh the dev-server every time you make a change.
Neither Webpack, itself, nor your program will actually do anything with the index.html file (or template) at the stage in which it is loaded. It's completely unnecessary for your production or testing environments, so just for good measure, I only add it if I'm running the development server:
/* eslint no-undef: 0 */
if (process.env.NODE_ENV === 'development') {
require('./index.html')
}
const angular = require('angular')
const app = angular.module('app', [])
//...so on and so forth
In theory you can "require in" a bunch of other static html files you'd like it to watch. ...or text files for that matter. I use the raw-loader, myself, for Angular directive templates, but I don't have to add those to the beginning of my entry point. I can just require inside the directive template property, like this:
module.exports = function(app) {
app.directive('myDirective', function(aListItem) {
return {
template: require('./myTemplate.html'),
restrict: 'E',
controller: function($scope) {
$scope.someThingThatGoesInMyTemplate = 'I love raw-loader!'
}
}
})
}
Solution 2 - Webpack
Simply add watchContentBase: true
to your devServer
's config. webpack-dev-server will watch for changes in all files that are located in contentBase
dir. Here we watch all files inside ./src
webpack.config.js:
...
devServer: {
port: 8080,
contentBase: './src',
watchContentBase: true
}
Solution 3 - Webpack
With webpack > 5.0
, use watchFiles
option
devServer: {
open: true,
watchFiles: ['src/**/*'],
},
Solution 4 - Webpack
From webpack > 5.x
, there are no contentBase
and watchContentBase
options
Instead you can do this:
devServer: {
watchFiles:['src/**/*'] // to detect changes on all files inside src directory
}
Solution 5 - Webpack
If you are building it using just npx webpack --watch
, you can set cache to false to generate the file everytime.
new HtmlWebpackPlugin({
cache: false,
})
Read this link for further customisation, htmlwebpackplugin.
Solution 6 - Webpack
Another solution is to use file-loader to import html file at the entry javascript file.
import 'file-loader!../templates/index.html';
You can have your html-webpack-plugin configuration as usual
plugins: [
new HtmlWebPackPlugin({
template: path.resolve(__dirname, 'src/templates/index.html'),
filename: path.resolve(__dirname, 'dist/index.html'),
files: {
css: ['style.css'],
js: ['main.js'],
}
})
]
This does not write anything to the disc when webpack-dev-server is running