Webpack-dev-server 即使在显示捆绑有效消息后也不会捆绑

Webpack-dev-server not bundling even after showing bundle valid message

本文关键字：消息 有效 显示 Webpack-dev-server      更新时间：2023-09-26

>我已经用 webpack 设置了一个基本的 react 应用程序，但我无法让webpack-dev-server正常运行。

我已经全局安装了webpack-dev-server并尝试运行命令sudo webpack-dev-server --hot因为需要热重载。

该项目似乎只需 webpack cmd 即可正常工作。它内置到我的构建文件夹中，我可以通过某些服务器让它工作，但它不适用于webpack-dev-server.从终端来看，很明显构建过程已经完成，没有抛出任何错误 [ webpack: bundle is now VALID. ]，并且它实际上可以正确观看，因为在任何更改中它都会触发构建过程，但它并没有真正被构建 [它不为我的捆绑包提供服务.js]。我尝试更改整个配置，但仍然无法解决问题。

如果有人能帮忙，将不胜感激。

以下是我的 webpack.config.js 文件。 

var path = require('path');
module.exports = {
    devtool: '#inline-source-map"',
    watch: true,
    colors: true,
    progress: true,
    module: {
        loaders: [{
            loader: "babel",
            include: [
                path.resolve(__dirname, "src"),
            ],
            test: /'.jsx?$/,
            query: {
                plugins: ['transform-runtime'],
                presets: ['es2015', 'react', 'stage-0'],
            }
        }, {
            loader: 'style!css!sass',
            include: path.join(__dirname, 'src'),
            test: /'.scss$/
        }]
    },
    plugins: [],
    output: {
        path: path.join(__dirname, 'build/js'),
        publicPath: '/build/',
        filename: '[name].js'
    },
    entry: {
        bundle: [
            './src/index.js'
        ]
    },
    devServer: {
        contentBase: "./",
        inline: true,
        port: 8080
    },
};

我已经自己解决了这个问题。听起来很愚蠢，但问题出在output对象下的publicPath上。它应该匹配path属性，而不仅仅是/build/，即 

output: {
    path: path.join(__dirname, 'build/js'),
    publicPath: '/build/js', // instead of publicPath: '/build/' 
    filename: '[name].js'
},

就我而言，我必须检查 webpack 在哪里提供文件。

你可以看到它： http://localhost:8080/webpack-dev-server

然后我可以看到我的捆绑.js路径> http://localhost:8080/dist/bundle.js

之后，我在索引中使用了该/dist/bundle.js.html <script src="/dist/bundle.js"></script>

现在它会刷新任何文件更改。

webpack-dev-server 从内存中提供您的捆绑包.js。运行时它不会生成文件。因此，在这种情况下，捆绑.js不作为文件存在。

如果您不想使用 bundle.js，例如为了优化其大小或测试您的生产部署，请使用 webpack 命令使用 webpack 生成它，并在生产模式下提供它。

顺便说一下，从 Webpack v4 开始，可以将内存中的资产写入磁盘：

  devServer: {
    contentBase: "./",
    port: 8080,
    writeToDisk: true
  }

请参阅文档。

对我来说，解决这个问题的是：

  devServer: {
    devMiddleware: {
      writeToDisk: true,
    }
  }

https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-

开发服务器将编译的文件保存在内存中，我无法直接访问它......但！解决方案是你不需要访问它，在开发中（即使你在节点服务器或本地主机上运行你的项目）使用 localhost：8080 来访问你的页面，这就是 webpack-dev-server 为你页面提供服务的地方，你可以感受到使用它的所有优势（实时重新加载！），但是！它不会编译您的捆绑包.js，所以！在生产之前，您需要手动运行 webpack 构建命令，仅此而已！开发服务器无法编译您的捆绑.js文件！祝你好运！

请参考这个 - https://github.com/webpack/webpack-dev-server/issues/24据此，webpack 开发服务器不再写入磁盘。因此，您将无法看到构建文件。相反，它将从内存中提供。要使其正常工作，您必须设置正确的路径。示例：在索引中.html从 '/dist/main.js' 加载构建文件，因此在 webpack 配置文件中将 output.publicPath 设置为 '/dist/'

就我而言，我使用的是VS Code，我必须重新启动它。我注意到 vs 代码有时会出错。您在配置文件（package.json，webpack.config.js等）中所做的更改有时不会生效。因此，如果您遇到即使使用正确的设置也无法正常工作的情况，只需重新启动 vs 代码即可。

我看不到与此相关的任何错误报告。所以这很奇怪。我认为如果您在多次构建项目后一段时间更改其中一个配置文件，则会触发此错误。

如果这真的是正在发生的事情，那么这是一个巨大的错误。我将尝试切换到Visual Studio而不是Code，看看是否仍然发生这种情况。如果是这样，那么可能是 webpack 的问题。

相关文章：