Webpack-dev-server 不会在更改时构建文件

Question

所以我有以下 webpack 配置：

import path from 'path';

module.exports = {
    entry: {
    index: './dev/index.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: './dist/',
        filename: 'bundle.js',
        chunkFilename: '[id].bundle.js'
    },
    module:{
        loader:{
            test: /\.js$/,
            exclude:path.resolve(__dirname, "node_modules"),
            loader: 'js'
        }
    }

};

问题是，当我执行 webpack --watch 时，文件确实会在每次更改时构建在 /dist/ 文件夹中。然而，当我运行 webpack-dev-server 时，文件甚至没有构建。这是为什么？

请帮忙。

Answer 1

'webpack' 将您的包写入磁盘，而 'webpack-dev-server' 将包加载到内存中。因此，当运行后一个命令时，您不会看到新的 'bundle.js' 文件出现在您的文件系统中，即使您应该看到控制台输出报告捆绑和开发服务器的启动）。 =10=]

output.publicPath 配置键决定内存包在主机开发服务器上的位置。因此，如果您将 publicPath 设置为 'dist'，那么由 webpack 开发服务器提供的 index.html 将需要一个脚本标记来引用该包。

Answer 2

您没有看到文件发送到您的 dist 文件夹的原因是因为 webpack-dev-server 使用 内存文件系统

这允许在您的代码更改时进行极快的增量构建。这是我们有意设计的。您可以在浏览器中查看生成的代码，而无需引用这些文件。

为了构建性能，我们不推荐它，但如果您需要此功能，您可以查看 write-file-webpack-plugin 等插件。

Webpack-dev-server 不会在更改时构建文件

Webpack-dev-server doesn't build files on change

javascript

webpack

webpack-dev-server

webpack-style-loader