with css-loader v5.2.7

amlbar · amlbar · commit 589201b24637 · 2021-09-19T21:57:01.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
@@ -1,2 +1,2 @@
 # webpack-build-css-with-bug
-Sample project to show a bug
+Sample project to show a css-loader bug.
diff --git a/assets/img/shapes.svg b/assets/img/shapes.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="a1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 900 1000" enable-background="new 0 0 900 1000" xml:space="preserve">
+<g id="a1">
+	<circle fill="#F3F3F3" stroke="#B3B3B3" stroke-width="8" stroke-miterlimit="10" cx="450" cy="500" r="418"/>
+</g>
+<g id="a2">
+	<polygon fill="#008CAB" points="278.3,595 446.7,217.4 615.1,595 	"/>
+	<polygon fill="#007194" points="448.1,220.8 446.7,217.4 331.3,476.1 482.7,298 	"/>
+	<polygon fill="#FF931E" points="162.2,677.9 330.6,300.3 499,677.9 	"/>
+	<polygon fill="#FF771E" points="331.1,301.3 330.6,300.3 216.2,556.6 365.4,378.3 	"/>
+	<polygon fill="#009245" points="389.6,677.9 558,300.3 726.4,677.9 	"/>
+	<polygon fill="#006837" points="559.7,300.3 558,296.3 443.6,556.6 593.3,379.4 	"/>
+</g>
+</svg>
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <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>
+    <link rel="stylesheet" href="./assets/css/main-799.css">
+</head>
+<body>
+
+    <div class="box"></div>
+
+    <script src="./assets/js/main-df5.js"></script>
+</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,23 @@
+{
+    "name": "JS and CSS assets",
+    "scripts": {
+        "build:dev": "webpack --mode development",
+        "build": "webpack --mode production"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.15.5",
+        "@babel/preset-env": "^7.15.6",
+        "babel-loader": "^8.2.2",
+        "clean-webpack-plugin": "^4.0.0",
+        "css-loader": "^5.2.7",
+        "file-loader": "^5.1.0",
+        "sass": "^1.41.1",
+        "sass-loader": "^12.1.0",
+        "webpack": "^5.53.0",
+        "webpack-bundle-tracker": "^1.3.0",
+        "webpack-cli": "^4.8.0"
+    },
+    "dependencies": {
+        "mini-css-extract-plugin": "^2.3.0"
+    }
+}
diff --git a/src/js/index.js b/src/js/index.js
@@ -0,0 +1 @@
+import '../scss/styles.scss';
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
@@ -0,0 +1,12 @@
+body {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 90vh;
+}
+.box {
+	background: url(../../assets/img/shapes.svg) no-repeat;
+	background-size: cover;
+	width: 180px;
+	height: 200px;
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,79 @@
+const path = require('path');
+const BundleTracker = require('webpack-bundle-tracker');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+
+const bundlePath = __dirname + "/assets/";
+
+module.exports = {
+	entry: {
+		main: "./src/js/index.js",
+	},
+	output: {
+		path: bundlePath,
+		filename: "js/[name]-[contenthash:3].js",
+	},
+
+	module: {
+		rules: [
+			{
+				test: /\.js$/,
+				exclude: /node_modules/,
+				use: {
+					loader: "babel-loader",
+				}
+			},
+			{
+				test: /\.(sa|sc|c)ss$/,
+
+				use: [
+					MiniCssExtractPlugin.loader,
+					"css-loader",
+					{
+						loader: "sass-loader",
+						options: {
+							implementation: require("sass")
+						}
+					}
+				]
+			},
+			{
+				test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
+				use: [
+					{
+						loader: 'file-loader',
+						options: {
+							emitFile: false,
+							publicPath: (url, resourcePath, context) => {
+								console.log(`------ ${url}`);
+								const cssBundleDir = bundlePath + 'css/';
+								const fileBundleDir = path.dirname(resourcePath);
+								const relativeFileDir = path.relative(cssBundleDir, fileBundleDir);
+
+								// resolves file relative path
+								// return the new relative file path (works for images and files)
+								return path.join(relativeFileDir, path.basename(resourcePath));
+							}
+						},
+					},
+				],
+			}
+		]
+	},
+
+	plugins: [
+		new CleanWebpackPlugin({
+			cleanOnceBeforeBuildPatterns: [],
+			cleanAfterEveryBuildPatterns: [
+				'**/main-*',
+			]
+		}),
+		new BundleTracker({
+			indent: '\t',
+			filename: './webpack-stats.json'
+		}),
+		new MiniCssExtractPlugin({
+			filename: "css/[name]-[contenthash:3].css"
+		})
+	],
+};

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`	`1`	`# webpack-build-css-with-bug`
`2`		`-Sample project to show a bug`
	`2`	`+Sample project to show a css-loader bug.`