webpack-dev-server 不重新编译输出文件

Question

这是我的 webpack 文件，没什么特别的const path = require('path')module.exports = {    entry: './src/index.js',    output: {        path: path.resolve(__dirname, 'public/scripts'),        publicPath: '/public/scripts/',        filename: 'bundle.js'    },    module: {        rules: [{            test: /\.js$/,            exclude: /node_modules/,            use: {                loader: 'babel-loader',                options: {                    presets: ['env']                }            }        }]    },    devServer: {        contentBase: path.resolve(__dirname, 'public'),        watchContentBase : true,         publicPath: '/scripts/'    }}但是，当我运行“npm run webpack-dev-server”时，我得到正常的 node.js 输出，但在进行新更改时网站不会更新。我删除了bundle.js 文件，当我再次运行它时，出现错误“找不到bundle.js”。我发现运行此命令时，bundle.js 根本没有被重新编译。如果这有什么区别的话，我在Windows上。任何帮助，将不胜感激。编辑：下面是我的文件夹结构。

Answer 1

您需要为 devServer 使用 watchContentBase 选项：

watchContentBase:true

还建议为模块替换设置 hot:true 和 open:true - 这样当您运行开发服务器时，它会自动在默认浏览器中打开您的站点。

编辑

经过长时间的聊天，结果如下：

仍然“实时重新加载”您应该使用的页面

watchContentBase

但在这种情况下还有其他问题 - devServer 中的 publicPath 和 outputPath 不一样，然后index.html应该引用/public/scripts下的bundle.js

新的 webpack.config.js：

const path = require('path')

    

    module.exports = {

        entry: './src/index.js',

        output: {

            path: path.resolve(__dirname, '/public/scripts'),

            publicPath: '/public/scripts',

            filename: 'bundle.js'

        },

        module: {

            rules: [{

                test: /\.js$/,

                exclude: /node_modules/,

                use: {

                    loader: 'babel-loader',

                    options: {

                        presets: ['env']

                    }

                }

            }]

        },

        devServer: {

            contentBase: path.resolve(__dirname, 'public'),

            watchContentBase : true, 

            publicPath: '/public/scripts'

        }

    }

Index.html 中捆绑包的新 src： /public/scripts/bundle.js