Skip to content

Commit

Permalink
Improve example
Browse files Browse the repository at this point in the history
  • Loading branch information
@ballomud
ballomud committed Feb 20, 2018
1 parent 4b3490c commit 7e5eb45
Show file tree
Hide file tree
Showing 4 changed files with 146 additions and 37 deletions.
17 changes: 17 additions & 0 deletions example/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">

<title>sharp-loader example</title>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/prism/1.11.0/themes/prism.min.css">

</head>

<body>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.11.0/prism.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.11.0/components/prism-json.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
76 changes: 67 additions & 9 deletions example/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,68 @@

var a = require('./img/ew3W8.jpg?presets[]=thumbnail&presets[]=prefetch');
var b = require('./img/ew3W8.jpg?presets[]=thumbnail&presets[]=prefetch');
var c = require('./img/ew3W8.jpg?{"presets":{"thumbnail":{"width": 400}}}');
var d = require('./img/visa.svg?height=100&format=png');
var e = require('./img/ew3W8.jpg?preset=thumbnail');
var f = require('./img/ew3W8.jpg?preset=thumbnail&width=60');
var g = require('./img/ew3W8.jpg?preset=thumbnail&height=300&emit=false');

console.log(a, b, c, d, e, f);
'use strict';

require('./index.html');

const a = require('./img/ew3W8.jpg?presets[]=thumbnail&presets[]=prefetch');
const b = require('./img/ew3W8.jpg?presets[]=thumbnail&presets[]=prefetch');
const c = require('./img/ew3W8.jpg?{"presets":{"thumbnail":{"width": 400}}}');
const d = require('./img/visa.svg?height=100&format=png');
const e = require('./img/ew3W8.jpg?preset=thumbnail');
const f = require('./img/ew3W8.jpg?preset=thumbnail&width=60');
const g = require('./img/ew3W8.jpg?preset=thumbnail&height=300&emit=false');

console.log({ a, b, c, d, e, f });

const imgs = [
{ imgsData: a, qs: './img/ew3W8.jpg?presets[]=thumbnail&presets[]=prefetch' },
{ imgsData: b, qs: './img/ew3W8.jpg?presets[]=thumbnail&presets[]=prefetch' },
{ imgsData: c, qs: './img/ew3W8.jpg?{"presets":{"thumbnail":{"width": 400}}}' },
{ imgsData: d, qs: './img/visa.svg?height=100&format=png' },
{ imgsData: e, qs: './img/ew3W8.jpg?preset=thumbnail' },
{ imgsData: f, qs: './img/ew3W8.jpg?preset=thumbnail&width=60' },
{ imgsData: g, qs: './img/ew3W8.jpg?preset=thumbnail&height=300&emit=false' },
];

const main = document.createElement("main");

for (const { qs, imgsData } of imgs) {
const div = document.createElement("div");

div.style.backgroundColor = "lightblue"
div.style.borderLeft = "3px solid black";
div.style.padding = "5px";
div.style.margin = "60px 10px";

div.innerHTML = `
<p style="font-size: 1.6em; color: rgb(153, 0, 85); background-color: rgb(245, 242, 240);">${qs}</p>
<pre style="max-height: 400px">
<code class="language-json">${JSON.stringify(imgsData, null, 2)}</code>
</pre>
`
for(const imgData of imgsData) {
if (imgData == null)
continue

const imgDiv = document.createElement('div');

console.log({ imgData });

imgDiv.style.borderLeft = "2px solid black";
imgDiv.style.padding = "5px";
imgDiv.style.margin = "20px 5px";

imgDiv.innerHTML = `
<img src="${imgData.url}" style="display: block; margin: 10px auto; border: 1px dashed lightgray"/>
<pre>
<code class="language-json">${JSON.stringify(imgData, null, 2)}</code>
</pre>
`;

div.appendChild(imgDiv);
};

main.appendChild(div);
}

document.getElementsByTagName('body')[0].appendChild(main);
10 changes: 8 additions & 2 deletions example/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,14 @@
{
"name": "sharp-loader-example",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server -d --progress"
},
"dependencies": {
"sharp": "^0.15.1",
"file-loader": "^1.1.7",
"sharp": "^0.19.0",
"sharp-loader": "../",
"webpack": "^1.12.1"
"webpack": "^3.0.0",
"webpack-dev-server": "^2.11.1"
}
}
80 changes: 54 additions & 26 deletions example/webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,67 @@
var path = require('path');

module.exports = {
id: 'client',
entry: './index.js',
target: 'web',

output: {
filename: '[name].js',
path: path.join(__dirname, 'dist'),
chunkFilename: '[id].[chunkhash].js'
chunkFilename: '[id].[chunkhash].js',
},

module: {
loaders: [{
test: /\.(gif|jpe?g|png|svg|tiff)(\?.*)?$/,
loader: path.join(__dirname, '..'),
query: {
name: '[name].[hash:8].[ext]',
presets: {
thumbnail: {
format: [ 'webp', 'png', 'jpeg' ],
density: [ 1, 2, 3 ],
width: 200,
height: 200,
quality: 60,
},
prefetch: {
format: 'jpeg',
mode: 'cover',
blur: 100,
quality: 30,
inline: true,
width: 50,
height: 50,
loaders: [
{
test: /\.(gif|jpe?g|png|svg|tiff)(\?.*)?$/,
use: [
{
loader: path.join(__dirname, '..'),
query: {
name: '[name].[hash:8].[ext]',
presets: {
thumbnail: {
format: [ 'webp', 'png', 'jpeg' ],
density: [ 1, 2, 3 ],
width: 200,
height: 200,
quality: 60,
},
prefetch: {
format: 'jpeg',
mode: 'cover',
blur: 100,
quality: 30,
inline: true,
width: 50,
height: 50,
}
}
}
}
}
]
},
{
test: /\.html/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
},
]
}
}]
}
]
},

devServer: {
contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location
watchContentBase: true,
compress: true,
historyApiFallback: true,
// hot: true,
https: false,
},

};

0 comments on commit 7e5eb45

Please sign in to comment.