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