mad-star-studio/element-web
2
0
Fork 0
Code Pull requests Activity

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
Download patch file Download diff file Expand all files Collapse all files

57
webpack.config.js
View file

@ -55,27 +55,32 @@ module.exports = {
},
{
test: /\.(gif|png|svg|ttf)$/,
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));
// 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: {
name: '[name].[hash:7].[ext]',
outputPath: getImgOutputPath,
},
},
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));
{
// 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));
}