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

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

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

我们不建议为了构建性能，但如果您需要此功能，可以查看write-file-webpack-plugin之类的插件。

Answer 2

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

output.publicPath配置密钥确定主机dev服务器上的内存中软件包的位置。因此，如果将publicPath设置为'dist'，那么webpack dev服务器所服务的index.html将需要一个脚本标记才能引用该包。

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

2 个答案: