From 7e5eb4525adcd7a9bda81d084d090cd301f21d32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Tabille=20Manjabosco?= Date: Mon, 19 Feb 2018 22:57:25 -0300 Subject: [PATCH] Improve example --- example/index.html | 17 +++++++++ example/index.js | 76 ++++++++++++++++++++++++++++++++----- example/package.json | 10 ++++- example/webpack.config.js | 80 ++++++++++++++++++++++++++------------- 4 files changed, 146 insertions(+), 37 deletions(-) create mode 100644 example/index.html diff --git a/example/index.html b/example/index.html new file mode 100644 index 0000000..8433839 --- /dev/null +++ b/example/index.html @@ -0,0 +1,17 @@ + + + + + + + sharp-loader example + + + + + + + + + + diff --git a/example/index.js b/example/index.js index de05a22..62d8fa7 100644 --- a/example/index.js +++ b/example/index.js @@ -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 = ` +

${qs}

+ + 
+      ${JSON.stringify(imgsData, null, 2)}
+
+ ` + 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 = ` + + 
+        ${JSON.stringify(imgData, null, 2)}
+
+ `; + + div.appendChild(imgDiv); + }; + + main.appendChild(div); +} + +document.getElementsByTagName('body')[0].appendChild(main); diff --git a/example/package.json b/example/package.json index 573e8a6..bf2eaa1 100644 --- a/example/package.json +++ b/example/package.json @@ -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" } } diff --git a/example/webpack.config.js b/example/webpack.config.js index ea62cce..00e6d6f 100644 --- a/example/webpack.config.js +++ b/example/webpack.config.js @@ -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, + }, + };