I'm developing a simple, static HTML website. Right now, there's just one html file, index.html. Using Webpack 3.10.0. I have HMR configured.
When I make changes to one of my stylesheets, it recompiles and reloads as expected:
[WDS] App updated. Recompiling...
client?5cf9:222 [WDS] App hot update...
log.js:23 [HMR] Checking for updates on the server...
log.js:23 [HMR] Updated modules:
log.js:15 [HMR] - ./src/styles/app.scss
log.js:23 [HMR] App is up to date.
But when I make changes to the index.html the chrome console says it's recompiling, but at the end of the recompile it says 'nothing hot updated':
[WDS] App updated. Recompiling...
client?5cf9:222 [WDS] App hot update...
log.js:23 [HMR] Checking for updates on the server...
log.js:23 [HMR] Nothing hot updated.
log.js:23 [HMR] App is up to date.
I'm using separate dev & prod Webpack config files, with a common being merged in to each. Here's common:
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
module.exports = {
entry: {
app: './src/js/index.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
hot: true
},
output: {
filename: '[name].bundle.[hash].js',
// path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]'
// outputPath: 'img/',
// publicPath: 'img/'
}
}
]
},
{
test: /\.html$/,
use: ['html-loader']
},
{
test: /\.(s*)css$/,
use: ['style-loader', 'css-loader', {
loader: 'postcss-loader',
options: {
plugins: function() {
return [
require('precss'),
require('autoprefixer')
]
}
}
}, 'sass-loader']
}
]
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
hash: true,
title: 'Thinkpiece Partners',
template: 'src/html/index.html',
inject: 'body'
}),
new FaviconsWebpackPlugin({
// Your source logo
logo: './src/img/icon/icon-1024.png',
// The prefix for all image files (might be a folder or a name)
prefix: 'icons-[hash]/',
// Emit all stats of the generated icons
emitStats: true,
// The name of the json containing all favicon information
statsFilename: 'iconstats-[hash].json',
// Generate a cache file with control hashes and
// don't rebuild the favicons until those hashes change
persistentCache: true,
// Inject the html into the html-webpack-plugin
inject: true,
// favicon background color (see https://github.com/haydenbleasel/favicons#usage)
background: '#fff',
// favicon app title (see https://github.com/haydenbleasel/favicons#usage)
title: 'Thinkpiece Partners',
// which icons should be generated (see https://github.com/haydenbleasel/favicons#usage)
icons: {
android: true,
appleIcon: true,
appleStartup: true,
coast: false,
favicons: true,
firefox: true,
opengraph: false,
twitter: false,
yandex: false,
windows: false
}
})
]
}
and dev...
const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, "dist"),
port: 8000
}
});