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 根本没有被重新编译。

如果这有什么不同，我在窗户上。 任何帮助，将不胜感激。

编辑：下面是我的文件夹结构。

Answer 1

您需要为 devServer 使用 watchContentBase 选项：

watchContentBase:true

还建议为模块补充和 open:true 设置 hot:true - 这样当您运行开发服务器时，它会自动在默认浏览器中打开您的站点。 您可以在此处找到有关 devServer 选项的更多信息 - https://webpack.js.org/configuration/dev-server/#devserverwatchoptions-

编辑

因此，在聊天中经过相当长的对话后，结果如下：

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

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 中 bundle 的新 src： /public/scripts/bundle.js