假设我有一个服务器(例如 Node 和 Express),它根据模板文件(如 pug、ejs、handlebars、twig、marko...)向客户端提供 HTML 页面。这是一个经典的多页面网站,每个页面都有自己的 JavaScript 文件。如果我使用 webpack 捆绑 JavaScript 文件,是否可以将 Javascript 文件自动(通过构建步骤)注入(inject)到相应的模板中?
我不想生成 HTML 文件,因此每个基于 html-webpack-plugin 的解决方案都不是我正在搜索的。我想做的事情就像我可以用 grunt 或 gulp 做的那样,但是使用 webpack 就不必在每个相应的模板中手动导入每个包。
不使用 webpack 的解决方案示例:
我在其他帖子中没有找到真正的答案。
提前谢谢您。
编辑
这确实有效。我尝试使用 pug,然后根据 SpeedOfRound 答案使用 marko。我在注入(inject)文件时遇到问题,因为我的模板是嵌套的(布局、包装器、页面...)并且我没有 head
或body
在我想放置标签的文件中。我用过inject: false
和<%= htmlWebpackPlugin.tags.bodyTags %>
(仅在 v4.0 + 中可用)并且它可以工作,但不完全符合我的预期。这里我们在 ./dist/
中创建一个新文件它不符合我的架构。我只想通过模板制作 bundle 并自动将其注入(inject)到正确的模板中。
之后,最终目标是在模板 View 所在的正确文件夹中创建 JS 文件,然后它将自动注入(inject)到该 View 中(以约定优于配置的方式)。
最佳答案
您可以通过将HtmlWebpackPlugin
指向您的模板来完成此操作。
这是我的删节版 webpack.config.js
,我在其中使用 mustache 模板执行此操作。
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
entry: "./js/app.js",
},
output: {
path: path.join(__dirname, 'dist'),
filename: "[name].js",
chunkFilename:'[name].[chunkhash].js',
publicPath: '/dist/'
},
plugins: [
new webpack.ProvidePlugin({
'React': 'react',
}),
new HtmlWebpackPlugin({
inject: 'head',
filename: path.resolve(__dirname, './templates/dist/app.mustache'),
template: path.resolve(__dirname, "./templates/app.mustache"),
chunks: ['entry'],
favicon: "./public/favicon.ico"
}),
]
}
这对于代码分割非常有用,您可以将构建分割成 block 并将多个 block 注入(inject)到页面中。这样您就可以重复使用 block ,并且浏览器只需在页面之间加载它们一次。
它不一定是 mustache ,我也用 php View 来做这个。
关于javascript - 使用 webpack 在模板或 HTML 中注入(inject) JavaScript 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60195942/