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 cannot be found'。我发现当运行执行此命令时 bundle.js 根本没有被重新编译。

如果这有什么不同的话，我在 windows。任何帮助将不胜感激。

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

Answer 1

您需要为 devServer 使用 watchContentBase 选项：

watchContentBase:true

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

编辑

所以在聊天中进行了很长时间的对话后，结果如下：

还是到“live-reload”你应该用的页面

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

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

webpack-dev-server not recompiling the output file

javascript

node.js

webpack

babel-loader