[英]WebPack Hot Reload not working for HTML files
我可以在 webpack 中對我的 JS 和 SCSS 文件使用熱模塊替換,並且它工作正常,但是在嘗試熱重新加載 html 文件時遇到問題。 另一個對我有用的選項是將“watchContentBase:true”的屬性添加到我的開發服務器屬性中,但這會重新加載瀏覽器。 我想擁有它,所以當我保存文件時,瀏覽器會更新其內容而無需完全重新加載頁面。
<pre>
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
devServer: {
port: 8080,
contentBase: path.resolve(__dirname, './src'),
hot: true,
open: true,
},
mode: 'development',
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
{
test: /\.html$/i,
loader: 'html-loader',
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html',
}),
],
};
</pre>
======== Index Js entry point ========
import tripleMe from './tripleMe';
import './sass/main.scss';
if (module.hot) {
module.hot.accept();
}
在您使用的 Webpack 5 屬性contentBase
中,已切換為static
:
devServer: {
port: 8080,
hot: "only",
static: {
directory: path.join(__dirname, './'),
serveIndex: true,
},
},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.