chore: remove deprecated file-loader from examples

jantimon · jantimon · commit 1f7ce7ebb0cc · 2021-02-19T15:22:39.000+01:00
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/examples/custom-template/dist/webpack-5/55b19870aff2e53d1fb1.png b/examples/custom-template/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/examples/html-loader/dist/webpack-5/55b19870aff2e53d1fb1.png b/examples/html-loader/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/examples/javascript-advanced/dist/webpack-5/55b19870aff2e53d1fb1.png b/examples/javascript-advanced/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/examples/sort-manually/dist/webpack-5/55b19870aff2e53d1fb1.png b/examples/sort-manually/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)

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ module.exports = {`
`16`	`16`	`module: {`
`17`	`17`	`rules: [`
`18`	`18`	`{ test: /\.css$/, use: ['style-loader', 'css-loader'] },`
`19`		`- { test: /\.png$/, loader: 'file-loader' }`
	`19`	`+ { test: /\.png$/, type: 'asset/resource' }`
`20`	`20`	`]`
`21`	`21`	`},`
`22`	`22`	`optimization: {`
Original file line number	Diff line number	Diff line change
`@@ -1 +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>`
	`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="55b19870aff2e53d1fb1.png"></body></html>`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ module.exports = {`
`14`	`14`	`module: {`
`15`	`15`	`rules: [`
`16`	`16`	`{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },`
`17`		`- { test: /\.png$/, loader: 'file-loader' }`
	`17`	`+ { test: /\.png$/, type: 'asset/resource' }`
`18`	`18`	`]`
`19`	`19`	`},`
`20`	`20`	`plugins: [`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ module.exports = {`
`13`	`13`	`module: {`
`14`	`14`	`rules: [`
`15`	`15`	`{ test: /\.css$/, use: ['style-loader', 'css-loader'] },`
`16`		`- { test: /\.png$/, loader: 'file-loader' }`
	`16`	`+ { test: /\.png$/, type: 'asset/resource' }`
`17`	`17`	`]`
`18`	`18`	`},`
`19`	`19`	`plugins: [`
Original file line number	Diff line number	Diff line change
`@@ -1 +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>`
	`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="55b19870aff2e53d1fb1.png"></body></html>`
Original file line number	Diff line number	Diff line change
`@@ -1 +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">`
	`1`	`+<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">`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ module.exports = {`
`19`	`19`	`module: {`
`20`	`20`	`rules: [`
`21`	`21`	`{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },`
`22`		`- { test: /\.png$/, loader: 'file-loader' },`
	`22`	`+ { test: /\.png$/, type: 'asset/resource' },`
`23`	`23`	`{ test: /\.html$/, loader: 'html-loader' }`
`24`	`24`	`]`
`25`	`25`	`},`
Original file line number	Diff line number	Diff line change
`@@ -83,7 +83,7 @@ For the above example you would have to configure a [html](https://github.com/we`
`83`	`83`	```js
`84`	`84`	`module: {`
`85`	`85`	`rules: [`
`86`		`- {test: /\.png$/, loader: "file-loader"},`
	`86`	`+ { test: /\.png$/, type: 'asset/resource' },`
`87`	`87`	`{`
`88`	`88`	`test: /\.html$/,`
`89`	`89`	`exclude: /index\.html$/, // you need to exclude your base template (unless you do not want this plugin own templating feature)`