Webpack HTML更改上的网页包无法实时重新加载
我有以下网页包配置Webpack HTML更改上的网页包无法实时重新加载,webpack,webpack-dev-server,nodemon,Webpack,Webpack Dev Server,Nodemon,我有以下网页包配置 const path = require('path'); const webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { devServer: { contentBase: path.resolve(__dirname, 'dist'), compress: true,
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
compress: true,
publicPath: 'dist',
writeToDisk: true,
open: true,
liveReload: true,
hotOnly: true,
},
entry: './src/js/app.js',
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist/js'),
publicPath: 'dist',
},
module: {
rules: [
{
test: /\.(scss)$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [require('autoprefixer')];
},
},
},
{
loader: 'sass-loader',
},
],
},
{
test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '../fonts/',
publicPath: '../fonts/',
},
},
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '../css/app.css',
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
],
};
当我编辑HTML文件时,它不会像nodemon那样重新加载浏览器
这些是我的脚本
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start:dev": "webpack-dev-server --hot --mode development"
},
将devServer.watchContentBase
设置为true
,如下所示:
module.exports = {
//...
devServer: {
watchContentBase: true
}
};
devServer.watchContentBase
布尔值
告诉开发服务器监视devServer.contentBase选项提供的文件。默认情况下,它处于禁用状态。启用时,文件更改将触发整个页面重新加载
(from)您无意中没有忘记HtmlWebpackPlugin?:)@格泽戈兹特。我正在dist
文件夹中创建.html文件。我只是想让它看,如果有什么变化,重新加载它。