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

时间:2019-06-04 00:09:29

标签: webpack webpack-dev-server

我正在使用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'],
            },
        ]
    },
}

1 个答案:

答案 0 :(得分:3)

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

我认为,您是通过驻留在存储库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"
}