From fff23ae7bf598aeb20ec310e81643ab2c9b8329e Mon Sep 17 00:00:00 2001
From: Yan <1453053689@qq.com>
Date: Sun, 29 Sep 2024 10:22:23 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E8=A1=A5=E5=85=85webpack=E7=AC=94?=
=?UTF-8?q?=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.vitepress/cache/deps/_metadata.json | 18 +-
...ss\345\267\245\347\250\213\345\214\226.md" | 144 +++++
...ss\346\250\241\345\235\227\345\214\226.md" | 205 +++++++
...75\345\220\215\350\247\204\350\214\203.md" | 75 +++
.../04.css-in-js.md" | 150 +++++
.../05.css-module.md" | 187 ++++++
...ss\347\232\204\344\275\277\347\224\250.md" | 315 ++++++++++
...44\270\255\344\275\277\347\224\250less.md" | 136 +++++
.../08.postcss.md" | 571 ++++++++++++++++++
...270\255\344\275\277\347\224\250postcss.md" | 123 ++++
...73\346\210\220\346\226\207\344\273\266.md" | 194 ++++++
.../assets/2020-01-31-09-53-31.png" | Bin 0 -> 189598 bytes
.../assets/2020-01-31-13-54-37.png" | Bin 0 -> 24931 bytes
.../assets/2020-01-31-14-00-56.png" | Bin 0 -> 23417 bytes
.../assets/2020-01-31-14-04-11.png" | Bin 0 -> 47510 bytes
.../assets/2020-01-31-14-08-49.png" | Bin 0 -> 35137 bytes
.../assets/2020-02-03-11-48-45.png" | Bin 0 -> 37627 bytes
.../assets/2020-02-03-11-50-05.png" | Bin 0 -> 42085 bytes
.../assets/2020-02-04-14-31-33.png" | Bin 0 -> 15572 bytes
.../assets/2020-02-04-14-37-51.png" | Bin 0 -> 15430 bytes
.../assets/2020-02-05-14-37-11.png" | Bin 0 -> 8516 bytes
.../assets/postcss-workflow.png" | Bin 0 -> 19843 bytes
...05\345\222\214\344\275\277\347\224\250.md" | 66 ++
.../02.babel\351\242\204\350\256\276.md" | 132 ++++
.../03.babel\346\217\222\344\273\266.md" | 198 ++++++
...4\270\255\344\275\277\347\224\250babel.md" | 99 +++
...73\347\232\204\350\275\254\346\215\242.md" | 156 +++++
...it\347\232\204\350\275\254\346\215\242.md" | 87 +++
.../assets/2020-02-07-10-12-01.png" | Bin 0 -> 541672 bytes
.../assets/2020-02-07-10-25-56.png" | Bin 0 -> 14002 bytes
.../assets/2020-02-07-10-27-30.png" | Bin 0 -> 14092 bytes
...30\345\214\226\346\246\202\345\277\265.md" | 38 ++
...41\345\235\227\350\247\243\346\236\220.md" | 68 +++
...\214\226loader\346\200\247\350\203\275.md" | 157 +++++
...347\203\255\346\233\264\346\226\260HMR.md" | 70 +++
...13\345\212\250\345\210\206\345\214\205.md" | 323 ++++++++++
...52\345\212\250\345\210\206\345\214\205.md" | 409 +++++++++++++
...43\347\240\201\345\216\213\347\274\251.md" | 157 +++++
.../08.tree-shaking.md" | 314 ++++++++++
...9.\346\207\222\345\212\240\350\275\275.md" | 128 ++++
.../10.Eslint.md" | 129 ++++
.../11.bundle-analyzer.md" | 93 +++
.../12.gzip\345\216\213\347\274\251.md" | 61 ++
.../assets/2020-02-12-09-53-01.png" | Bin 0 -> 12204 bytes
.../assets/2020-02-13-16-26-41.png" | Bin 0 -> 48231 bytes
.../assets/2020-02-13-16-28-10.png" | Bin 0 -> 35762 bytes
.../assets/2020-02-21-13-32-36.png" | Bin 0 -> 33344 bytes
.../assets/2020-02-21-14-20-49.png" | Bin 0 -> 14511 bytes
.../assets/2020-02-21-14-22-32.png" | Bin 0 -> 18271 bytes
.../assets/2020-02-21-14-34-05.png" | Bin 0 -> 5899 bytes
.../assets/2020-02-24-13-24-57.png" | Bin 0 -> 28818 bytes
.../assets/2020-02-24-17-19-47.png" | Bin 0 -> 27923 bytes
.../assets/2020-02-28-15-37-26.png" | Bin 0 -> 17505 bytes
.../assets/2020-02-28-15-41-44.png" | Bin 0 -> 18642 bytes
.../assets/auto-subpackage.png" | Bin 0 -> 59714 bytes
.../assets/bundle-analyzer.png" | Bin 0 -> 1687757 bytes
...7\350\203\275\344\274\230\345\214\226.png" | Bin 0 -> 182404 bytes
...50\346\200\201\344\276\235\350\265\226.md" | 143 +++++
...32\351\241\265\345\272\224\347\224\250.md" | 31 +
...345\273\272vue\345\272\224\347\224\250.md" | 22 +
...5\273\272react\345\272\224\347\224\250.md" | 11 +
...45\273\272node\345\272\224\347\224\250.md" | 35 ++
...50\346\240\210\345\272\224\347\224\250.md" | 60 ++
src/views/personal/presume.md | 9 +-
64 files changed, 5102 insertions(+), 12 deletions(-)
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/01.\344\270\272\344\273\200\344\271\210css\345\267\245\347\250\213\345\214\226.md"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/02.\345\210\251\347\224\250webpack\345\260\206css\346\250\241\345\235\227\345\214\226.md"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/03.BEM\345\221\275\345\220\215\350\247\204\350\214\203.md"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/04.css-in-js.md"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/05.css-module.md"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/06.Less\347\232\204\344\275\277\347\224\250.md"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/07.\345\234\250webpack\344\270\255\344\275\277\347\224\250less.md"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/08.postcss.md"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/09.\345\234\250webpack\344\270\255\344\275\277\347\224\250postcss.md"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/10.\345\260\206css\346\212\275\347\246\273\346\210\220\346\226\207\344\273\266.md"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/assets/2020-01-31-09-53-31.png"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/assets/2020-01-31-13-54-37.png"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/assets/2020-01-31-14-00-56.png"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/assets/2020-01-31-14-04-11.png"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/assets/2020-01-31-14-08-49.png"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/assets/2020-02-03-11-48-45.png"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/assets/2020-02-03-11-50-05.png"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/assets/2020-02-04-14-31-33.png"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/assets/2020-02-04-14-37-51.png"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/assets/2020-02-05-14-37-11.png"
create mode 100644 "src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/assets/postcss-workflow.png"
create mode 100644 "src/views/note/12-webpack/04.js\345\205\274\345\256\271\346\200\247/01.babel\347\232\204\345\256\211\350\243\205\345\222\214\344\275\277\347\224\250.md"
create mode 100644 "src/views/note/12-webpack/04.js\345\205\274\345\256\271\346\200\247/02.babel\351\242\204\350\256\276.md"
create mode 100644 "src/views/note/12-webpack/04.js\345\205\274\345\256\271\346\200\247/03.babel\346\217\222\344\273\266.md"
create mode 100644 "src/views/note/12-webpack/04.js\345\205\274\345\256\271\346\200\247/04.\345\234\250webpack\344\270\255\344\275\277\347\224\250babel.md"
create mode 100644 "src/views/note/12-webpack/04.js\345\205\274\345\256\271\346\200\247/05.\346\211\251\345\261\225-\345\257\271\347\261\273\347\232\204\350\275\254\346\215\242.md"
create mode 100644 "src/views/note/12-webpack/04.js\345\205\274\345\256\271\346\200\247/06.\346\211\251\345\261\225-\345\257\271asynch\345\222\214await\347\232\204\350\275\254\346\215\242.md"
create mode 100644 "src/views/note/12-webpack/04.js\345\205\274\345\256\271\346\200\247/assets/2020-02-07-10-12-01.png"
create mode 100644 "src/views/note/12-webpack/04.js\345\205\274\345\256\271\346\200\247/assets/2020-02-07-10-25-56.png"
create mode 100644 "src/views/note/12-webpack/04.js\345\205\274\345\256\271\346\200\247/assets/2020-02-07-10-27-30.png"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/01.\346\200\247\350\203\275\344\274\230\345\214\226\346\246\202\345\277\265.md"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/02.\345\207\217\345\260\221\346\250\241\345\235\227\350\247\243\346\236\220.md"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/03.\344\274\230\345\214\226loader\346\200\247\350\203\275.md"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/04.\347\203\255\346\233\264\346\226\260HMR.md"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/05.\346\211\213\345\212\250\345\210\206\345\214\205.md"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/06.\350\207\252\345\212\250\345\210\206\345\214\205.md"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/07.\344\273\243\347\240\201\345\216\213\347\274\251.md"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/08.tree-shaking.md"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/09.\346\207\222\345\212\240\350\275\275.md"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/10.Eslint.md"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/11.bundle-analyzer.md"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/12.gzip\345\216\213\347\274\251.md"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/assets/2020-02-12-09-53-01.png"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/assets/2020-02-13-16-26-41.png"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/assets/2020-02-13-16-28-10.png"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/assets/2020-02-21-13-32-36.png"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/assets/2020-02-21-14-20-49.png"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/assets/2020-02-21-14-22-32.png"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/assets/2020-02-21-14-34-05.png"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/assets/2020-02-24-13-24-57.png"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/assets/2020-02-24-17-19-47.png"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/assets/2020-02-28-15-37-26.png"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/assets/2020-02-28-15-41-44.png"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/assets/auto-subpackage.png"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/assets/bundle-analyzer.png"
create mode 100644 "src/views/note/12-webpack/05.\346\200\247\350\203\275\344\274\230\345\214\226/assets/\346\200\247\350\203\275\344\274\230\345\214\226.png"
create mode 100644 "src/views/note/12-webpack/06.\350\241\245\345\205\205\347\237\245\350\257\206\345\222\214\345\256\236\350\267\265/01.\346\211\251\345\261\225--\344\270\215\347\241\256\345\256\232\347\232\204\345\212\250\346\200\201\344\276\235\350\265\226.md"
create mode 100644 "src/views/note/12-webpack/06.\350\241\245\345\205\205\347\237\245\350\257\206\345\222\214\345\256\236\350\267\265/02.\346\220\255\345\273\272\345\244\232\351\241\265\345\272\224\347\224\250.md"
create mode 100644 "src/views/note/12-webpack/06.\350\241\245\345\205\205\347\237\245\350\257\206\345\222\214\345\256\236\350\267\265/03.\346\211\251\345\261\225-\346\220\255\345\273\272vue\345\272\224\347\224\250.md"
create mode 100644 "src/views/note/12-webpack/06.\350\241\245\345\205\205\347\237\245\350\257\206\345\222\214\345\256\236\350\267\265/04.\346\211\251\345\261\225-\346\220\255\345\273\272react\345\272\224\347\224\250.md"
create mode 100644 "src/views/note/12-webpack/06.\350\241\245\345\205\205\347\237\245\350\257\206\345\222\214\345\256\236\350\267\265/05.\346\220\255\345\273\272node\345\272\224\347\224\250.md"
create mode 100644 "src/views/note/12-webpack/06.\350\241\245\345\205\205\347\237\245\350\257\206\345\222\214\345\256\236\350\267\265/06.\346\220\255\345\273\272\345\205\250\346\240\210\345\272\224\347\224\250.md"
diff --git a/.vitepress/cache/deps/_metadata.json b/.vitepress/cache/deps/_metadata.json
index 519e309..a0106c0 100644
--- a/.vitepress/cache/deps/_metadata.json
+++ b/.vitepress/cache/deps/_metadata.json
@@ -1,43 +1,43 @@
{
- "hash": "c98421df",
+ "hash": "6b26a90e",
"configHash": "af8f88d3",
- "lockfileHash": "ca7da281",
- "browserHash": "677b5fbf",
+ "lockfileHash": "2dfc6867",
+ "browserHash": "de667daa",
"optimized": {
"vue": {
"src": "../../../node_modules/.pnpm/vue@3.4.38/node_modules/vue/dist/vue.runtime.esm-bundler.js",
"file": "vue.js",
- "fileHash": "3692a090",
+ "fileHash": "b320a92a",
"needsInterop": false
},
"vitepress > @vue/devtools-api": {
"src": "../../../node_modules/.pnpm/@vue+devtools-api@7.3.9/node_modules/@vue/devtools-api/dist/index.js",
"file": "vitepress___@vue_devtools-api.js",
- "fileHash": "918e7541",
+ "fileHash": "bd096a9c",
"needsInterop": false
},
"vitepress > @vueuse/core": {
"src": "../../../node_modules/.pnpm/@vueuse+core@11.0.3_vue@3.4.38/node_modules/@vueuse/core/index.mjs",
"file": "vitepress___@vueuse_core.js",
- "fileHash": "657538de",
+ "fileHash": "7db60fa0",
"needsInterop": false
},
"vitepress > @vueuse/integrations/useFocusTrap": {
"src": "../../../node_modules/.pnpm/@vueuse+integrations@11.0.3_focus-trap@7.5.4_vue@3.4.38/node_modules/@vueuse/integrations/useFocusTrap.mjs",
"file": "vitepress___@vueuse_integrations_useFocusTrap.js",
- "fileHash": "16e8f27d",
+ "fileHash": "44dcf4b7",
"needsInterop": false
},
"vitepress > mark.js/src/vanilla.js": {
"src": "../../../node_modules/.pnpm/mark.js@8.11.1/node_modules/mark.js/src/vanilla.js",
"file": "vitepress___mark__js_src_vanilla__js.js",
- "fileHash": "789a3184",
+ "fileHash": "5d2eccb9",
"needsInterop": false
},
"vitepress > minisearch": {
"src": "../../../node_modules/.pnpm/minisearch@7.1.0/node_modules/minisearch/dist/es/index.js",
"file": "vitepress___minisearch.js",
- "fileHash": "1dbaac72",
+ "fileHash": "074aae20",
"needsInterop": false
}
},
diff --git "a/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/01.\344\270\272\344\273\200\344\271\210css\345\267\245\347\250\213\345\214\226.md" "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/01.\344\270\272\344\273\200\344\271\210css\345\267\245\347\250\213\345\214\226.md"
new file mode 100644
index 0000000..1f07362
--- /dev/null
+++ "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/01.\344\270\272\344\273\200\344\271\210css\345\267\245\347\250\213\345\214\226.md"
@@ -0,0 +1,144 @@
+# css 工程化概述 {ignore}
+
+## css 的问题
+
+### 类名冲突的问题
+
+当你写一个 css 类的时候,你是写全局的类呢,还是写多个层级选择后的类呢?
+
+你会发现,怎么都不好
+
+- 过深的层级不利于编写、阅读、压缩、复用
+- 过浅的层级容易导致类名冲突
+
+一旦样式多起来,这个问题就会变得越发严重,其实归根结底,就是类名冲突不好解决的问题
+
+```css
+.test{
+ xxx
+}
+
+//推荐 --嵌套的写法可以解决类名冲突,但是也仅限于css工程化之前使用
+.xxx .Xxx .test{
+
+}
+```
+
+### 重复样式
+
+这种问题就更普遍了,一些重复的样式值总是不断的出现在 css 代码中,维护起来极其困难
+
+比如,一个网站的颜色一般就那么几种:
+
+- primary
+- info
+- warn
+- error
+- success
+
+如果有更多的颜色,都是从这些色调中自然变化得来,可以想象,这些颜色会到处充斥到诸如背景、文字、边框中,一旦要做颜色调整,是一个非常大的工程
+
+```css
+主题:#f40 .box {
+ background: #f40;
+}
+
+.inner {
+ color: #f40;
+}
+
+//缺点:如果有一天,主题色变成了#f66,那么这所有用到的主题色的地方都需要更改
+```
+
+### css 文件细分问题
+
+在大型项目中,css 也需要更细的拆分,这样有利于 css 代码的维护。
+
+比如,有一个做轮播图的模块,它不仅需要依赖 js 功能,还需要依赖 css 样式,既然依赖的 js 功能仅关心轮播图,那 css 样式也应该仅关心轮播图,由此类推,不同的功能依赖不同的 css 样式、公共样式可以单独抽离,这样就形成了不同于过去的 css 文件结构:文件更多、拆分的更细
+
+而同时,在真实的运行环境下,我们却希望文件越少越好,这种情况和 JS 遇到的情况是一致的
+
+因此,对于 css,也需要工程化管理
+
+**从另一个角度来说,css 的工程化会遇到更多的挑战,因为 css 不像 JS,它的语法本身经过这么多年并没有发生多少的变化(css3 也仅仅是多了一些属性而已),对于 css 语法本身的改变也是一个工程化的课题**
+
+## 如何解决
+
+这么多年来,官方一直没有提出方案来解决上述问题
+
+一些第三方机构针对不同的问题,提出了自己的解决方案
+
+### 解决类名冲突
+
+一些第三方机构提出了一些方案来解决该问题,常见的解决方案如下:
+
+**命名约定**
+
+即提供一种命名的标准,来解决冲突,常见的标准有:
+
+- **BEM**
+- OOCSS
+- AMCSS
+- SMACSS
+- 其他
+
+**css in js**
+
+这种方案非常大胆,它觉得,css 语言本身几乎无可救药了,干脆直接用 js 对象来表示样式,然后把样式直接应用到元素的 style 中
+
+这样一来,css 变成了一个一个的对象,就可以完全利用到 js 语言的优势,你可以:
+
+- 通过一个函数返回一个样式对象
+- 把公共的样式提取到公共模块中返回
+- 应用 js 的各种特性操作对象,比如:混合、提取、拆分
+- 更多的花样
+
+```js
+//commonStyle.js
+module.exports={
+ background:#f40,
+ color:#999
+}
+
+//index.css
+const commonStyle=require("./commonStyle.js")
+const styles={
+ ...commonStyle,
+ borderRadius:"1px soild #ccc"
+}
+/*传入一个对象,取出其中一个属性*/
+function take(commonStyle,"color") => {color:"xxx"}
+
+//这样就灵活了
+```
+
+> 这种方案在手机端的 React Native 中大行其道
+
+**css module**
+
+非常有趣和好用的 css 模块化方案,编写简单,绝对不重名
+
+具体的课程中详细介绍
+
+### 解决重复样式的问题
+
+**css in js**
+
+这种方案虽然可以利用 js 语言解决重复样式值的问题,但由于太过激进,很多习惯写 css 的开发者编写起来并不是很适应
+
+**预编译器**
+
+有些第三方搞出一套 css 语言的进化版来解决这个问题,它支持变量、函数等高级语法,然后经过编译器将其编译成为正常的 css
+
+这种方案特别像构建工具,不过它仅针对 css
+
+常见的预编译器支持的语言有:
+
+- **less**
+- sass
+
+### 解决 css 文件细分问题
+
+这一部分,就要依靠构建工具,例如 webpack 来解决了
+
+**利用一些 loader 或 plugin 来打包、合并、压缩 css 文件**
diff --git "a/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/02.\345\210\251\347\224\250webpack\345\260\206css\346\250\241\345\235\227\345\214\226.md" "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/02.\345\210\251\347\224\250webpack\345\260\206css\346\250\241\345\235\227\345\214\226.md"
new file mode 100644
index 0000000..a580c4f
--- /dev/null
+++ "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/02.\345\210\251\347\224\250webpack\345\260\206css\346\250\241\345\235\227\345\214\226.md"
@@ -0,0 +1,205 @@
+# 利用 webpack 拆分 css {ignore}
+
+要拆分 css,就必须把 css 当成像 js 那样的模块;要把 css 当成模块,就必须有一个构建工具(webpack),它具备合并代码的能力
+
+**而 webpack 本身只能读取 css 文件的内容、将其当作 JS 代码进行分析,因此,会导致错误(原因是 AST 抽象语法树无法解析 css)**
+
+于是,就必须有一个 loader,能够将 css 代码转换为 js 代码,通过 AST 抽象语法树。
+
+**该问题解决了上个章节中提出的最后一问---如何将 css 进行细分。**
+
+## css-loader
+
+**css-loader 的作用,就是将 css 代码转换为 js 代码**
+
+```sh
+pnpm i css-loader -D
+```
+
+它的处理原理极其简单:将 css 代码作为字符串导出
+
+例如:
+
+```css
+.red {
+ color: "#f40";
+}
+```
+
+经过 css-loader 转换后变成 js 代码:
+
+```js
+module.exports = `.red{
+ color:"#f40";
+}`;
+```
+
+> 上面的 js 代码是经过我简化后的,不代表真实的 css-loader 的转换后代码,css-loader 转换后的代码会有些复杂,同时会导出更多的信息,但核心思想不变
+
+再例如:
+
+```css
+.red {
+ color: "#f40";
+ background: url("./bg.png")
+ //无法解析,因为图片通不过AST,需要file-loader或者url-loader
+;
+}
+```
+
+经过 css-loader 转换后变成 js 代码:
+
+```js
+var import1 = require("./bg.png"); //file-loader会返回解析后的路径
+module.exports = `.red{
+ color:"#f40";
+ background:url("${import1}")
+}`;
+```
+
+这样一来,经过 webpack 的后续处理,会把依赖`./bg.png`添加到模块列表,然后再将代码转换为
+
+```js
+var import1 = __webpack_require__("./src/bg.png");
+module.exports = `.red{
+ color:"#f40";
+ background:url("${import1}")
+}`;
+```
+
+再例如:
+
+```css
+@import "./reset.css"; //css-loader会将该模块解析为字符串,并拼接到最终结果去
+.red {
+ color: "#f40";
+ background: url("./bg.png");
+}
+```
+
+会转换为:
+
+```js
+var import1 = require("./reset.css");
+var import2 = require("./bg.png");
+module.exports = `${import1}
+.red{
+ color:"#f40";
+ background:url("${import2}")
+}`;
+```
+
+总结,css-loader 干了什么:
+
+1. 将 css 文件的内容作为字符串导出
+2. 将 css 中的其他依赖作为 require 导入,以便 webpack 分析依赖
+3. 就算多次导入引用,也只会执行一次,因为 webpack 分析依赖的时候会对照资源记录表
+
+## style-loader
+
+由于 css-loader 仅提供了将 css 转换为字符串导出的能力,剩余的事情要交给其他 loader 或 plugin 来处理
+
+style-loader 可以将 css-loader 转换后的代码进一步处理,将 css-loader 导出的字符串加入到页面的 style 元素中
+
+```sh
+pnpm i style-loader -D
+```
+
+例如:
+
+```css
+.red {
+ color: "#f40";
+}
+```
+
+经过 css-loader 转换后变成 js 代码:
+
+```js
+module.exports = `.red{
+ color:"#f40";
+}`;
+```
+
+经过 style-loader 转换后变成:
+
+```js
+module.exports = `.red{
+ color:"#f40";
+}`;
+var style = module.exports;
+var styleElem = document.createElement("style");
+styleElem.innerHTML = style;
+document.head.appendChild(styleElem);
+module.exports = {};
+```
+
+> 以上代码均为简化后的代码,并不代表真实的代码
+> style-loader 有能力避免同一个样式的重复导入
+
+## 实践
+
+src/index.js
+
+```js
+const bannerCss = require("./assets/banner.css"); //解析不了,我们要使用css-loader来解析css
+console.log(bannerCss.toString());
+
+const pagerCss = require("./assets/pager.css"); //解析不了,我们需要file-loader或者url-loader来解析里面引用的文件
+
+// //css-loader只是将css文件解析为js字符串,并没有自动的创建style插入到页面,这个工作需要style-loader来完成
+const style = document.createElement("style");
+style.innerHTML = pagerCss.toString();
+document.head.appendChild(style);
+```
+
+src/assets/banner.css
+
+```css
+.banner {
+ color: "#f40";
+}
+```
+
+src/assets/pager.css
+
+```css
+@import "./banner.css";
+
+.pager {
+ width: 1000px;
+ height: 1000px;
+ color: "#f40";
+ /* 需要file-loader或者url-loader */
+ background: url("./bg.png");
+}
+```
+
+webpack.config.js
+
+```js
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+
+module.exports = {
+ mode: "development",
+ devtool: "source-map",
+ watch: true,
+ module: {
+ rules: [
+ //loader执行顺序是从后向前的,这里是要先css-loader然后才style-loader
+ { test: /\.css$/, use: ["style-loader", "css-loader"] },
+ { test: /\.png$/, use: "file-loader" },
+ ],
+ },
+ //
+ plugins: [new CleanWebpackPlugin()],
+};
+```
+
+## 总结
+
+我们只需要记住一点,webpack 想要解析 css 的话,就需要 loader 来进行。
+
+我们可以使用`css-loader`和`style-loader`来解析,有了这两个 loader,我们就解决了 css 模块化的问题。。
+
+以后还会介绍将 css 以文件的形式生成的插件 plugins。
diff --git "a/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/03.BEM\345\221\275\345\220\215\350\247\204\350\214\203.md" "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/03.BEM\345\221\275\345\220\215\350\247\204\350\214\203.md"
new file mode 100644
index 0000000..e3b4041
--- /dev/null
+++ "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/03.BEM\345\221\275\345\220\215\350\247\204\350\214\203.md"
@@ -0,0 +1,75 @@
+# BEM
+
+BEM 是一套针对 css 类样式的命名方法,是解决类名冲突的一种规范。
+
+> 其他命名方法还有:OOCSS、AMCSS、SMACSS 等等
+
+BEM 全称是:**B**lock **E**lement **M**odifier
+
+一个完整的 BEM 类名:block**element_modifier,例如:```banner**dot_selected```,可以表示:轮播图中,处于选中状态的小圆点
+
+![](assets/2020-01-31-09-53-31.png)
+
+三个部分的具体含义为:
+
+- **Block**:页面中的大区域,表示最顶级的划分,例如:轮播图(`banner`)、布局(`layout`)、文章(`article`)等等
+- **element**:区域中的组成部分,例如:轮播图中的横幅图片(`banner__img`)、轮播图中的容器(`banner__container`)、布局中的头部(`layout__header`)、文章中的标题(`article_title`)
+- **modifier**:可选。通常表示状态,例如:处于展开状态的布局左边栏(`layout__left_expand`)、处于选中状态的轮播图小圆点(`banner__dot_selected`)
+
+```css
+.banner__container{
+ xxx
+}
+.bannner__dots__selected{
+ xxx
+}
+
+/*允许*/
+.banner__containner img{
+ xxx
+}
+```
+
+在某些大型工程中,如果使用 BEM 命名法,还可能会增加一个前缀,来表示类名的用途,常见的前缀有:
+
+- **l**: layout,表示这个样式是用于布局的
+- **c**: component,表示这个样式是一个组件,即一个功能区域
+- **u**: util,表示这个样式是一个通用的、工具性质的样式
+- **j**: javascript,表示这个样式没有实际意义,是专门提供给 js 获取元素使用的
+
+```css
+.u-primary__box{
+ xxx
+}
+```
+
+## 实践
+
+```html
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+```
diff --git "a/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/04.css-in-js.md" "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/04.css-in-js.md"
new file mode 100644
index 0000000..1327a48
--- /dev/null
+++ "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/04.css-in-js.md"
@@ -0,0 +1,150 @@
+# css in js
+
+## 介绍
+
+css in js 的核心思想是:用一个 JS 对象来描述样式,而不是 css 样式表
+
+例如下面的对象就是一个用于描述样式的对象:
+
+```js
+const styles = {
+ backgroundColor: "#f40",
+ color: "#fff",
+ width: "400px",
+ height: "500px",
+ margin: "0 auto",
+};
+```
+
+由于这种描述样式的方式**根本就不存在类名**,自然不会有类名冲突
+
+至于如何把样式应用到界面上,不是它所关心的事情,你可以用任何技术、任何框架、任何方式将它应用到界面。
+
+> 后续学习的 vue、react 都支持 css in js,可以非常轻松的应用到界面
+
+css in js 的特点:
+
+- **绝无冲突的可能**:由于它根本不存在类名,所以绝不可能出现类名冲突
+- **更加灵活**:可以充分利用 JS 语言灵活的特点,用各种招式来处理样式
+- **应用面更广**:只要支持 js 语言,就可以支持 css in js,因此,在一些用 JS 语言开发移动端应用的时候非常好用,因为移动端应用很有可能并不支持 css
+- **书写不便**:书写样式,特别是公共样式的时候,处理起来不是很方便
+- **在页面中增加了大量冗余内容**:在页面中处理 css in js 时,往往是将样式加入到元素的 style 属性中,会大量增加元素的内联样式,并且可能会有大量重复,不易阅读最终的页面代码
+
+## 实践
+
+**1.不存在类名冲突**
+::: code-group
+
+```html
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+```
+
+```js [scripts/index.js]
+import { applyStyles } from "./apply.js";
+
+const style = {
+ width: "500px",
+ height: "500px",
+ backgroundColor: "#f55",
+ color: "#fff",
+ border: "2px solid #333",
+ margin: "0 auto",
+};
+
+const box1 = document.querySelector("#box1");
+const box2 = document.querySelector("#box2");
+
+applyStyles(box1, style); //将style应用到页面dom
+applyStyles(box2, style);
+```
+
+```js [scripts/utils.js]
+/**
+ * 将样式应用到页面
+ * @param {*} dom dom元素
+ * @param {*} styles 样式对象
+ */
+export function applyStyles(dom, styles) {
+ for (const key in styles) {
+ const value = styles[key];
+ dom.style[key] = value;
+ }
+}
+```
+
+:::
+**2.再看一下 css in js 的灵活性**
+
+主要是对 apply.js 进行了更改
+
+::: code-group
+
+```js [utils.js]
+/**
+ * 将样式应用到页面
+ * @param {*} dom dom元素
+ * @param {*} styles 样式对象
+ */
+export function applyStyles(dom, ...styles) {
+ let resStyles = {}; //最终合并的对象
+ //合并一下属性,剩余运算符保证函数可以传入多个参数
+ for (const style of styles) {
+ resStyles = { ...resStyles, ...style };
+ }
+
+ for (const key in resStyles) {
+ const value = resStyles[key];
+ dom.style[key] = value;
+ }
+}
+```
+
+```js [scripts/common.js]
+// 公共样式,对公共的样式进行抽离
+export const redBG = {
+ backgroundColor: "#f55",
+};
+
+// 可以将样式写成函数,更加灵活
+export const border = (width = 2, color = "#ebeef5") => {
+ return {
+ border: `${width}px solid ${color}`,
+ };
+};
+```
+
+```js [index.js]
+import { applyStyles } from "./apply.js";
+import { border, redBG } from "./common.js";
+
+const style = {
+ width: "500px",
+ height: "500px",
+ color: "#fff",
+ margin: "0 auto",
+};
+
+const box1 = document.querySelector("#box1");
+const box2 = document.querySelector("#box2");
+
+applyStyles(box1, style, redBG, border(1, "#333")); //使用样式,添加到dom
+applyStyles(box2, style, redBG, border());
+```
+
+:::
+**css in js 在移动端的应用更加广泛,跨平台也更方便,我们不需要关注怎么将样式应用到页面,那是由平台框架所提供的。**
+
+**在 PC 样式是 css,而在移动端就不一样了,各有差异**
diff --git "a/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/05.css-module.md" "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/05.css-module.md"
new file mode 100644
index 0000000..03eae95
--- /dev/null
+++ "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/05.css-module.md"
@@ -0,0 +1,187 @@
+# css module {ignore}
+
+> 通过命名规范来限制类名太过死板,而 css in js 虽然足够灵活,但是书写不便。
+> css module 开辟一种全新的思路来解决类名冲突的问题
+
+## 思路
+
+css module 遵循以下思路解决类名冲突问题:
+
+1. css 的类名冲突往往发生在大型项目中
+2. 大型项目往往会使用构建工具(webpack 等)搭建工程
+3. 构建工具允许将 css 样式切分为更加精细的模块
+4. 同 JS 的变量一样,每个 css 模块文件中难以出现冲突的类名,冲突的类名往往发生在不同的 css 模块文件中
+5. 只需要保证构建工具在合并样式代码后不会出现类名冲突即可
+
+![](assets/2020-01-31-13-54-37.png)
+
+## 实现原理
+
+在 webpack 中,作为处理 css 的 css-loader,它实现了 css module 的思想,要启用 css module,需要将 css-loader 的配置`modules`设置为`true`。
+
+css-loader 的实现方式如下:
+
+![](assets/2020-01-31-14-00-56.png)
+
+原理极其简单,开启了 css module 后,css-loader 会将样式中的类名进行转换,转换为一个唯一的 hash 值。
+
+**由于 hash 值是根据模块路径和类名生成的**,因此,不同的 css 模块,哪怕具有相同的类名,转换后的 hash 值也不一样。
+
+![](assets/2020-01-31-14-04-11.png)
+
+## 如何应用样式
+
+css module 带来了一个新的问题:源代码的类名和最终生成的类名是不一样的,而开发者只知道自己写的源代码中的类名,并不知道最终的类名是什么,那如何应用类名到元素上呢?
+
+为了解决这个问题,css-loader 会导出原类名和最终类名的对应关系,该关系是通过一个对象描述的
+
+![](assets/2020-01-31-14-08-49.png)
+
+这样一来,我们就可以在 js 代码中获取到 css 模块导出的结果,从而应用类名了
+
+style-loader 为了我们更加方便的应用类名,会去除掉其他信息,仅暴露对应关系
+
+## 其他操作
+
+### 全局类名
+
+某些类名是全局的、静态的,不需要进行转换,仅需要在类名位置使用一个特殊的语法即可:
+
+```css
+:global(.main) {
+ ...;
+}
+```
+
+使用了 global 的类名不会进行转换,相反的,没有使用 global 的类名,表示默认使用了 local
+
+```css
+:local(.main) {
+ ...;
+}
+```
+
+使用了 local 的类名表示局部类名,是可能会造成冲突的类名,会被 css module 进行转换
+
+### 如何控制最终的类名
+
+绝大部分情况下,我们都不需要控制最终的类名,因为控制它没有任何意义
+
+如果一定要控制最终的类名,需要配置 css-loader 的`localIdentName`
+
+## 其他注意事项
+
+- css module 往往配合构建工具使用
+- css module 仅处理顶级类名,尽量不要书写嵌套的类名,也没有这个必要
+- css module 仅处理类名,不处理其他选择器
+- css module 还会处理 id 选择器,不过任何时候都没有使用 id 选择器的理由
+- 使用了 css module 后,只要能做到让类名望文知意即可,不需要遵守其他任何的命名规范
+
+## 实践
+
+::: code-group [index.html]
+
+```html
+
+
+
+
+
+
+ Document
+
+
+
+ asdfasdfasf
+ Lorem ipsum dolor sit.
+
+
+```
+
+```css [src/assets/style1.css]
+.c1 {
+ color: red;
+}
+
+.c2 {
+ font-size: 18px;
+}
+```
+
+```css [src/assets/style2.css]
+.c1 {
+ color: #ccc;
+}
+
+.c2 {
+ font-size: 20px;
+}
+```
+
+```js [src/index.js]
+const style1 = require("./assets/style1.css");
+const style2 = require("./assets/style2.css");
+
+/*
+对css module的使用很简单
+1.css-loader内部实现了css module的规范,只需要给css-loader配置项开启modules选项
+2.style-loader又对css-loader的返回做了处理,引入css模块的时候,会给出一个对应hash的配置对象
+3.添加类名的时候使用即可。
+*/
+console.log(style1);
+console.log(style2);
+const div = document.querySelector(".div1");
+div.className = `${style1.c1} ${style1.c2}`;
+
+/*
+注意
+1.只会对类名进行hash话,对id,标签选择器不会
+2.我们写类名的时候不需要再使用嵌套了,只需要对起的类名望文生义即可
+*/
+```
+
+```js [webpack.config.js]
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+ mode: "development",
+ devtool: "source-map",
+ devServer: {
+ open: true,
+ },
+ //
+ module: {
+ //常用的是这种配置
+ rules: [{ test: /\.css$/, use: ["style-loader", "css-loader?modules"] }],
+ // rules: [
+ // {
+ // test: /\.css$/,
+ // use: [
+ // "style-loader",
+ // {
+ // loader: "css-loader",
+ // options: {
+ // modules: {
+ // // 控制输出的name格式
+ // localIdentName: "[local]-[hash:5]",
+ // },
+ // },
+ // },
+ // ],
+ // },
+ // ],
+ },
+ //
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: "./public/index.html",
+ }),
+ ],
+ //
+ stats: {
+ colors: true, //输出信息带颜色
+ modules: false, //是否输出打包的文件
+ },
+};
+```
+:::
diff --git "a/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/06.Less\347\232\204\344\275\277\347\224\250.md" "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/06.Less\347\232\204\344\275\277\347\224\250.md"
new file mode 100644
index 0000000..7a211f0
--- /dev/null
+++ "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/06.Less\347\232\204\344\275\277\347\224\250.md"
@@ -0,0 +1,315 @@
+# CSS 预编译器 {ignore}
+
+## 基本原理
+
+编写 css 时,受限于 css 语言本身,常常难以处理一些问题:
+
+- 重复的样式值:例如常用颜色、常用尺寸
+
+ (使用less的变量解决)
+
+- 重复的代码段:例如绝对定位居中、清除浮动
+
+ (使用less的混合)
+
+- 重复的嵌套书写
+
+ (使用less的嵌套)
+
+由于官方迟迟不对 css 语言本身做出改进,一些第三方机构开始想办法来解决这些问题
+
+其中一种方案,便是预编译器
+
+预编译器的原理很简单,即使用一种更加优雅的方式来书写样式代码,通过一个编译器,将其转换为可被浏览器识别的传统 css 代码
+
+![](assets/2020-02-03-11-48-45.png)
+
+目前,最流行的预编译器有**LESS**和**SASS**,由于它们两者特别相似,因此仅学习一种即可(本课程学习 LESS)
+
+![](assets/2020-02-03-11-50-05.png)
+
+> less 官网:http://lesscss.org/
+> less 中文文档 1(非官方):http://lesscss.cn/
+> less 中文文档 2(非官方):https://less.bootcss.com/
+> sass 官网:https://sass-lang.com/
+> sass 中文文档 1(非官方):https://www.sass.hk/
+> sass 中文文档 2(非官方):https://sass.bootcss.com/
+
+## LESS 的安装和使用
+
+less 是不会被浏览器所识别的,所以需要一个 lessc 来将 less 转为 css
+
+从原理可知,要使用 LESS,必须要安装 LESS 编译器
+
+LESS 编译器是基于 node 开发的,可以通过 npm 下载安装
+
+```shell
+npm i -D less
+```
+
+安装好了 less 之后,它提供了一个 CLI 工具`lessc`,通过该工具即可完成编译
+
+```shell
+# lessc 需要被编译的less文件 编译less文件存放的css文件
+lessc less代码文件 编译后的文件
+```
+
+试一试:
+
+新建一个`index.less`文件,编写内容如下:
+
+```less
+// less代码
+@red: #f40;
+
+.redcolor {
+ color: @red;
+}
+```
+
+运行命令:
+
+```shell
+lessc index.less index.css
+```
+
+可以看到编译之后的代码:
+
+```css
+.redcolor {
+ color: #f40;
+}
+```
+
+## LESS 的基本使用
+
+具体的使用见文档:https://less.bootcss.com/
+
+### 引入
+
+```less
+//less是不会被浏览器所识别的,所以需要一个lessc来将less转为css
+.my-div {
+ color: #f55;
+}
+
+// less代码
+@red: #f40;
+
+.redcolor {
+ color: @red;
+}
+```
+
+### 变量
+
+```less
+//1.变量
+@color: #f40;
+
+.box {
+ width: 100px;
+ height: 100px;
+ color: @color;
+}
+
+.box2 {
+ width: 50px;
+ height: 50px;
+ color: @color;
+ background-color: blue;
+}
+```
+
+### 混合
+
+```less
+//2混合
+
+//--会被编译进css文件
+// .center {
+// position: absolute;
+// top: 50%;
+// left: 50%;
+// transform: translate(-50%, -50%);
+// }
+
+//不会被编译进css文件
+// .center() {
+// position: absolute;
+// top: 50%;
+// left: 50%;
+// transform: translate(-50%, -50%);
+// }
+.center(@type: absolute) {
+ position: @type;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.pox1 {
+ width: 100px;
+ height: 100px;
+ color: @color;
+ .center();
+}
+```
+
+### 嵌套
+
+```less
+// 嵌套
+.box3 {
+ .nav {
+ width: 100px;
+ height: 20px;
+ background-color: skyblue;
+ }
+
+ & > span {
+ color: #333;
+ }
+
+ &::before {
+ content: "";
+ display: block;
+ width: 30px;
+ height: 20px;
+ }
+
+ &.actived {
+ background-color: #666;
+ color: #236;
+ }
+}
+```
+
+### 运算
+
+```less
+// 运算
+@width: 100cm;
+@baseWidth: 200px; //基础宽度;
+
+.box4 {
+ width: @width + 10mm;
+}
+
+.sidebar {
+ width: @baseWidth * 2; //页面山某个区域是基础宽度的2倍
+}
+```
+
+### 作用域
+
+```less
+// 作用域
+.box5 {
+ @height: 100px;
+
+ .box-nav {
+ height: @height;
+ }
+}
+
+.box6 {
+ height: @height; //编译的时候报错
+}
+```
+
+### 注释
+
+```less
+// less 注释,不会编译到css文件
+/* css 注释,会编译到css文件*/
+```
+
+### 函数
+
+```less
+// 函数,less官方提供了一些比较常用的函数,需要的时候去查阅API即可
+@some: foo;
+
+div {
+ margin: if((2 > 1), 0, 3px);
+ color: if((iscolor(@some)), @some, black);
+}
+
+// ###
+@red: #f55;
+
+.common() {
+ width: 100%;
+ height: 50px;
+}
+
+.div1 {
+ .common();
+ background-color: darken(@red, 10%);
+}
+
+.div2 {
+ .common();
+ background-color: darken(@red, 20%);
+}
+
+.div3 {
+ .common();
+ background-color: darken(@red, 30%);
+}
+```
+
+### 导入
+
+```less
+@import "library"; //library.less
+
+// @import "typo.css"; 会原封不动的放到编译后的css文件中
+```
+
+## 实际开发中的文件管理
+
+```js
+// 实际开发中一般会创建类似下面的文件目录
+/*
+-styles
+ -variable.less 存放变量
+ -theme.less 覆盖variable.less,自己定义的主题
+ -public.less 存放公共的类,混合
+ -index.less 整合导入这些less模块文件
+*/
+```
+
+::: code-group
+
+```less [variable.less]
+// 存放颜色变量和尺寸,可能会有上百个,ElementUI和AntdUI就是这样提供的
+@info: #333;
+@danger: #f40;
+@success: green;
+@warn: brown;
+```
+
+```less [theme.less]
+// 存放主题,一般用来覆盖variable.less提供的变量
+@danger: red;
+```
+
+```less [public.less]
+// 存放公共的样式和混合
+.center(@type: absolute) {
+ position: @type;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+```
+
+```less [index.less]
+@import "./variable.less";
+@import "./theme.less"; //一般这样去覆盖样式库提供的变量,达到自定义主题
+@import "./public.less";
+```
+
+:::
diff --git "a/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/07.\345\234\250webpack\344\270\255\344\275\277\347\224\250less.md" "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/07.\345\234\250webpack\344\270\255\344\275\277\347\224\250less.md"
new file mode 100644
index 0000000..7e02a25
--- /dev/null
+++ "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/07.\345\234\250webpack\344\270\255\344\275\277\347\224\250less.md"
@@ -0,0 +1,136 @@
+# 在 webpack 中使用 less
+
+## 分析 less-loader
+
+**分析**:
+webpack 打包的时候只认识 js,我们之前处理 css 的时候就依赖了 css-loader 和 style-loader。
+那么,我们想要让 webpack 打包 less 的时候,自然需要一个 loader 来转换代码,它就是 less-loader
+
+```js
+/*
+webpack只认识js
+less ==> css ==> js ==>应用到页面
+less-loader css-loader style-loader
+*/
+```
+
+## 使用
+
+**安装**
+
+```sh
+pnpm i less less-loader -D
+```
+
+**引入**
+
+webpack.config.js
+
+```js
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+ mode: "development",
+ devtool: "source-map",
+ //
+ devServer: {
+ open: true,
+ },
+ //
+ module: {
+ rules: [
+ { test: /\.css$/, use: ["style-loader", "css-loader"] },
+ {
+ test: /\.less$/,
+ //先让less-loader解析less,然后让css转换,最后添加在页面
+ use: ["style-loader", "css-loader", "less-loader"],
+ },
+ ],
+ },
+ // plugins
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: "./public/index.html",
+ }),
+ ],
+};
+```
+
+最后执行 `npx wenpack` 就可以解析 less 了
+
+## less 与其它解决变量的方案连用
+
+目前我们学习了以下几个解决方案:
+
+1. BEM
+2. Css Moudule
+3. css in js
+4. less
+
+less 可以与 1 2 连用,我们看最佳实践代码。
+
+## 最佳实践
+
+::: code-group
+
+```less [src/assets/index.less]
+//[src/assets/index.less]
+@color: red;
+
+.main {
+ color: @color;
+ font-size: 26px;
+}
+
+// 与BEM连用,只需要正常书写BEM规范即可
+.main-nav {
+ background-color: skyblue;
+}
+```
+
+```js [src/index.js]
+//[src/index.js]
+
+//与css module连用,css-loader内部实现了css-module,只需要配置的时候打开选项即可,style-loader又进一步对css-loader导出的代码做了简化处理,直接导入less文件使用就可以了
+const lessStyle = require("./assets/index.less");
+console.log("我是入口", lessStyle);
+// 使用
+const app = document.querySelector("#app");
+app.classList.add(lessStyle.main);
+```
+
+```js [webpack.config.js]
+//[webpack.config.js]
+
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+ mode: "development",
+ devtool: "source-map",
+ //
+ devServer: {
+ open: true,
+ },
+ //
+ module: {
+ rules: [
+ // 处理css
+ { test: /\.css$/, use: ["style-loader", "css-loader"] },
+ //处理less,并打开css-module,先让less-loader解析less
+ //然后让css-loader转换,最后style-loader添加在页面
+ {
+ test: /\.less$/,
+ use: ["style-loader", "css-loader?modules", "less-loader"],
+ },
+ ],
+ },
+ // plugins
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: "./public/index.html",
+ }),
+ ],
+};
+```
+
+:::
diff --git "a/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/08.postcss.md" "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/08.postcss.md"
new file mode 100644
index 0000000..3990eec
--- /dev/null
+++ "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/08.postcss.md"
@@ -0,0 +1,571 @@
+# PostCss {ignore}
+
+> 本节课的内容和 webpack 无关!!!
+
+# 什么是 PostCss
+
+学习到现在,可以看出,CSS 工程化面临着诸多问题,而解决这些问题的方案多种多样。
+
+如果把 CSS 单独拎出来看,光是样式本身,就有很多事情要处理。
+
+既然有这么多事情要处理,何不把这些事情集中到一起统一处理呢?
+
+PostCss 就是基于这样的理念出现的。
+
+PostCss 类似于一个编译器,可以将样式源码编译成最终的 CSS 代码
+
+![](assets/2020-02-04-14-31-33.png)
+
+看上去是不是和 LESS、SASS 一样呢?
+
+但 PostCss 和 LESS、SASS 的思路不同,它其实只做一些代码分析之类的事情,将分析的结果交给插件,具体的代码转换操作是插件去完成的。
+
+![](assets/2020-02-04-14-37-51.png)
+
+官方的一张图更能说明 postcss 的处理流程:
+
+![](assets/postcss-workflow.png)
+
+> 这一点有点像 webpack,webpack 本身仅做依赖分析、抽象语法树分析,其他的操作是靠插件和加载器完成的。
+>
+> post-css 和 webpack 一样,只是对 css 代码进行分析,而转换的步骤都交给插件进行了。
+
+官网地址:https://postcss.org/
+github 地址:https://github.com/postcss/postcss
+
+# 安装
+
+PostCss 是基于 node 编写的,因此可以使用 npm 安装
+
+```shell
+npm i -D postcss
+```
+
+postcss 库提供了对应的 js api 用于转换代码,如果你想使用 postcss 的一些高级功能,或者想开发 postcss 插件,就要 api 使用 postcss,api 的文档地址是:http://api.postcss.org/
+
+不过绝大部分时候,我们都是使用者,并不希望使用代码的方式来使用 PostCss
+
+因此,我们可以再安装一个 postcss-cli,通过命令行来完成编译
+
+```shell
+npm i -D postcss-cli
+```
+
+postcss-cli 提供一个命令,它调用 postcss 中的 api 来完成编译
+
+命令的使用方式为:
+
+```shell
+postcss 源码文件 -o 输出文件
+```
+
+postcss 可以识别`.pcss`结尾的文件,vscode 安装一个`postcss`插件用来进行高亮和代码提示.
+
+# 配置文件
+
+和 webpack 类似,postcss 有自己的配置文件,该配置文件会影响 postcss 的某些编译行为。
+
+配置文件的默认名称是:`postcss.config.js`
+
+例如:
+
+```js
+module.exports = {
+ map: false, //关闭source-map
+};
+```
+
+# 插件
+
+光使用 postcss 是没有多少意义的,要让它真正的发挥作用,需要插件
+
+postcss 的插件市场:https://www.postcss.parts/
+
+下面罗列一些 postcss 的常用插件
+
+## postcss-preset-env
+
+过去使用 postcss 的时候,往往会使用大量的插件,它们各自解决一些问题
+
+这样导致的结果是安装插件、配置插件都特别的繁琐
+
+于是出现了这么一个插件`postcss-preset-env`,它称之为`postcss预设环境`,大意就是它整合了很多的常用插件到一起,并帮你完成了基本的配置,你只需要安装它一个插件,就相当于安装了很多插件了。
+
+安装好该插件后,在 postcss 配置中加入下面的配置
+
+```js
+module.exports = {
+ plugins: {
+ "postcss-preset-env": {}, // {} 中可以填写插件的配置
+ },
+};
+```
+
+该插件的功能很多,下面一一介绍
+
+### 自动的厂商前缀
+
+某些新的 css 样式需要在旧版本浏览器中使用厂商前缀方可实现
+
+例如
+
+```css
+::placeholder {
+ color: red;
+}
+```
+
+该功能在不同的旧版本浏览器中需要书写为
+
+```css
+::-webkit-input-placeholder {
+ color: red;
+}
+::-moz-placeholder {
+ color: red;
+}
+:-ms-input-placeholder {
+ color: red;
+}
+::-ms-input-placeholder {
+ color: red;
+}
+::placeholder {
+ color: red;
+}
+```
+
+要完成这件事情,需要使用`autoprefixer`库。
+
+而`postcss-preset-env`内部包含了该库,自动有了该功能。
+
+如果需要调整**兼容的浏览器**范围,可以通过下面的方式进行配置
+
+**方式 1:在 postcss-preset-env 的配置中加入 browsers**
+
+```js
+module.exports = {
+ plugins: {
+ "postcss-preset-env": {
+ browsers: ["last 2 version", "> 1%"],
+ },
+ },
+};
+```
+
+**方式 2【推荐】:添加 .browserslistrc 文件**
+
+创建文件`.browserslistrc`,填写配置内容
+
+```
+last 2 version
+> 1%
+```
+
+**方式 3【推荐】:在 package.json 的配置中加入 browserslist**
+
+```json
+"browserslist": [
+ "last 2 version",
+ "> 1%"
+]
+```
+
+`browserslist`是一个多行的(数组形式的)标准字符串。
+
+它的书写规范多而繁琐,详情见:https://github.com/browserslist/browserslist
+
+一般情况下,大部分网站都使用下面的格式进行书写
+
+```
+last 2 version
+> 1% in CN
+not ie <= 8
+```
+
+- `last 2 version`: 浏览器的兼容最近期的两个版本
+- `> 1% in CN`: 匹配中国大于 1%的人使用的浏览器, `in CN`可省略
+- `not ie <= 8`: 排除掉版本号小于等于 8 的 IE 浏览器
+
+> 默认情况下,匹配的结果求的是并集
+
+你可以通过网站:https://browserl.ist/ 对配置结果覆盖的浏览器进行查询,查询时,多行之间使用英文逗号分割
+
+> browserlist 的数据来自于[CanIUse](http://caniuse.com/)网站,由于数据并非实时的,所以不会特别准确
+
+### 未来的 CSS 语法
+
+CSS 的某些前沿语法正在制定过程中,没有形成真正的标准,如果希望使用这部分语法,为了浏览器兼容性,需要进行编译
+
+过去,完成该语法编译的是`cssnext`库,不过有了`postcss-preset-env`后,它自动包含了该功能。
+
+你可以通过`postcss-preset-env`的`stage`配置,告知`postcss-preset-env`需要对哪个阶段的 css 语法进行兼容处理,它的默认值为 2
+
+```js
+"postcss-preset-env": {
+ stage: 0
+}
+```
+
+一共有 5 个阶段可配置:
+
+- Stage 0: Aspirational - 只是一个早期草案,极其不稳定
+- Stage 1: Experimental - 仍然极其不稳定,但是提议已被 W3C 公认
+- Stage 2: Allowable - 虽然还是不稳定,但已经可以使用了
+- Stage 3: Embraced - 比较稳定,可能将来会发生一些小的变化,它即将成为最终的标准
+- Stage 4: Standardized - 所有主流浏览器都应该支持的 W3C 标准
+
+了解了以上知识后,接下来了解一下未来的 css 语法,尽管某些语法仍处于非常早期的阶段,但是有该插件存在,编译后仍然可以被浏览器识别
+
+#### 变量
+
+未来的 css 语法是天然支持变量的
+
+在`:root{}`中定义常用变量,使用`--`前缀命名变量
+
+```css
+:root {
+ --lightColor: #ddd;
+ --darkColor: #333;
+}
+
+a {
+ color: var(--lightColor);
+ background: var(--darkColor);
+}
+```
+
+> 编译后,仍然可以看到原语法,因为某些新语法的存在并不会影响浏览器的渲染,尽管浏览器可能不认识
+> 如果不希望在结果中看到新语法,可以配置`postcss-preset-env`的`preserve`为`false`
+
+#### 自定义选择器
+
+```css
+@custom-selector :--heading h1, h2, h3, h4, h5, h6;
+@custom-selector :--enter :focus, :hover;
+
+a:--enter {
+ color: #f40;
+}
+
+:--heading {
+ font-weight: bold;
+}
+
+:--heading.active {
+ font-weight: bold;
+}
+```
+
+编译后
+
+```css
+a:focus,
+a:hover {
+ color: #f40;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-weight: bold;
+}
+
+h1.active,
+h2.active,
+h3.active,
+h4.active,
+h5.active,
+h6.active {
+ font-weight: bold;
+}
+```
+
+#### 嵌套
+
+与 LESS 相同,只不过嵌套的选择器前必须使用符号`&`
+
+```less
+.a {
+ color: red;
+ & .b {
+ color: green;
+ }
+
+ & > .b {
+ color: blue;
+ }
+
+ &:hover {
+ color: #000;
+ }
+}
+```
+
+编译后
+
+```css
+.a {
+ color: red;
+}
+
+.a .b {
+ color: green;
+}
+
+.a > .b {
+ color: blue;
+}
+
+.a:hover {
+ color: #000;
+}
+```
+
+## postcss-apply
+
+该插件可以支持在 css 中书写属性集
+
+类似于 LESS 中的混入,可以利用 CSS 的新语法定义一个 CSS 代码片段,然后在需要的时候应用它
+
+```less
+:root {
+ --center: {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
+}
+
+.item {
+ @apply --center;
+}
+```
+
+编译后
+
+```css
+.item {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+}
+```
+
+> 实际上,该功能也属于 cssnext,不知为何`postcss-preset-env`没有支持
+
+## postcss-color-function
+
+该插件支持在源码中使用一些颜色函数。(插件提供了一些函数,具体去官网搜索)
+
+```less
+body {
+ /* 使用颜色#aabbcc,不做任何处理,等同于直接书写 #aabbcc */
+ color: color(#aabbcc);
+ /* 将颜色#aabbcc透明度设置为90% */
+ color: color(#aabbcc a(90%));
+ /* 将颜色#aabbcc的红色部分设置为90% */
+ color: color(#aabbcc red(90%));
+ /* 将颜色#aabbcc调亮50%(更加趋近于白色),类似于less中的lighten函数 */
+ color: color(#aabbcc tint(50%));
+ /* 将颜色#aabbcc调暗50%(更加趋近于黑色),类似于less中的darken函数 */
+ color: color(#aabbcc shade(50%));
+}
+```
+
+编译后
+
+```css
+body {
+ /* 使用颜色#aabbcc,不做任何处理,等同于直接书写 #aabbcc */
+ color: rgb(170, 187, 204);
+ /* 将颜色#aabbcc透明度设置为90% */
+ color: rgba(170, 187, 204, 0.9);
+ /* 将颜色#aabbcc的红色部分设置为90% */
+ color: rgb(230, 187, 204);
+ /* 将颜色#aabbcc调亮50%(更加趋近于白色),类似于less中的lighten函数 */
+ color: rgb(213, 221, 230);
+ /* 将颜色#aabbcc调暗50%(更加趋近于黑色),类似于less中的darken函数 */
+ color: rgb(85, 94, 102);
+}
+```
+
+## [扩展]postcss-import
+
+该插件可以让你在`postcss`文件中导入其他样式代码,通过该插件可以将它们合并
+
+> 由于后续的课程中,会将 postcss 加入到 webpack 中,而 webpack 本身具有依赖分析的功能,所以该插件的实际意义不大
+
+## stylelint
+
+> 官网:https://stylelint.io/
+
+在实际的开发中,我们可能会错误的或不规范的书写一些 css 代码,stylelint 插件会即时的发现错误
+
+由于不同的公司可能使用不同的 CSS 书写规范,stylelint 为了保持灵活,它本身并没有提供具体的规则验证
+
+你需要安装或自行编写规则验证方案
+
+通常,我们会安装`stylelint-config-standard`库来提供标准的 CSS 规则判定
+
+安装好后,我们需要告诉 stylelint 使用该库来进行规则验证
+
+告知的方式有多种,比较常见的是使用文件`.stylelintrc`
+
+```json
+//.styleintrc
+{
+ "extends": "stylelint-config-standard"
+}
+```
+
+此时,如果你的代码出现不规范的地方,编译时将会报出错误
+
+```css
+body {
+ background: #f4;
+}
+```
+
+![](assets/2020-02-05-14-37-11.png)
+
+发生了两处错误:
+
+1. 缩进应该只有两个空格
+2. 十六进制的颜色值不正确
+
+如果某些规则并非你所期望的,可以在配置中进行设置
+
+```json
+{
+ "extends": "stylelint-config-standard",
+ "rules": {
+ "indentation": null
+ }
+}
+```
+
+设置为`null`可以禁用该规则,或者设置为 4,表示一个缩进有 4 个空格。具体的设置需要参见 stylelint 文档:https://stylelint.io/
+
+但是这种错误报告需要在编译时才会发生,如果我希望在编写代码时就自动在编辑器里报错呢?
+
+既然想在编辑器里达到该功能,那么就要在编辑器里做文章
+
+安装 vscode 的插件`stylelint`即可,它会读取你工程中的配置文件,按照配置进行实时报错
+
+> 实际上,如果你拥有了`stylelint`插件,可以不需要在 postcss 中使用该插件了
+
+## 实践
+
+::: code-group
+
+```css [/css/source.pcss]
+.main {
+ color: #f40;
+
+ transform: scale(2);
+}
+
+/* 自动厂商前缀 */
+::placeholder {
+ color: red;
+}
+
+div:has(> p) {
+ border: 1px solid red;
+}
+
+/* 变量 */
+:root {
+ --lightColor: #ddd;
+ --darkColor: #333;
+ --center: {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
+}
+
+.light {
+ background-color: var(--lightColor);
+}
+
+/* 自定义选择器 */
+@custom-selector :--heading h1, h2, h3, h4, h5, h6;
+@custom-selector :--enter :focus, :hover;
+
+/* a:focus,a:hover */
+a:--enter {
+ color: #f40;
+}
+
+/* h1,h2,h3,h4,h5,h6 */
+:--heading {
+ font-weight: bold;
+}
+
+/* h1.active,h2.active,h3.active,h4.active,h5.active,h6.active */
+:--heading.active {
+ font-weight: bold;
+}
+
+/* 嵌套 */
+.a {
+ color: red;
+ & .b {
+ color: green;
+ }
+
+ & > .b {
+ color: blue;
+ }
+
+ &:hover {
+ color: #000;
+ }
+}
+
+/* 混入 */
+.item {
+ @apply --center;
+ width: 300px;
+ height: 300px;
+ background: #f55;
+}
+
+/* post-css 函数 */
+body {
+ /* 使用颜色#aabbcc,不做任何处理,等同于直接书写 #aabbcc */
+ color: color(#aabbcc);
+ /* 将颜色#aabbcc透明度设置为90% */
+ color: color(#aabbcc a(90%));
+ /* 将颜色#aabbcc的红色部分设置为90% */
+ color: color(#aabbcc red(90%));
+ /* 将颜色#aabbcc调亮50%(更加趋近于白色),类似于less中的lighten函数 */
+ color: color(#aabbcc tint(50%));
+ /* 将颜色#aabbcc调暗50%(更加趋近于黑色),类似于less中的darken函数 */
+ color: color(#aabbcc shade(50%));
+}
+```
+
+```js [/postcss.config.js]
+module.exports = {
+ map: false, //关闭source-map
+ plugins: {
+ "postcss-preset-env": {}, //post css 的预设插件
+ "postcss-apply": {}, //支持兼容现代的css语法
+ "postcss-color-function": {}, //支持该插件的颜色函数
+ // "stylelint":{} //规范代码标准
+ },
+};
+```
+
+执行`postcss css/source.pcss -o css/out.css -w`看编译结果
+:::
diff --git "a/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/09.\345\234\250webpack\344\270\255\344\275\277\347\224\250postcss.md" "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/09.\345\234\250webpack\344\270\255\344\275\277\347\224\250postcss.md"
new file mode 100644
index 0000000..cd2a395
--- /dev/null
+++ "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/09.\345\234\250webpack\344\270\255\344\275\277\347\224\250postcss.md"
@@ -0,0 +1,123 @@
+# 在 webpack 中使用 postcss
+
+```js
+未来的 css 语法 --> 普通的 css --> js --> 页面 style 元素
+ postcss css-loader style-loader
+```
+
+## 步骤
+
+- 搭建 webpack 环境,需要安装
+
+```sh
+webpack
+webpack-cli
+html-webpack-plugin
+```
+
+- 准备.pcss 文件,在 index.js 引入
+- 下载 postcss 和 postcss-loader
+
+```sh
+#因为转换css代码依靠的是postcss的一个函数,这里就不需要使用postcss-cli了,直接使用loader
+pnpm i postcss postcss-loader -D
+```
+
+配置 postcss.config.js 文件,文件需要 postcss 插件[postcss-preset-env]
+配置.browserslistrc 文件
+
+- 下载安装 css-loader 和 style-loader,并在 webpack 中配置
+
+```sh
+pnpm i css-loader style-loader -D
+```
+
+- 最后,如果有需要 css 的校验,那么可以直接依靠 vscode 的 style-lint 插件,提供一个.stylelintrc
+
+## 总结
+
+在 webpack 中使用 postcss,只是不需要 postcss-cli 命令行工具,别的没有什么差别。
+
+## 实践
+
+这里只需要参考 webpack.config.js 和 postcss.config.js 即可,重点看里面的配置和插件
+::: code-group
+
+```json [package.json]
+{
+ "name": "test",
+ "version": "1.0.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "build": "webpack",
+ "dev": "webpack-dev-server"
+ },
+ "author": "",
+ "license": "ISC",
+ "devDependencies": {
+ "css-loader": "^3.4.2",
+ "html-webpack-plugin": "^3.2.0",
+ "postcss": "^7.0.26",
+ "postcss-loader": "^3.0.0",
+ "postcss-preset-env": "^6.7.0",
+ "style-loader": "^1.1.3",
+ "stylelint-config-standard": "^19.0.0",
+ "webpack": "^4.41.5",
+ "webpack-cli": "^3.3.10",
+ "webpack-dev-server": "^3.10.3"
+ }
+}
+```
+
+```js [webpack.comfig.js]
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+ mode: "development",
+ devtool: "source-map",
+ //
+ devServer: {
+ open: true,
+ },
+ //
+ module: {
+ rules: [
+ {
+ test: /\.(css|pcss)$/,
+ use: ["style-loader", "css-loader?modules", "postcss-loader"],
+ },
+ ],
+ },
+
+ //
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: "./public/index.html",
+ }),
+ ],
+};
+```
+
+```js [postcss.config.js]
+module.exports = {
+ map: false, //关闭source-map
+ plugins: {
+ "postcss-preset-env": {
+ stage: 0, //哪怕是处于草案阶段的语法,也需要转换
+ preserve: false,
+ },
+ },
+};
+```
+
+```json [.stylelintrc]
+{
+ "extends": "stylelint-config-standard",
+ "rules": {
+ "indentation": 4
+ }
+}
+```
+
+:::
diff --git "a/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/10.\345\260\206css\346\212\275\347\246\273\346\210\220\346\226\207\344\273\266.md" "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/10.\345\260\206css\346\212\275\347\246\273\346\210\220\346\226\207\344\273\266.md"
new file mode 100644
index 0000000..b233571
--- /dev/null
+++ "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/10.\345\260\206css\346\212\275\347\246\273\346\210\220\346\226\207\344\273\266.md"
@@ -0,0 +1,194 @@
+# 抽离 css 文件
+
+目前,css 代码被 css-loader 转换后,交给的是 style-loader 进行处理。
+
+style-loader 使用的方式是用一段 js 代码,将样式加入到 style 元素中。
+
+而实际的开发中,我们往往希望依赖的样式最终形成一个 css 文件
+
+此时,就需要用到一个库:`mini-css-extract-plugin`
+
+该库提供了 1 个 plugin 和 1 个 loader
+
+- plugin:负责生成 css 文件
+- loader:负责记录要生成的 css 文件的内容,同时导出开启 css-module 后的样式对象
+
+使用方式:
+
+```js
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+module.exports = {
+ module: {
+ rules: [
+ //负责记录css内容
+ {
+ test: /\.css$/,
+ use: [MiniCssExtractPlugin.loader, "css-loader?modules"],
+ },
+ ],
+ },
+ plugins: [
+ new MiniCssExtractPlugin(), //负责生成css文件
+ ],
+};
+```
+
+**配置生成的文件名**
+
+同`output.filename`的含义一样,即根据 chunk 生成的样式文件名
+
+配置生成的文件名,例如`[name].[contenthash:5].css`
+
+```js
+new MiniCssExtractPlugin({
+ filename: "css/[name].[contenthash:5].css",
+}); //负责生成css文件
+```
+
+**默认情况下,每个 chunk 对应一个 css 文件**
+
+```js
+ entry: {
+ main: "./src/index.js", //会生成main.js和main.css
+ a: "./src/a.js", //a.js和a.css
+ },
+```
+
+## 实践
+
+- 搭建 webpack 环境,package.json 依赖如下
+- 创建对应的文件目录
+- 配置 webpack.config.js
+
+:::code-group
+
+```sh [目录]
+--dist;
+--public;
+ --index.html;
+--src;
+ --assets;
+ --imgs;
+ --webnpack.jpg;
+ --index.css;
+ --a.css;
+ --index.js; //入口文件
+ --a.js; //第二入口
+--webpack.config.js;
+```
+
+```json [package.json]
+{
+ "name": "test",
+ "version": "1.0.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "build": "webpack",
+ "dev": "webpack-dev-server"
+ },
+ "author": "",
+ "license": "ISC",
+ "devDependencies": {
+ "clean-webpack-plugin": "^3.0.0",
+ "css-loader": "^3.4.2",
+ "file-loader": "^5.0.2",
+ "html-webpack-plugin": "^3.2.0",
+ "mini-css-extract-plugin": "^0.9.0",
+ "style-loader": "^1.1.3",
+ "webpack": "^4.41.5",
+ "webpack-cli": "^3.3.10",
+ "webpack-dev-server": "^3.10.3"
+ }
+}
+```
+
+```js [index.js]
+import "./assets/index.css";
+```
+
+```js [a.js]
+//MiniCssExtractPlugin插件的loader也会将css-loader处理好的内容导出。
+import styleB from "./assets/b.css";
+console.log(styleB);
+```
+
+```css [index.css]
+@import "./a.css"; /*会被打包到同一个css文件中,类似js打包出来的bundle*/
+
+.main {
+ width: 500px;
+ height: 300px;
+ background: url("./img/china.jpg");
+ background-size: 100% 100%;
+}
+```
+
+```css [a.css]
+.a {
+ color: #f55;
+}
+```
+
+```js [webpack.config.js]
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+module.exports = {
+ mode: "development",
+ devtool: "source-map",
+ //
+ devServer: {
+ open: true,
+ },
+ //
+ entry: {
+ main: "./src/index.js",
+ a: "./src/a.js",
+ },
+ //
+ output: {
+ filename: "js/[name].[chunkhash:5].js",
+ publicPath: "/", //css中引用了图片,打包之后图片路径会变成相对路径,需要配置publicPath
+ },
+ // loader
+ module: {
+ rules: [
+ //使用MiniCssExtractPlugin的静态方法loder
+ {
+ test: /\.css$/,
+ use: [MiniCssExtractPlugin.loader, "css-loader?modules"],
+ },
+ //因为css中会产生图片的引用,所以需要file-loader
+ {
+ test: /\.jpg$/,
+ use: {
+ loader: "file-loader",
+ options: {
+ name: "img/[hash:5].[ext]",
+ },
+ },
+ },
+ ],
+ },
+ //plugin
+ plugins: [
+ //
+ new HtmlWebpackPlugin({
+ template: "./public/index.html",
+ // chunks: ["main"],
+ }),
+ //
+ new CleanWebpackPlugin(),
+ //使用MiniCssExtractPlugin插件生成css文件
+ new MiniCssExtractPlugin({
+ filename: "css/[name].[contenthash:5].css",
+ }),
+ ],
+};
+```
+
+:::
+
+最后,执行`pnpm run build`看打包结果。
diff --git "a/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/assets/2020-01-31-09-53-31.png" "b/src/views/note/12-webpack/03.css\345\267\245\347\250\213\345\214\226/assets/2020-01-31-09-53-31.png"
new file mode 100644
index 0000000000000000000000000000000000000000..48d9a801fe37c8ec35130a4b5256608ff57a0fb2
GIT binary patch
literal 189598
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
GW4!-pU3
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