webpack开发服务器不热重装(webpack 5)

Question

我对webpack这件事很陌生，所以我浏览了Webpack 5的在线教程和文档，但我不知道如何解决这个问题。

档案结构：

dist
node_modules
src
    modules
        js files
    style
        style.css
    index.html
    index.js
package.json
package-lock.json
webpack.config.js

Webpack：

const { appendFile } = require("fs");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: 'development', 
    entry: {
        main: path.resolve(__dirname,'src/index.js'),
    },
    output: {
        path:path.resolve(__dirname,'dist'),
        filename: 'app.bundle.js',
        hashFunction: 'xxhash64',
    },
    devtool: 'inline-source-map',
    devServer: {
        static: {
            directory:path.resolve(__dirname,'dist'),
            watch:true,
        },
        port: 8080,
        open: true,
        hot: true,
    },
    //loaders
    module: {
        rules: [
            {test: /\.css$/, use:['style-loader','css-loader']}
        ]
    },
    //plugins
    plugins: [new HtmlWebpackPlugin({
        title: 'To Do List',
        filename: 'index.html',
        template: path.resolve(__dirname,"./src/index.html")
    })]
}

当我运行"npm“时，我的网页将使用HTML/CSS/JS打开，但是当我对代码进行更改时，不会发生任何更改(没有重新编译)。

另外，发生的另一个奇怪的问题是，我的导入语句在保存时被删除在index.js文件中，不确定这与此有关还是仅与VScode问题有关。

Answer 1

在devServer.static.directory中有一个地方可以纠正:应该是./，而不是dist。下面是一组devServer的设置，这些设置为我解决了问题：

devServer: {
   port: 8080,
   hot: "only",
   static: {
     directory: path.join(__dirname, './'),
     serveIndex: true,
   },
 },

Answer 2

我也在和HMR做斗争，结果几乎什么都没有，这实在令人失望，除了我用这种方法：

devServer: {
    port: 8080,
    hot: false,
    liveReload: true,
    watchFiles: ['dist/**/*'],
    open: ['http://localhost:8080/html/index.html']
}

基本上，我切换到liveReload以实现相同的结果，它现在起作用了。

你不需要使用‘打开’，但是我的html位于dist/html/index.html中，我用一个链接打开了那个html窗口。