gpt4 book ai didi

webpack - 是否有用于用属性文件中的值替换字符串的 webpack 加载器

转载 作者:行者123 更新时间:2023-12-01 12:25:57 28 4
gpt4 key购买 nike

我是 webpack 的新手。我正在尝试编写一个 AngularJS 2 网站,并且有一个要求,我希望将我的 CSS/LESS/HTML/JS/TS 文件中的某些字符串替换为从属性文件中获取的值。

我的属性文件看起来像这样:

示例.properties

branding.title=My Awesome Website
support.telephoneNumber=+441111111111
...

我想以这种格式在我的文件中放置 token :

示例.html
<html>
<head>${branding.title}</head>
...
</html>

在上面我希望加载程序替换 ${branding.title} 我的真棒网站 .

是否有现有的 webpack 加载器允许我在构建之前执行这些替换作为初始步骤?

我只需要某种形式的 token 替换加载器 - 我不介意包含 token 及其替换文本的文件是否与我在上面作为示例给出的格式不同。同样,我不介意在文件中定义 token 的方式(例如 ${branding.title} )是否不同。

最佳答案

这可以通过使用 html-webpack-plugin 来实现。

在你的 webpack.config.js 文件中执行你的属性文件的导入,希望它是一些格式良好的文件类型,比如 JSON。如果没有,您将需要解析 webpack.config 中的文件。理想情况下,如果可以,只需将 .properties 文件全部设为 JSON。同时导入 html-webpack-plugin。将 html-webpack-plugin 添加到你的 plugins 数组中。然后在模板 html 文件中,您将能够访问配置中的变量。

webpack.config.js 看起来像这样:

var config = require('../pathToProperties/example.properties.json');
var HtmlWebpackPlugin = require('html-webpack-plugin');
export.module = {
// Your webpack config
//...
meta : config,
plugins : [
new HtmlWebpackPlugin({
template : './src/index.html' // Where your index.html template exists
})
]
};

在你的 HTML 中
<head><%= webpackConfig.metadata.branding.title%></head>

网络包 2

webpack.config.js

var config = require('../pathToProperties/example.properties.json');
plugins: [
...
new HtmlWebpackPlugin({
template: 'src/index.html',
metadata: config,
})

index.html
<title><%= htmlWebpackPlugin.options.metadata.customValue%></title>

关于webpack - 是否有用于用属性文件中的值替换字符串的 webpack 加载器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39678142/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com