Webpack+BabelÈëÃÅÓëʵÀýÏê½â

µÚ1Õ WebpackÈëÃÅ 1
1£®1 Webpack¼ò½é 1
1£®2 °²×°Webpack 5 3
1£®2£®1 °²×°Node£®js 3
1£®2£®2 °²×°Webpack 4
1£®2£®3 È«¾Ö°²×°Óë±¾µØ°²×°WebpackµÄÇø±ð 5
1£®3 Webpack¿ìËÙÈëÃÅ 6
1£®3£®1 WebpackµÄÃüÁîÐдò°ü 6
1£®3£®2 Webpack´ò°üģʽmode 9
1£®3£®3 WebpackµÄÅäÖÃÎļþ 9
1£®4 WebpackÔ¤´¦ÀíÆ÷ 12
1£®4£®1 ÒýÈëCSSÎļþ 12
1£®4£®2 WebpackÔ¤´¦ÀíÆ÷µÄʹÓà 14
1£®5 ±¾ÕÂС½á 16
µÚ2Õ Webpack×ÊÔ´Èë¿ÚÓë³ö¿Ú 18
2£®1 Ä£¿é»¯ 19
2£®1£®1 JSÄ£¿é»¯ÀúÊ· 20
2£®1£®2 ES6 Module 20
2£®1£®3 CommonJS 22
2£®2 Webpack×ÊÔ´Èë¿Ú 23
2£®2£®1 Webpack»ù´¡Ä¿Â¼context 24
2£®2£®2 Webpack×ÊÔ´Èë¿Úentry 25
2£®3 Webpack×ÊÔ´³ö¿Ú 27
2£®3£®1 WebpackµÄoutput£®filename 28
2£®3£®2 WebpackµÄoutput£®path 31
2£®3£®3 WebpackµÄoutput£®publicPath 32
2£®3£®4 output£®publicPathÓë×ÊÔ´·ÃÎÊ·¾¶ 37
2£®3£®5 WebpackµÄoutput£®chunkFilename 41
2£®4 hash¡¢fullhash¡¢chunkhashºÍcontenthashµÄÇø±ð 42
2£®4£®1 ä¯ÀÀÆ÷»º´æ 42
2£®4£®2 WebpackÓëhashËã·¨ 44
2£®4£®3 WebpackÖÐhash¡¢fullhash¡¢chunkhashºÍcontenthashµÄÇø±ð 44
2£®5 ±¾ÕÂС½á 47
µÚ3Õ WebpackÔ¤´¦ÀíÆ÷ 48
3£®1 Ô¤´¦ÀíÆ÷µÄÅäÖÃÓëʹÓà 49
3£®1£®1 Ô¤´¦ÀíÆ÷µÄ¹Ø¼üÅäÖÃÏî 49
3£®1£®2 excludeºÍinclude 50
3£®1£®3 ÆäËûÔ¤´¦ÀíÆ÷д·¨ 51
3£®2 BabelÔ¤´¦ÀíÆ÷babel-loader 52
3£®2£®1 ÒýÈëÎÊÌâ 53
3£®2£®2 Ö±½ÓʹÓÃWebpack 53
3£®2£®3 ʹÓÃbabel-loader 54
3£®3 Îļþ×ÊÔ´Ô¤´¦ÀíÆ÷file-loader 57
3£®3£®1 file-loader´¦ÀíJSÒýÈëµÄͼƬ 57
3£®3£®2 file-loader´¦ÀíCSSÒýÈëµÄͼƬ 60
3£®3£®3 file-loaderµÄÆäËû֪ʶ 62
3£®4 ÔöÇ¿°æÎļþ×ÊÔ´Ô¤´¦ÀíÆ÷url-loader 62
3£®4£®1 url-loaderµÄBase64±àÂë 62
3£®4£®2 file-loaderÓëurl-loader´¦ÀíºóµÄ×ÊÔ´Ãû³Æ 66
3£®4£®3 file-loaderÓëurl-loader´¦ÀíºóµÄ×ÊԴ·¾¶ 66
3£®5 ±¾ÕÂС½á 68
µÚ4Õ Webpack²å¼þ 69
4£®1 ²å¼þ¼ò½é 69
4£®2 Çå³ýÎļþ²å¼þclean-webpack-plugin 71
4£®2£®1 clean-webpack-plugin¼ò½é 71
4£®2£®2 °²×°clean-webpack-plugin 71
4£®2£®3 ʹÓÃclean-webpack-plugin 71
4£®3 ¸´ÖÆÎļþ²å¼þcopy-webpack-plugin 72
4£®3£®1 copy-webpack-plugin¼ò½é 72
4£®3£®2 °²×°copy-webpack-plugin 73
4£®3£®3 ʹÓÃcopy-webpack-plugin 73
4£®4 HTMLÄ£°å²å¼þhtml-webpack-plugin 74
4£®4£®1 html-webpack-plugin¼ò½é 74
4£®4£®2 °²×°html-webpack-plugin 74
4£®4£®3 ʹÓÃhtml-webpack-plugin 75
4£®4£®4 html-webpack-pluginµÄ×Ô¶¨Òå²ÎÊý 76
4£®5 ±¾ÕÂС½á 80
µÚ5Õ Webpack¿ª·¢»·¾³ÅäÖà 81
5£®1 Îļþ¼àÌýÓëwebpack-dev-server 81
5£®1£®1 Îļþ¼àÌýģʽ 81
5£®1£®2 webpack-dev-serverµÄ°²×°ÓëÆô¶¯ 84
5£®1£®3 webpack-dev-serverµÄ³£ÓòÎÊý 86
5£®2 Ä£¿éÈÈÌæ»» 88
5£®3 WebpackÖеÄsource map 93
5£®3£®1 source map¼ò½é 93
5£®3£®2 source mapµÄÅäÖÃÏîdevtool 96
5£®3£®3 ¿ª·¢»·¾³ÓëÉú²ú»·¾³source mapÅäÖà 99
5£®4 Asset Modules 100
5£®4£®1 Asset Modules¼ò½é 100
5£®4£®2 ×Ô¶¨ÒåÎļþÃû³Æ 103
5£®4£®3 ×ÊÔ´ÀàÐÍΪasset/inline 106
5£®4£®4 ×ÊÔ´ÀàÐÍΪasset 107
5£®5 ±¾ÕÂС½á 109
µÚ6Õ WebpackÉú²ú»·¾³ÅäÖà 110
6£®1 »·¾³±äÁ¿ 111
6£®1£®1 Node£®js»·¾³ÀïµÄ»·¾³±äÁ¿ 111
6£®1£®2 Webpack´ò°üÄ£¿éÀïµÄ»·¾³±äÁ¿ 114
6£®2 Ñùʽ´¦Àí 115
6£®2£®1 ÑùʽÎļþµÄÌáÈ¡ 116
6£®2£®2 Sass´¦Àí 119
6£®2£®3 PostCSS 121
6£®3 ºÏ²¢ÅäÖÃwebpack-merge 123
6£®4 ÐÔÄÜÌáʾ 129
6£®5 ±¾ÕÂС½á 132
µÚ7Õ WebpackÐÔÄÜÓÅ»¯ 133
7£®1 ´ò°üÌå»ý·ÖÎö¹¤¾ßwebpack-bundle-analyzer 134
7£®1£®1 °²×° 134
7£®1£®2 ʹÓà 134
7£®2 ´ò°üËٶȷÖÎö¹¤¾ßspeed-measure-webpack-plugin 137
7£®2£®1 °²×°ÓëÅäÖà 137
7£®2£®2 Ô¤´¦ÀíÆ÷Óë²å¼þµÄʱ¼ä·ÖÎö 139
7£®3 ×ÊԴѹËõ 141
7£®3£®1 ѹËõJSÎļþ 141
7£®3£®2 ѹËõCSSÎļþ 143
7£®4 ËõС²éÕÒ·¶Î§ 147
7£®4£®1 ÅäÖÃÔ¤´¦ÀíÆ÷µÄexcludeÓëinclude 147
7£®4£®2 module£®noParse 148
7£®4£®3 resolve£®modules 148
7£®4£®4 resolve£®extensions 149
7£®5 ´úÂë·Ö¸îoptimization£®splitChunks 150
7£®5£®1 ´úÂë·Ö¸î 150
7£®5£®2 splitChunks 152
7£®5£®3 splitChunksʾÀý½²½â 156
7£®6 Ò¡Ê÷ÓÅ»¯Tree Shaking 161
7£®6£®1 ʹÓÃTree ShakingµÄÔ­Òò 161
7£®6£®2 ʹÓÃTree Shaking 162
7£®6£®3 Éú²ú»·¾³µÄÓÅ»¯ÅäÖà 164
7£®6£®4 Webpack 5ÖжÔTree ShakingµÄ¸Ä½ø 165
7£®7 ʹÓûº´æ 167
7£®7£®1 WebpackÖеĻº´æ 167
7£®7£®2 Îļþϵͳ»º´æµÄʹÓà 168
7£®8 ±¾ÕÂС½á 169
µÚ8Õ WebpackÔ­ÀíÓëÍØÕ¹ 170
8£®1 Webpack¹¹½¨Ô­Àí 170
8£®1£®1 Webpack´ò°üÎļþ·ÖÎö 171
8£®1£®2 tapable 178
8£®1£®3 Webpack´ò°üÁ÷³ÌÓëÔ´Âë³õ̽ 181
8£®2 WebpackÔ¤´¦ÀíÆ÷¿ª·¢ 185
8£®2£®1 »ù´¡Ô¤´¦ÀíÆ÷¿ª·¢ 186
8£®2£®2 Á´Ê½Ô¤´¦ÀíÆ÷¿ª·¢ 188
8£®2£®3 ×Ô¶¨ÒåÔ¤´¦ÀíÆ÷´«²Î 190
8£®3 Webpack²å¼þ¿ª·¢ 191
8£®3£®1 Webpack²å¼þ¿ª·¢¸ÅÊö 191
8£®3£®2 Webpack²å¼þ¿ª·¢ÊµÀý 192
8£®3£®3 ×Ô¶¨Òå²å¼þ´«²Î 195
8£®4 ±¾ÕÂС½á 197
µÚ9Õ BabelÈëÃÅ 198
9£®1 Babel¼ò½é 198
9£®2 Babel¿ìËÙÈëÃÅ 199
9£®2£®1 BabelµÄ°²×°¡¢ÅäÖÃÓëתÂë 199
9£®2£®2 BabelתÂë˵Ã÷ 201
9£®3 ÒýÈëpolyfill 202
9£®4 ±¾ÕÂС½á 205
µÚ10Õ ÉîÈëBabel 207
10£®1 Babel°æ±¾ 207
10£®2 BabelÅäÖÃÎļþ 208
10£®2£®1 ÅäÖÃÎļþ 208
10£®2£®2 ²å¼þÓëÔ¤Éè 210
10£®2£®3 ²å¼þÓëÔ¤ÉèµÄ¶ÌÃû³Æ 212
10£®2£®4 Babel²å¼þºÍÔ¤ÉèµÄ²ÎÊý 213
10£®3 Ô¤ÉèÓë²å¼þµÄÑ¡Ôñ 213
10£®3£®1 Ô¤ÉèµÄÑ¡Ôñ 214
10£®3£®2 ²å¼þµÄÑ¡Ôñ 215
10£®4 babel-polyfill 216
10£®5 @babel/preset-env 224
10£®5£®1 @babel/preset-env¼ò½é 224
10£®5£®2 @babel/preset-envµÈ¼ÛÉèÖà 225
10£®5£®3 @babel/preset-envÓëbrowserslist 226
10£®5£®4 @babel/preset-envµÄ²ÎÊý 228
10£®6 @babel/plugin-transform-runtime 235
10£®6£®1 @babel/runtimeÓ븨Öúº¯Êý 235
10£®6£®2 @babel/plugin-transform-runtimeÓ븨Öúº¯ÊýµÄ×Ô¶¯ÒýÈë 239
10£®6£®3 @babel/plugin-transform-runtimeÓëAPIת»» 241
10£®6£®4 @babel/plugin-transform-runtimeÅäÖÃÏî 245
10£®7 ±¾ÕÂС½á 248
µÚ11Õ Babel¹¤¾ß 249
11£®1 @babel/core 249
11£®2 @babel/cli 252
11£®2£®1 @babel/cliµÄ°²×°ÓëתÂë 252
11£®2£®2 @babel/cliµÄ³£ÓÃÃüÁî 253
11£®3 @babel/node 253
11£®4 ±¾ÕÂС½á 255
µÚ12Õ BabelÔ­ÀíÓëBabel²å¼þ¿ª·¢ 256
12£®1 BabelÔ­Àí 256
12£®1£®1 BabelתÂë¹ý³Ì 256
12£®1£®2 BabelתÂë·ÖÎö 257
12£®2 Babel²å¼þ¿ª·¢ 259
12£®2£®1 ±àд¼òµ¥µÄBabel²å¼þ 259
12£®2£®2 Babel²å¼þ±àдָÄÏ 261
12£®2£®3 ÊÖдletתvar²å¼þ 264
12£®2£®4 Babel²å¼þ´«²Î 265
12£®3 ±¾ÕÂС½á 266
¸½Â¼A Module FederationÓë΢ǰ¶Ë 267
¸½Â¼B Babel 8Ç°Õ° 271