Question

我正在使用webpack测试我正在编写的代码生成库的输出；该库将文件复制到新目录中，并由webpack提供。

最终结果会将Web应用程序打包为注入服务器的Java jar，前端将选择应显示的内容并将其嵌入iframe中。我正在尝试模拟这一点，在其中显示demo.html，其中包含一个加载sheet.html的iframe，该iframe加载app.bundle.js。

当开发服务器正在运行并且我更改了一些文件并重新调用该库时，更新的文件被移到适当的位置，并且在控制台中，我可以看到webpack执行了重新编译。

但是，当我查看编译后的捆绑软件时，即使捆绑软件的源文件不同，它实际上也没有变化。我必须重新启动服务器才能使捆绑包真正更新。

const path = require("path");

module.exports = {
    "mode": "development",
    "entry": "./src/main/resources/scripts/app.js",
    "output" : {
        path: path.resolve(__dirname, "src/main/resources/scripts/"),
        filename: "app.bundle.js",
        publicPath: "/src/main/resources"
    },
    devServer:{
        before: function(app, server){
            app.use("/templates/sheet.html", function(req, res) {
                const resourcePath = path.resolve(__dirname + "/src/main/resources" + req.baseUrl);
                res.sendFile(resourcePath);
            });
            app.use(/\/scripts\/.*/, function(req, res) {
                const resourcePath = path.resolve(__dirname + "/src/main/resources" + req.baseUrl);
                res.sendFile(resourcePath);
            });
        },
        contentBase: __dirname,
        port: 9999,
        hot: true,
        index: "demo.html",
        historyApiFallback: {
            index: "demo.html",
        }
    },
    "module": {
        "rules": [
            {
                "test": /\.(js|jsx)$/,
                "exclude": /node_modules/,
                "use": {
                    "loader": "babel-loader",
                    "options": {
                        "presets": [
                            "@babel/env",
                            "@babel/react"
                        ]
                    }
                }
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
        ]
    },
}

Answer 1

可能在这里发生以下情况：

我认为，您是通过驻留在存储库package.json中的npm start脚本启动开发服务器的。该脚本使用webpack-cli进行了初始完整构建，该构建将包输出到您的目标目录。如果构建成功，则在源发生更改的情况下，它会借助webpack-dev-server命令重新编译分发包来监视所有源文件。

问题是：webpack-cli将写入磁盘，由于开发过程中的性能原因，默认情况下webpack-dev-server将构建捆绑包in memory等。

webpack-dev-server编译后不写入任何输出文件。相反，它将捆绑文件保存在内存中，并像在服务器根路径中挂载的真实文件一样提供服务。

因此，您有效地将其写入磁盘一次，然后在文件系统中拥有一个过时的捆绑包，而开发服务器则将这些更改编译并通过内存提供给它们。

如果我对您的理解正确，那么您将依赖于已编译的捆绑软件输出以文件形式编写，因此您可以将捆绑软件/ webapp进一步打包为服务器的Java jar。如果您仍然想使用webpack-dev-server来利用Web服务器并可以使用实时重新加载功能，则可以启用devServer.writeToDisk选项（默认值：false）：

webpack.config.js：

module.exports = {
  //...
  devServer: {
    writeToDisk: true
  }
};

作为替代方案，如果其中一个文件已更新，则可以利用Webpack的watch mode来重新编译，这样就不必手动构建。

package.json：

"scripts": {
  //...
  "watch": "webpack --watch"
}

Webpack开发服务器在热时重新编译，但捆绑包实际上并未更改

1 个答案: