PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Support image URLs in HTML templates

Browse source 
Expands the image build process to also support the right paths when used in
HTML templates.
This commit is contained in:
J. Ryan Stinnett 2019-01-17 20:59:06 -06:00
parent 59bedae15e
commit 7a3df1c7d6
2 changed files with 39 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/vector/index.html
View file

@ -40,7 +40,7 @@
window.vector_indexeddb_worker_script = '<%= htmlWebpackPlugin.files.chunks['indexeddb-worker'].entry %>';
</script>
<script src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
<img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
<img src="<%= require('matrix-react-sdk/res/img/warning.svg') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
<audio id="messageAudio">
<source src="media/message.ogg" type="audio/ogg" />
<source src="media/message.mp3" type="audio/mpeg" />

51
webpack.config.js
View file

@ -55,27 +55,32 @@ module.exports = {
},
{
test: /\.(gif|png|svg|ttf)$/,
// Use a content-based hash in the name so that we can set a long cache
// lifetime for assets while still delivering changes quickly.
oneOf: [
{
// Images referenced in HTML files
issuer: /\.html$/,
loader: 'file-loader',
options: {
// Use a content-based hash in the name so that we can set a
// long cache lifetime for assets while still delivering
// changes quickly.
name: '[name].[hash:7].[ext]',
outputPath: function(url, resourcePath, context) {
// Merge assets found via CSS and imports into a single
// tree, while also preserving directories under **/res.
const prefix = /^.*\/res\//;
const outputDir = path.dirname(resourcePath).replace(prefix, "");
return path.join(outputDir, path.basename(url));
},
publicPath: function(url, resourcePath, context) {
// Merge assets found via CSS and imports into a single
// tree, while also preserving directories under **/res.
const prefix = /^.*\/res\//;
const outputDir = path.dirname(resourcePath).replace(prefix, "");
return path.join("../..", outputDir, path.basename(url));
outputPath: getImgOutputPath,
},
},
{
// Images referenced in JS and CSS files
loader: 'file-loader',
options: {
name: '[name].[hash:7].[ext]',
outputPath: getImgOutputPath,
publicPath: function(url, resourcePath) {
// JS and CSS image usages end up the `bundles/[hash]` output
// directory, so we adjust the final path to navigate up twice.
return path.join("../..", getImgOutputPath(url, resourcePath));
},
},
},
],
},
],
noParse: [
@ -178,3 +183,17 @@ module.exports = {
inline: false,
},
};
/**
* Merge assets found via CSS and imports into a single tree, while also preserving
* directories under `res`.
*
* @param {string} url The adjusted name of the file, such as `warning.1234567.svg`.
* @param {string} resourcePath The absolute path to the source file with unmodified name.
* @return {string} The returned paths will look like `img/warning.1234567.svg`.
*/
function getImgOutputPath(url, resourcePath) {
const prefix = /^.*\/res\//;
const outputDir = path.dirname(resourcePath).replace(prefix, "");
return path.join(outputDir, path.basename(url));
}