Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
VIP20
6
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

webpack part1：loader加载器

daxia 2 жил өмнө
parent
34de1ccc71
commit
4926cd20f1
8 өөрчлөгдсөн 402 нэмэгдсэн , 33 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 13 0
      18_Webpack/day-1/webpack_project/dist/index.html
  2. 0 32
      18_Webpack/day-1/webpack_project/dist/main.buddle.js
  3. 353 0
      18_Webpack/day-1/webpack_project/package-lock.json
  4. 2 0
      18_Webpack/day-1/webpack_project/package.json
  5. 14 0
      18_Webpack/day-1/webpack_project/src/common.css
  6. 2 0
      18_Webpack/day-1/webpack_project/src/main.js
  7. 9 0
      18_Webpack/day-1/webpack_project/webpack.config.js
  8. 9 1
      18_Webpack/day-1/webpack_project/webpack.config.v1.js

+ 13 - 0
18_Webpack/day-1/webpack_project/dist/index.html
Файл харах 

@@ -0,0 +1,13 @@
 
+<!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>
 
+  </head>
 
+  <body>
 
+    <div class="box"></div>
 
+    <script src="./main.buddle.js"></script>
 
+  </body>
 
+</html>

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 32
18_Webpack/day-1/webpack_project/dist/main.buddle.js


+ 353 - 0
18_Webpack/day-1/webpack_project/package-lock.json
Файл харах 

@@ -9,6 +9,8 @@
 
       "version": "1.0.0",
 
       "version": "1.0.0",
 
       "license": "ISC",
 
       "license": "ISC",
 
       "devDependencies": {
 
       "devDependencies": {
 
+        "css-loader": "^6.7.3",
 
+        "style-loader": "^3.3.2",
 
         "webpack": "^5.78.0",
 
         "webpack": "^5.78.0",
 
         "webpack-cli": "^5.0.1"
 
         "webpack-cli": "^5.0.1"
 
       }
 
       }
 
@@ -441,6 +443,40 @@
 
         "node": ">= 8"
 
         "node": ">= 8"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/css-loader": {
 
+      "version": "6.7.3",
 
+      "resolved": "https://registry.npmmirror.com/css-loader/-/css-loader-6.7.3.tgz",
 
+      "integrity": "sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "icss-utils": "^5.1.0",
 
+        "postcss": "^8.4.19",
 
+        "postcss-modules-extract-imports": "^3.0.0",
 
+        "postcss-modules-local-by-default": "^4.0.0",
 
+        "postcss-modules-scope": "^3.0.0",
 
+        "postcss-modules-values": "^4.0.0",
 
+        "postcss-value-parser": "^4.2.0",
 
+        "semver": "^7.3.8"
 
+      },
 
+      "engines": {
 
+        "node": ">= 12.13.0"
 
+      },
 
+      "peerDependencies": {
 
+        "webpack": "^5.0.0"
 
+      }
 
+    },
 
+    "node_modules/cssesc": {
 
+      "version": "3.0.0",
 
+      "resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz",
 
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
 
+      "dev": true,
 
+      "bin": {
 
+        "cssesc": "bin/cssesc"
 
+      },
 
+      "engines": {
 
+        "node": ">=4"
 
+      }
 
+    },
 
     "node_modules/electron-to-chromium": {
 
     "node_modules/electron-to-chromium": {
 
       "version": "1.4.353",
 
       "version": "1.4.353",
 
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.353.tgz",
 
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.353.tgz",
 
@@ -612,6 +648,18 @@
 
         "node": ">=8"
 
         "node": ">=8"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/icss-utils": {
 
+      "version": "5.1.0",
 
+      "resolved": "https://registry.npmmirror.com/icss-utils/-/icss-utils-5.1.0.tgz",
 
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
 
+      "dev": true,
 
+      "engines": {
 
+        "node": "^10 || ^12 || >= 14"
 
+      },
 
+      "peerDependencies": {
 
+        "postcss": "^8.1.0"
 
+      }
 
+    },
 
     "node_modules/import-local": {
 
     "node_modules/import-local": {
 
       "version": "3.1.0",
 
       "version": "3.1.0",
 
       "resolved": "https://registry.npmmirror.com/import-local/-/import-local-3.1.0.tgz",
 
       "resolved": "https://registry.npmmirror.com/import-local/-/import-local-3.1.0.tgz",
 
@@ -729,6 +777,18 @@
 
         "node": ">=8"
 
         "node": ">=8"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/lru-cache": {
 
+      "version": "6.0.0",
 
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
 
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "yallist": "^4.0.0"
 
+      },
 
+      "engines": {
 
+        "node": ">=10"
 
+      }
 
+    },
 
     "node_modules/merge-stream": {
 
     "node_modules/merge-stream": {
 
       "version": "2.0.0",
 
       "version": "2.0.0",
 
       "resolved": "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz",
 
       "resolved": "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz",
 
@@ -756,6 +816,18 @@
 
         "node": ">= 0.6"
 
         "node": ">= 0.6"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/nanoid": {
 
+      "version": "3.3.6",
 
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.6.tgz",
 
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
 
+      "dev": true,
 
+      "bin": {
 
+        "nanoid": "bin/nanoid.cjs"
 
+      },
 
+      "engines": {
 
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
 
+      }
 
+    },
 
     "node_modules/neo-async": {
 
     "node_modules/neo-async": {
 
       "version": "2.6.2",
 
       "version": "2.6.2",
 
       "resolved": "https://registry.npmmirror.com/neo-async/-/neo-async-2.6.2.tgz",
 
       "resolved": "https://registry.npmmirror.com/neo-async/-/neo-async-2.6.2.tgz",
 
@@ -843,6 +915,98 @@
 
         "node": ">=8"
 
         "node": ">=8"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/postcss": {
 
+      "version": "8.4.21",
 
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.21.tgz",
 
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "nanoid": "^3.3.4",
 
+        "picocolors": "^1.0.0",
 
+        "source-map-js": "^1.0.2"
 
+      },
 
+      "engines": {
 
+        "node": "^10 || ^12 || >=14"
 
+      }
 
+    },
 
+    "node_modules/postcss-modules-extract-imports": {
 
+      "version": "3.0.0",
 
+      "resolved": "https://registry.npmmirror.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
 
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
 
+      "dev": true,
 
+      "engines": {
 
+        "node": "^10 || ^12 || >= 14"
 
+      },
 
+      "peerDependencies": {
 
+        "postcss": "^8.1.0"
 
+      }
 
+    },
 
+    "node_modules/postcss-modules-local-by-default": {
 
+      "version": "4.0.0",
 
+      "resolved": "https://registry.npmmirror.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
 
+      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "icss-utils": "^5.0.0",
 
+        "postcss-selector-parser": "^6.0.2",
 
+        "postcss-value-parser": "^4.1.0"
 
+      },
 
+      "engines": {
 
+        "node": "^10 || ^12 || >= 14"
 
+      },
 
+      "peerDependencies": {
 
+        "postcss": "^8.1.0"
 
+      }
 
+    },
 
+    "node_modules/postcss-modules-scope": {
 
+      "version": "3.0.0",
 
+      "resolved": "https://registry.npmmirror.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
 
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "postcss-selector-parser": "^6.0.4"
 
+      },
 
+      "engines": {
 
+        "node": "^10 || ^12 || >= 14"
 
+      },
 
+      "peerDependencies": {
 
+        "postcss": "^8.1.0"
 
+      }
 
+    },
 
+    "node_modules/postcss-modules-values": {
 
+      "version": "4.0.0",
 
+      "resolved": "https://registry.npmmirror.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
 
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "icss-utils": "^5.0.0"
 
+      },
 
+      "engines": {
 
+        "node": "^10 || ^12 || >= 14"
 
+      },
 
+      "peerDependencies": {
 
+        "postcss": "^8.1.0"
 
+      }
 
+    },
 
+    "node_modules/postcss-selector-parser": {
 
+      "version": "6.0.11",
 
+      "resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
 
+      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "cssesc": "^3.0.0",
 
+        "util-deprecate": "^1.0.2"
 
+      },
 
+      "engines": {
 
+        "node": ">=4"
 
+      }
 
+    },
 
+    "node_modules/postcss-value-parser": {
 
+      "version": "4.2.0",
 
+      "resolved": "https://registry.npmmirror.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
 
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
 
+      "dev": true
 
+    },
 
     "node_modules/punycode": {
 
     "node_modules/punycode": {
 
       "version": "2.3.0",
 
       "version": "2.3.0",
 
       "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.0.tgz",
 
       "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.0.tgz",
 
@@ -928,6 +1092,21 @@
 
         "node": ">= 10.13.0"
 
         "node": ">= 10.13.0"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/semver": {
 
+      "version": "7.3.8",
 
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.3.8.tgz",
 
+      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "lru-cache": "^6.0.0"
 
+      },
 
+      "bin": {
 
+        "semver": "bin/semver.js"
 
+      },
 
+      "engines": {
 
+        "node": ">=10"
 
+      }
 
+    },
 
     "node_modules/serialize-javascript": {
 
     "node_modules/serialize-javascript": {
 
       "version": "6.0.1",
 
       "version": "6.0.1",
 
       "resolved": "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
 
       "resolved": "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
 
@@ -979,6 +1158,15 @@
 
         "node": ">=0.10.0"
 
         "node": ">=0.10.0"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/source-map-js": {
 
+      "version": "1.0.2",
 
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz",
 
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
 
+      "dev": true,
 
+      "engines": {
 
+        "node": ">=0.10.0"
 
+      }
 
+    },
 
     "node_modules/source-map-support": {
 
     "node_modules/source-map-support": {
 
       "version": "0.5.21",
 
       "version": "0.5.21",
 
       "resolved": "https://registry.npmmirror.com/source-map-support/-/source-map-support-0.5.21.tgz",
 
       "resolved": "https://registry.npmmirror.com/source-map-support/-/source-map-support-0.5.21.tgz",
 
@@ -989,6 +1177,18 @@
 
         "source-map": "^0.6.0"
 
         "source-map": "^0.6.0"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/style-loader": {
 
+      "version": "3.3.2",
 
+      "resolved": "https://registry.npmmirror.com/style-loader/-/style-loader-3.3.2.tgz",
 
+      "integrity": "sha512-RHs/vcrKdQK8wZliteNK4NKzxvLBzpuHMqYmUVWeKa6MkaIQ97ZTOS0b+zapZhy6GcrgWnvWYCMHRirC3FsUmw==",
 
+      "dev": true,
 
+      "engines": {
 
+        "node": ">= 12.13.0"
 
+      },
 
+      "peerDependencies": {
 
+        "webpack": "^5.0.0"
 
+      }
 
+    },
 
     "node_modules/supports-color": {
 
     "node_modules/supports-color": {
 
       "version": "8.1.1",
 
       "version": "8.1.1",
 
       "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-8.1.1.tgz",
 
       "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-8.1.1.tgz",
 
@@ -1092,6 +1292,12 @@
 
         "punycode": "^2.1.0"
 
         "punycode": "^2.1.0"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/util-deprecate": {
 
+      "version": "1.0.2",
 
+      "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
 
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 
+      "dev": true
 
+    },
 
     "node_modules/watchpack": {
 
     "node_modules/watchpack": {
 
       "version": "2.4.0",
 
       "version": "2.4.0",
 
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
 
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
 
@@ -1240,6 +1446,12 @@
 
       "resolved": "https://registry.npmmirror.com/wildcard/-/wildcard-2.0.0.tgz",
 
       "resolved": "https://registry.npmmirror.com/wildcard/-/wildcard-2.0.0.tgz",
 
       "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
 
       "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
 
       "dev": true
 
       "dev": true
 
+    },
 
+    "node_modules/yallist": {
 
+      "version": "4.0.0",
 
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
 
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
 
+      "dev": true
 
     }
 
     }
 
   },
 
   },
 
   "dependencies": {
 
   "dependencies": {
 
@@ -1611,6 +1823,28 @@
 
         "which": "^2.0.1"
 
         "which": "^2.0.1"
 
       }
 
       }
 
     },
 
     },
 
+    "css-loader": {
 
+      "version": "6.7.3",
 
+      "resolved": "https://registry.npmmirror.com/css-loader/-/css-loader-6.7.3.tgz",
 
+      "integrity": "sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==",
 
+      "dev": true,
 
+      "requires": {
 
+        "icss-utils": "^5.1.0",
 
+        "postcss": "^8.4.19",
 
+        "postcss-modules-extract-imports": "^3.0.0",
 
+        "postcss-modules-local-by-default": "^4.0.0",
 
+        "postcss-modules-scope": "^3.0.0",
 
+        "postcss-modules-values": "^4.0.0",
 
+        "postcss-value-parser": "^4.2.0",
 
+        "semver": "^7.3.8"
 
+      }
 
+    },
 
+    "cssesc": {
 
+      "version": "3.0.0",
 
+      "resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz",
 
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
 
+      "dev": true
 
+    },
 
     "electron-to-chromium": {
 
     "electron-to-chromium": {
 
       "version": "1.4.353",
 
       "version": "1.4.353",
 
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.353.tgz",
 
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.353.tgz",
 
@@ -1745,6 +1979,13 @@
 
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
 
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
 
       "dev": true
 
       "dev": true
 
     },
 
     },
 
+    "icss-utils": {
 
+      "version": "5.1.0",
 
+      "resolved": "https://registry.npmmirror.com/icss-utils/-/icss-utils-5.1.0.tgz",
 
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
 
+      "dev": true,
 
+      "requires": {}
 
+    },
 
     "import-local": {
 
     "import-local": {
 
       "version": "3.1.0",
 
       "version": "3.1.0",
 
       "resolved": "https://registry.npmmirror.com/import-local/-/import-local-3.1.0.tgz",
 
       "resolved": "https://registry.npmmirror.com/import-local/-/import-local-3.1.0.tgz",
 
@@ -1835,6 +2076,15 @@
 
         "p-locate": "^4.1.0"
 
         "p-locate": "^4.1.0"
 
       }
 
       }
 
     },
 
     },
 
+    "lru-cache": {
 
+      "version": "6.0.0",
 
+      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
 
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
 
+      "dev": true,
 
+      "requires": {
 
+        "yallist": "^4.0.0"
 
+      }
 
+    },
 
     "merge-stream": {
 
     "merge-stream": {
 
       "version": "2.0.0",
 
       "version": "2.0.0",
 
       "resolved": "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz",
 
       "resolved": "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz",
 
@@ -1856,6 +2106,12 @@
 
         "mime-db": "1.52.0"
 
         "mime-db": "1.52.0"
 
       }
 
       }
 
     },
 
     },
 
+    "nanoid": {
 
+      "version": "3.3.6",
 
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.6.tgz",
 
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
 
+      "dev": true
 
+    },
 
     "neo-async": {
 
     "neo-async": {
 
       "version": "2.6.2",
 
       "version": "2.6.2",
 
       "resolved": "https://registry.npmmirror.com/neo-async/-/neo-async-2.6.2.tgz",
 
       "resolved": "https://registry.npmmirror.com/neo-async/-/neo-async-2.6.2.tgz",
 
@@ -1925,6 +2181,69 @@
 
         "find-up": "^4.0.0"
 
         "find-up": "^4.0.0"
 
       }
 
       }
 
     },
 
     },
 
+    "postcss": {
 
+      "version": "8.4.21",
 
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.21.tgz",
 
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
 
+      "dev": true,
 
+      "requires": {
 
+        "nanoid": "^3.3.4",
 
+        "picocolors": "^1.0.0",
 
+        "source-map-js": "^1.0.2"
 
+      }
 
+    },
 
+    "postcss-modules-extract-imports": {
 
+      "version": "3.0.0",
 
+      "resolved": "https://registry.npmmirror.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
 
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
 
+      "dev": true,
 
+      "requires": {}
 
+    },
 
+    "postcss-modules-local-by-default": {
 
+      "version": "4.0.0",
 
+      "resolved": "https://registry.npmmirror.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
 
+      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
 
+      "dev": true,
 
+      "requires": {
 
+        "icss-utils": "^5.0.0",
 
+        "postcss-selector-parser": "^6.0.2",
 
+        "postcss-value-parser": "^4.1.0"
 
+      }
 
+    },
 
+    "postcss-modules-scope": {
 
+      "version": "3.0.0",
 
+      "resolved": "https://registry.npmmirror.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
 
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
 
+      "dev": true,
 
+      "requires": {
 
+        "postcss-selector-parser": "^6.0.4"
 
+      }
 
+    },
 
+    "postcss-modules-values": {
 
+      "version": "4.0.0",
 
+      "resolved": "https://registry.npmmirror.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
 
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
 
+      "dev": true,
 
+      "requires": {
 
+        "icss-utils": "^5.0.0"
 
+      }
 
+    },
 
+    "postcss-selector-parser": {
 
+      "version": "6.0.11",
 
+      "resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
 
+      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
 
+      "dev": true,
 
+      "requires": {
 
+        "cssesc": "^3.0.0",
 
+        "util-deprecate": "^1.0.2"
 
+      }
 
+    },
 
+    "postcss-value-parser": {
 
+      "version": "4.2.0",
 
+      "resolved": "https://registry.npmmirror.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
 
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
 
+      "dev": true
 
+    },
 
     "punycode": {
 
     "punycode": {
 
       "version": "2.3.0",
 
       "version": "2.3.0",
 
       "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.0.tgz",
 
       "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.0.tgz",
 
@@ -1992,6 +2311,15 @@
 
         "ajv-keywords": "^3.5.2"
 
         "ajv-keywords": "^3.5.2"
 
       }
 
       }
 
     },
 
     },
 
+    "semver": {
 
+      "version": "7.3.8",
 
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-7.3.8.tgz",
 
+      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
 
+      "dev": true,
 
+      "requires": {
 
+        "lru-cache": "^6.0.0"
 
+      }
 
+    },
 
     "serialize-javascript": {
 
     "serialize-javascript": {
 
       "version": "6.0.1",
 
       "version": "6.0.1",
 
       "resolved": "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
 
       "resolved": "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
 
@@ -2031,6 +2359,12 @@
 
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
 
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
 
       "dev": true
 
       "dev": true
 
     },
 
     },
 
+    "source-map-js": {
 
+      "version": "1.0.2",
 
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz",
 
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
 
+      "dev": true
 
+    },
 
     "source-map-support": {
 
     "source-map-support": {
 
       "version": "0.5.21",
 
       "version": "0.5.21",
 
       "resolved": "https://registry.npmmirror.com/source-map-support/-/source-map-support-0.5.21.tgz",
 
       "resolved": "https://registry.npmmirror.com/source-map-support/-/source-map-support-0.5.21.tgz",
 
@@ -2041,6 +2375,13 @@
 
         "source-map": "^0.6.0"
 
         "source-map": "^0.6.0"
 
       }
 
       }
 
     },
 
     },
 
+    "style-loader": {
 
+      "version": "3.3.2",
 
+      "resolved": "https://registry.npmmirror.com/style-loader/-/style-loader-3.3.2.tgz",
 
+      "integrity": "sha512-RHs/vcrKdQK8wZliteNK4NKzxvLBzpuHMqYmUVWeKa6MkaIQ97ZTOS0b+zapZhy6GcrgWnvWYCMHRirC3FsUmw==",
 
+      "dev": true,
 
+      "requires": {}
 
+    },
 
     "supports-color": {
 
     "supports-color": {
 
       "version": "8.1.1",
 
       "version": "8.1.1",
 
       "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-8.1.1.tgz",
 
       "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-8.1.1.tgz",
 
@@ -2106,6 +2447,12 @@
 
         "punycode": "^2.1.0"
 
         "punycode": "^2.1.0"
 
       }
 
       }
 
     },
 
     },
 
+    "util-deprecate": {
 
+      "version": "1.0.2",
 
+      "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
 
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 
+      "dev": true
 
+    },
 
     "watchpack": {
 
     "watchpack": {
 
       "version": "2.4.0",
 
       "version": "2.4.0",
 
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
 
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
 
@@ -2207,6 +2554,12 @@
 
       "resolved": "https://registry.npmmirror.com/wildcard/-/wildcard-2.0.0.tgz",
 
       "resolved": "https://registry.npmmirror.com/wildcard/-/wildcard-2.0.0.tgz",
 
       "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
 
       "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
 
       "dev": true
 
       "dev": true
 
+    },
 
+    "yallist": {
 
+      "version": "4.0.0",
 
+      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
 
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
 
+      "dev": true
 
     }
 
     }
 
   }
 
   }
 
 }
 
 }

+ 2 - 0
18_Webpack/day-1/webpack_project/package.json
Файл харах 

@@ -12,6 +12,8 @@
 
   "author": "",
 
   "author": "",
 
   "license": "ISC",
 
   "license": "ISC",
 
   "devDependencies": {
 
   "devDependencies": {
 
+    "css-loader": "^6.7.3",
 
+    "style-loader": "^3.3.2",
 
     "webpack": "^5.78.0",
 
     "webpack": "^5.78.0",
 
     "webpack-cli": "^5.0.1"
 
     "webpack-cli": "^5.0.1"
 
   }
 
   }

+ 14 - 0
18_Webpack/day-1/webpack_project/src/common.css
Файл харах 

@@ -0,0 +1,14 @@
 
+body {
 
+  margin: 0;
 
+  padding: 0;
 
+}
 
+
 
+.box {
 
+  width: 200px;
 
+  height: 200px;
 
+
 
+  background-color: aquamarine;
 
+  border-radius: 10px;
 
+
 
+  margin: 10px auto;
 
+}

+ 2 - 0
18_Webpack/day-1/webpack_project/src/main.js
Файл харах 

@@ -1,3 +1,5 @@
 
+import './common.css';
 
+
 
 console.log('hello, world.');
 
 console.log('hello, world.');
 
 
 
 let promise = new Promise((resolve, reject) => {
 
 let promise = new Promise((resolve, reject) => {

+ 9 - 0
18_Webpack/day-1/webpack_project/webpack.config.js
Файл харах 

@@ -6,6 +6,7 @@
 
 const path = require('path');
 
 const path = require('path');
 
 
 
 module.exports = {
 
 module.exports = {
 
+  mode: 'development',
 
   entry: './src/main.js', // 只能配置单入口
 
   entry: './src/main.js', // 只能配置单入口
 
   // 下面写法 即可配置 多入口 当然也可以配置多入口
 
   // 下面写法 即可配置 多入口 当然也可以配置多入口
 
   // entry: {
 
   // entry: {
 
@@ -17,4 +18,12 @@ module.exports = {
 
     // 第二个 就是 打包后文件名
 
     // 第二个 就是 打包后文件名
 
     filename: 'main.buddle.js',
 
     filename: 'main.buddle.js',
 
   }, // 出口
 
   }, // 出口
 
+  module: {
 
+    rules: [
 
+      {
 
+        test: /\.css$/,
 
+        use: ['style-loader', 'css-loader'],
 
+      },
 
+    ],
 
+  },
 
 };
 
 };

+ 9 - 1
18_Webpack/day-1/webpack_project/webpack.config.v1.js
Файл харах 

@@ -6,7 +6,7 @@
 
 const path = require('path');
 
 const path = require('path');
 
 
 
 module.exports = {
 
 module.exports = {
 
-  mode: 'development', // 有两种模式：开发阶段 development 和 生产环境 production
 
+  mode: 'production', // 有两种模式：开发阶段 development 和 生产环境 production
 
   entry: './src/main.js', // 只能配置单入口
 
   entry: './src/main.js', // 只能配置单入口
 
   // 下面写法 即可配置 多入口 当然也可以配置多入口
 
   // 下面写法 即可配置 多入口 当然也可以配置多入口
 
   // entry: {
 
   // entry: {
 
@@ -18,4 +18,12 @@ module.exports = {
 
     // 第二个 就是 打包后文件名
 
     // 第二个 就是 打包后文件名
 
     filename: 'main.buddle.js',
 
     filename: 'main.buddle.js',
 
   }, // 出口
 
   }, // 出口
 
+  module: {
 
+    rules: [
 
+      {
 
+        test: /\.css$/,
 
+        use: ['style-loader', 'css-loader'],
 
+      },
 
+    ],
 
+  },
 
 };
 
 };

Энэ ялгаанд хэт олон файл өөрчлөгдсөн тул зарим файлыг харуулаагүй болно