setup asset loader

brtvcl · Oct 5, 2022 · 5e3d3c0 · 5e3d3c0
1 parent 74639df
commit 5e3d3c0
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/public/index.html b/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Peerbox</title>
 </head>
 <body>
     <div id="root"></div>

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,10 +1,14 @@
 import React from "react";
+import icon from "./icon.svg";
+
+console.log(icon);
 const App = () => {
 
   console.log("hello webpack");
   return (
     <div className="bg-green-400">
       <h1>Hello Tailwind!</h1>
+      <img src={icon} width="40px" alt="" />
     </div>
   );
 };

diff --git a/src/icon.svg b/src/icon.svg
diff --git a/webpack.config.js b/webpack.config.js
@@ -10,6 +10,7 @@ module.exports = {
 	output: {
 		path: path.join(__dirname, "/dist"),
 		filename: "bundle.[contenthash].js",
+		assetModuleFilename: "asset/[hash][ext][query]",
 		clean: true,
 	},
 	module: {
@@ -25,17 +26,21 @@ module.exports = {
 				test: /\.css$/i,
 				use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
 			},
+			{
+				test: /\.(png|jpg|gif|svg)$/i,
+				type: "asset/resource"
+			}
 		],
 	},
 	resolve: {
-		extensions: ['.js', '.jsx']
+		extensions: [".js", ".jsx"]
 	},
 	plugins: [
 		new HtmlWebpackPlugin({
 			template: "./public/index.html"
 		}),
 		new MiniCssExtractPlugin({
-			filename:"style.[contenthash].css",
+			filename: "style.[contenthash].css",
 		})
 	],
 	devServer: {