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