我可以在我的js和scss文件的webpack中使用热模块替换,它工作得很好,但我在尝试热重新加载html文件时遇到了问题。另一个对我有效的选项是将“watchcontentbase:true”属性添加到我的dev服务器属性中,但这会重新加载浏览器。我希望这样,当我保存文件时,浏览器会在不完全重新加载页面的情况下更新其内容。
<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>
暂无答案!
目前还没有任何答案,快来回答吧!