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 %>'; window.vector_indexeddb_worker_script = '<%= htmlWebpackPlugin.files.chunks['indexeddb-worker'].entry %>';
</script> </script>
<script src="<%= htmlWebpackPlugin.files.chunks['bundle'].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"> <audio id="messageAudio">
<source src="media/message.ogg" type="audio/ogg" /> <source src="media/message.ogg" type="audio/ogg" />
<source src="media/message.mp3" type="audio/mpeg" /> <source src="media/message.mp3" type="audio/mpeg" />

57
webpack.config.js
View file

@ -55,27 +55,32 @@ module.exports = {
}, },
{ {
test: /\.(gif|png|svg|ttf)$/, test: /\.(gif|png|svg|ttf)$/,
loader: 'file-loader', // Use a content-based hash in the name so that we can set a long cache
options: { // lifetime for assets while still delivering changes quickly.
// Use a content-based hash in the name so that we can set a oneOf: [
// long cache lifetime for assets while still delivering {
// changes quickly. // Images referenced in HTML files
name: '[name].[hash:7].[ext]', issuer: /\.html$/,
outputPath: function(url, resourcePath, context) { loader: 'file-loader',
// Merge assets found via CSS and imports into a single options: {
// tree, while also preserving directories under **/res. name: '[name].[hash:7].[ext]',
const prefix = /^.*\/res\//; outputPath: getImgOutputPath,
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 // Images referenced in JS and CSS files
// tree, while also preserving directories under **/res. loader: 'file-loader',
const prefix = /^.*\/res\//; options: {
const outputDir = path.dirname(resourcePath).replace(prefix, ""); name: '[name].[hash:7].[ext]',
return path.join("../..", outputDir, path.basename(url)); 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: [ noParse: [
@ -178,3 +183,17 @@ module.exports = {
inline: false, 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));
}