我正在开发一个简单的静态HTML网站。目前，只有一个HTML文件index.html。使用Webpack 3.10.0，我已经配置了HMR。
当我更改其中一个样式表时，它会按预期重新编译和重新加载：
当我更改其中一个样式表时，它会按预期重新编译和重新加载：
[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.
但是当我修改index.html文件时，chrome控制台会显示正在重新编译，但在重新编译结束后，它会显示'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.
我正在使用单独的开发和生产Webpack配置文件，每个文件都会合并一个共同的配置。以下是共同的配置：
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
}
});