chore: remove deprecated file-loader from examples

jantimon · Feb 19, 2021 · 1f7ce7e · 1f7ce7e
1 parent 73d2a66
commit 1f7ce7e
Show file tree

Hide file tree

Showing 22 changed files with 18 additions and 18 deletions.
diff --git a/examples/chunk-optimization/webpack.config.js b/examples/chunk-optimization/webpack.config.js
@@ -16,7 +16,7 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/, use: ['style-loader', 'css-loader'] },
-      { test: /\.png$/, loader: 'file-loader' }
+      { test: /\.png$/, type: 'asset/resource' }
     ]
   },
   optimization: {

diff --git a/...ck-5/55b19870aff2e53d1fb1a258c1032fbf.png → ...e/dist/webpack-5/55b19870aff2e53d1fb1.png b/...ck-5/55b19870aff2e53d1fb1a258c1032fbf.png → ...e/dist/webpack-5/55b19870aff2e53d1fb1.png
diff --git a/examples/custom-template/dist/webpack-5/index.html b/examples/custom-template/dist/webpack-5/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body><h2>Partial</h2><img src="55b19870aff2e53d1fb1a258c1032fbf.png"></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body><h2>Partial</h2><img src="55b19870aff2e53d1fb1.png"></body></html>
diff --git a/examples/custom-template/readme.md b/examples/custom-template/readme.md
@@ -1,4 +1,4 @@
 # custom template
 
 This example uses a custom underscore template which inlines an partial using the html-loader:
-`<%= require('html-loader!./partial.html') %>`
+`<%= require('html-loader!./partial.html').default %>`
diff --git a/examples/custom-template/webpack.config.js b/examples/custom-template/webpack.config.js
@@ -14,7 +14,7 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
-      { test: /\.png$/, loader: 'file-loader' }
+      { test: /\.png$/, type: 'asset/resource' }
     ]
   },
   plugins: [

diff --git a/examples/default/webpack.config.js b/examples/default/webpack.config.js
@@ -13,7 +13,7 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/, use: ['style-loader', 'css-loader'] },
-      { test: /\.png$/, loader: 'file-loader' }
+      { test: /\.png$/, type: 'asset/resource' }
     ]
   },
   plugins: [

diff --git a/examples/favicon/webpack.config.js b/examples/favicon/webpack.config.js
@@ -14,7 +14,7 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
-      { test: /\.png$/, loader: 'file-loader' }
+      { test: /\.png$/, type: 'asset/resource' }
     ]
   },
   plugins: [

diff --git a/...ck-5/55b19870aff2e53d1fb1a258c1032fbf.png → ...r/dist/webpack-5/55b19870aff2e53d1fb1.png b/...ck-5/55b19870aff2e53d1fb1a258c1032fbf.png → ...r/dist/webpack-5/55b19870aff2e53d1fb1.png
diff --git a/examples/html-loader/dist/webpack-5/about.html b/examples/html-loader/dist/webpack-5/about.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body><img src="55b19870aff2e53d1fb1a258c1032fbf.png"></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body><img src="55b19870aff2e53d1fb1.png"></body></html>
diff --git a/examples/html-loader/dist/webpack-5/index.html b/examples/html-loader/dist/webpack-5/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body><img src="55b19870aff2e53d1fb1a258c1032fbf.png"></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body><img src="55b19870aff2e53d1fb1.png"></body></html>
diff --git a/examples/html-loader/webpack.config.js b/examples/html-loader/webpack.config.js
@@ -14,7 +14,7 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
-      { test: /\.png$/, loader: 'file-loader' },
+      { test: /\.png$/, type: 'asset/resource' },
       { test: /\.html$/, loader: 'html-loader' }
     ]
   },

diff --git a/...ck-5/55b19870aff2e53d1fb1a258c1032fbf.png → ...d/dist/webpack-5/55b19870aff2e53d1fb1.png b/...ck-5/55b19870aff2e53d1fb1a258c1032fbf.png → ...d/dist/webpack-5/55b19870aff2e53d1fb1.png
diff --git a/examples/javascript-advanced/dist/webpack-5/index.html b/examples/javascript-advanced/dist/webpack-5/index.html
@@ -1 +1 @@
-<html><head><title>Webpack App</title><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body>Hello World from backend -<h2>Partial</h2><img src="55b19870aff2e53d1fb1a258c1032fbf.png"></body></html>
+<html><head><title>Webpack App</title><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body>Hello World from backend -<h2>Partial</h2><img src="55b19870aff2e53d1fb1.png"></body></html>
diff --git a/examples/javascript-advanced/webpack.config.js b/examples/javascript-advanced/webpack.config.js
@@ -14,7 +14,7 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
-      { test: /\.png$/, loader: 'file-loader' },
+      { test: /\.png$/, type: 'asset/resource' },
       { test: /\.html$/, loader: 'html-loader' }
     ]
   },

diff --git a/examples/javascript/dist/webpack-5/index.html b/examples/javascript/dist/webpack-5/index.html
@@ -1 +1 @@
-<head><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head>Hello World from backend2021-02-19T12:55:16.489Z<h2>Partial</h2><img src="55b19870aff2e53d1fb1.png">
+<head><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head>Hello World from backend2021-02-19T13:58:22.479Z<h2>Partial</h2><img src="55b19870aff2e53d1fb1.png">
diff --git a/examples/multi-page/webpack.config.js b/examples/multi-page/webpack.config.js
@@ -16,7 +16,7 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/, use: ['style-loader', 'css-loader'] },
-      { test: /\.png$/, loader: 'file-loader' }
+      { test: /\.png$/, type: 'asset/resource' }
     ]
   },
   plugins: [

diff --git a/examples/pug-loader/webpack.config.js b/examples/pug-loader/webpack.config.js
@@ -14,7 +14,7 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
-      { test: /\.png$/, loader: 'file-loader' },
+      { test: /\.png$/, type: 'asset/resource' },
       { test: /\.pug$/, loader: 'pug-loader' }
     ]
   },

diff --git a/...ck-5/55b19870aff2e53d1fb1a258c1032fbf.png → ...y/dist/webpack-5/55b19870aff2e53d1fb1.png b/...ck-5/55b19870aff2e53d1fb1a258c1032fbf.png → ...y/dist/webpack-5/55b19870aff2e53d1fb1.png
diff --git a/examples/sort-manually/dist/webpack-5/first-file.html b/examples/sort-manually/dist/webpack-5/first-file.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="a.js"></script><script defer="defer" src="b.js"></script><script defer="defer" src="c.js"></script><link href="styles.css" rel="stylesheet"></head><body><img src="55b19870aff2e53d1fb1a258c1032fbf.png"></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="a.js"></script><script defer="defer" src="b.js"></script><script defer="defer" src="c.js"></script><link href="styles.css" rel="stylesheet"></head><body><img src="55b19870aff2e53d1fb1.png"></body></html>
diff --git a/examples/sort-manually/dist/webpack-5/second-file.html b/examples/sort-manually/dist/webpack-5/second-file.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="a.js"></script><script defer="defer" src="b.js"></script><script defer="defer" src="d.js"></script><link href="styles.css" rel="stylesheet"></head><body><img src="55b19870aff2e53d1fb1a258c1032fbf.png"></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="a.js"></script><script defer="defer" src="b.js"></script><script defer="defer" src="d.js"></script><link href="styles.css" rel="stylesheet"></head><body><img src="55b19870aff2e53d1fb1.png"></body></html>
diff --git a/examples/sort-manually/webpack.config.js b/examples/sort-manually/webpack.config.js
@@ -19,7 +19,7 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
-      { test: /\.png$/, loader: 'file-loader' },
+      { test: /\.png$/, type: 'asset/resource' },
       { test: /\.html$/, loader: 'html-loader' }
     ]
   },

diff --git a/migration.md b/migration.md
@@ -83,7 +83,7 @@ For the above example you would have to configure a [html](https://github.com/we
 ```js
 module: {
   rules: [
-    {test: /\.png$/, loader: "file-loader"},
+    { test: /\.png$/, type: 'asset/resource' },
     {
       test: /\.html$/,
       exclude: /index\.html$/, // you need to exclude your base template (unless you do not want this plugin own templating feature)