我的Webpack设置出现问题。在我设置开发服务器的“ index”参数之前,一切工作正常。现在,当我对任何代码文件进行更改时,Webpack都会重新编译,但浏览器不会重新加载。
我现在有两个模板文件,当我完成一个模板的工作并想转到下一个文件时,我想通过更新此参数来逐个处理它们。这是我的配置:
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:{
'index' : './src/index.js',
'results' : './src/results.js',
},
output: {
filename: 'script.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new MiniCssExtractPlugin({
publicPath: path.resolve(__dirname, 'dist'),
filename: 'css/[name].css'
}),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
/*hash: true,*/
template: './src/index.html'
}),
new HtmlWebpackPlugin({
/*hash: true,*/
template: './src/results.html',
filename: 'results.html',
chunks: ['results']
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'css-hot-loader'},
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
]
},
{
test: /\.(png|svg|jpe?g|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name:'img/[name].[ext]',
publicPath: '/'
}
}
]
},
{
test: /\.(otf|ttf|eot|woff|woff2)$/,
use: [
{
loader: 'file-loader',
options: {
name:'fonts/[name].[ext]',
publicPath: '/'
}
}
]
},
{
test: /\.html$/,
use: ['html-loader']
},
]
},
devServer: {
contentBase: 'dist',
hot: true,
watchContentBase: true,
index: 'results.html'
}
}
有什么我可以尝试修复的吗?我也不会反对一种更清洁的方法,但是我认为这是非常简单直接的。