Make images cacheable (#248)

Author: benmccann

package_template.json

@@ -33,13 +33,15 @@
         "@rollup/plugin-commonjs": "^14.0.0",
         "@rollup/plugin-node-resolve": "^8.0.0",
         "@rollup/plugin-replace": "^2.2.0",
+        "@rollup/plugin-url": "^5.0.0",
         "rollup": "^2.3.4",
         "rollup-plugin-svelte": "^6.0.0",
         "rollup-plugin-terser": "^7.0.0"
       }
     },
     "webpack": {
       "devDependencies": {
+        "file-loader": "^6.0.0",
         "svelte-loader": "^2.9.0",
         "webpack": "^4.7.0",
         "webpack-modules": "^1.0.0"

rollup.config.js

@@ -1,6 +1,8 @@
+import path from 'path';
 import resolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
 import commonjs from '@rollup/plugin-commonjs';
+import url from '@rollup/plugin-url';
 import svelte from 'rollup-plugin-svelte';
 import babel from '@rollup/plugin-babel';
 import { terser } from 'rollup-plugin-terser';
@@ -30,6 +32,10 @@ export default {
 				hydratable: true,
 				emitCss: true
 			}),
+			url({
+				sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
+				publicPath: '/client/'
+			}),
 			resolve({
 				browser: true,
 				dedupe: ['svelte']
@@ -75,6 +81,11 @@ export default {
 				hydratable: true,
 				dev
 			}),
+			url({
+				sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
+				publicPath: '/client/',
+				emitFiles: false // already emitted by client build
+			}),
 			resolve({
 				dedupe: ['svelte']
 			}),

static/successkid.jpg renamed to src/node_modules/images/successkid.jpg

@@ -1,3 +1,7 @@
+<script>
+	import successkid from 'images/successkid.jpg';
+</script>
+
 <style>
 	h1, figure, p {
 		text-align: center;
@@ -39,7 +43,7 @@
 <h1>Great success!</h1>
 
 <figure>
-	<img alt='Success Kid' src='successkid.jpg'>
+	<img alt="Success Kid" src="{successkid}">
 	<figcaption>Have fun with Sapper!</figcaption>
 </figure>
 

src/routes/index.svelte

@@ -10,6 +10,12 @@ const dev = mode === 'development';
 const alias = { svelte: path.resolve('node_modules', 'svelte') };
 const extensions = ['.mjs', '.js', '.json', '.svelte', '.html'];
 const mainFields = ['svelte', 'module', 'browser', 'main'];
+const fileLoaderRule = {
+	test: /\.(png|svg|jpg|gif)$/,
+	use: [
+		'file-loader',
+	]
+};
 
 module.exports = {
 	client: {
@@ -28,7 +34,8 @@ module.exports = {
 							hotReload: false // pending https://github.com/sveltejs/svelte/issues/2377
 						}
 					}
-				}
+				},
+				fileLoaderRule
 			]
 		},
 		mode,
@@ -62,7 +69,8 @@ module.exports = {
 							dev
 						}
 					}
-				}
+				},
+				fileLoaderRule
 			]
 		},
 		mode,