Menu
I am a newbie to webpack. I am trying to write an AngularJS 2 website and have a requirement where I would like certain strings within my CSS / LESS / HTML / JS / TS files to be replaced with values taken from a properties file.
My properties file would look something like this:
example.properties
branding.title=My Awesome Website
support.telephoneNumber=+441111111111
...
And I would like to place tokens within my files in this format:
example.html
<html>
<head>${branding.title}</head>
...
</html>
In the above I would like the loader to replace ${branding.title} with My Awesome Website.
Is there an existing webpack loader that will allow me to perform these substitutions as an initial step before building?
I just need a token replacement loader of some form - I don't mind if the file containing the tokens and their replacement text is in a different format to the one I gave as an example above. Similarly I don't mind if the way in which the tokens are defnied within the files (e.g. ${branding.title}) is different.
877
They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs.
babel-loader does what ts-loader does for TypeScript; passes off files to the Babel compiler, and returns the result to be used in the bundle in-place of the original source program.
Use with url-loader or file-loaderurl-loader and file-loader are deprecated over Asset Modules in webpack v5.
The RAW Loader is the easiest yet most effective way to scoop up loose material from your tray and load it into your cone or paper. The simplicity of the Raw Loader is what makes it such a Rawesome tool that is a must for all RYO enthusiasts. Included with the RAW Loader is a non-stick scraper and a long bamboo poker.
This is possible with the use of the html-webpack-plugin
Inside your webpack.config.js file perform an import of your properties file, hopefully it's in some well formed file type like JSON. If not you will need to parse the file within the webpack.config. Ideally, just make your .properties files all JSON if you can. Also import html-webpack-plugin. Add html-webpack-plugin to your plugins array. Then inside your template html file you will be able to access variables within the configuration.
The webpack.config.js would look something like this:
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
})
]
};
Inside your HTML
<head><%= webpackConfig.metadata.branding.title%></head>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
