From 02d6ee76e0ddf295e886ac37e5288675912d86c9 Mon Sep 17 00:00:00 2001 From: gh-pages-bot <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 29 Feb 2024 07:15:28 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20main=20from=20@=20web-infra-de?= =?UTF-8?q?v/modern.js@4b233ec8c8f0761e60493bbdacaf9063f4736a06=20?= =?UTF-8?q?=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- modern-js/builder/api/builder-core.html | 20 +- modern-js/builder/api/builder-instance.html | 154 +-- modern-js/builder/api/builder-types.html | 18 +- modern-js/builder/api/config-dev.html | 78 +- modern-js/builder/api/config-experiments.html | 30 +- modern-js/builder/api/config-html.html | 224 ++-- modern-js/builder/api/config-output.html | 330 +++--- modern-js/builder/api/config-performance.html | 152 +-- modern-js/builder/api/config-security.html | 32 +- modern-js/builder/api/config-source.html | 204 ++-- modern-js/builder/api/config-tools.html | 780 +++++--------- modern-js/builder/api/index.html | 4 +- modern-js/builder/api/plugin-core.html | 52 +- modern-js/builder/api/plugin-hooks.html | 76 +- modern-js/builder/en/api/builder-core.html | 20 +- .../builder/en/api/builder-instance.html | 154 +-- modern-js/builder/en/api/builder-types.html | 18 +- modern-js/builder/en/api/config-dev.html | 78 +- .../builder/en/api/config-experiments.html | 30 +- modern-js/builder/en/api/config-html.html | 224 ++-- modern-js/builder/en/api/config-output.html | 332 +++--- .../builder/en/api/config-performance.html | 152 +-- modern-js/builder/en/api/config-security.html | 32 +- modern-js/builder/en/api/config-source.html | 204 ++-- modern-js/builder/en/api/config-tools.html | 776 +++++--------- modern-js/builder/en/api/index.html | 4 +- modern-js/builder/en/api/plugin-core.html | 52 +- modern-js/builder/en/api/plugin-hooks.html | 74 +- .../guide/advanced/browser-compatibility.html | 48 +- .../en/guide/advanced/browserslist.html | 48 +- .../guide/advanced/custom-webpack-config.html | 24 +- .../builder/en/guide/advanced/define.html | 50 +- modern-js/builder/en/guide/advanced/hmr.html | 16 +- modern-js/builder/en/guide/advanced/rem.html | 16 +- .../en/guide/advanced/rspack-start.html | 148 +-- .../builder/en/guide/advanced/storybook.html | 40 +- .../builder/en/guide/basic/build-target.html | 18 +- .../builder/en/guide/basic/builder-cli.html | 28 +- .../en/guide/basic/builder-config.html | 32 +- .../builder/en/guide/basic/css-usage.html | 44 +- .../builder/en/guide/basic/html-template.html | 82 +- .../builder/en/guide/basic/typescript.html | 22 +- .../builder/en/guide/debug/debug-mode.html | 22 +- .../builder/en/guide/faq/exceptions.html | 6 +- modern-js/builder/en/guide/faq/features.html | 6 +- modern-js/builder/en/guide/faq/general.html | 14 +- modern-js/builder/en/guide/faq/hmr.html | 6 +- modern-js/builder/en/guide/features.html | 130 +-- .../builder/en/guide/framework/vue2.html | 24 +- .../builder/en/guide/framework/vue3.html | 24 +- modern-js/builder/en/guide/glossary.html | 38 +- modern-js/builder/en/guide/introduction.html | 52 +- .../en/guide/optimization/split-chunk.html | 24 +- modern-js/builder/en/guide/quick-start.html | 48 +- modern-js/builder/en/index.html | 4 +- .../builder/en/plugins/introduction.html | 26 +- modern-js/builder/en/plugins/list.html | 20 +- .../builder/en/plugins/plugin-esbuild.html | 52 +- .../en/plugins/plugin-image-compress.html | 22 +- .../en/plugins/plugin-node-polyfill.html | 18 +- .../builder/en/plugins/plugin-stylus.html | 24 +- modern-js/builder/en/plugins/plugin-swc.html | 78 +- modern-js/builder/en/plugins/plugin-vue.html | 24 +- modern-js/builder/en/plugins/plugin-vue2.html | 26 +- .../guide/advanced/browser-compatibility.html | 48 +- .../builder/guide/advanced/browserslist.html | 48 +- .../guide/advanced/custom-webpack-config.html | 24 +- modern-js/builder/guide/advanced/define.html | 50 +- modern-js/builder/guide/advanced/hmr.html | 16 +- modern-js/builder/guide/advanced/rem.html | 16 +- .../builder/guide/advanced/rspack-start.html | 150 +-- .../builder/guide/advanced/storybook.html | 42 +- .../builder/guide/basic/build-target.html | 18 +- .../builder/guide/basic/builder-cli.html | 28 +- .../builder/guide/basic/builder-config.html | 32 +- modern-js/builder/guide/basic/css-usage.html | 44 +- .../builder/guide/basic/html-template.html | 82 +- modern-js/builder/guide/basic/typescript.html | 20 +- modern-js/builder/guide/debug/debug-mode.html | 22 +- modern-js/builder/guide/faq/exceptions.html | 6 +- modern-js/builder/guide/faq/features.html | 6 +- modern-js/builder/guide/faq/general.html | 14 +- modern-js/builder/guide/faq/hmr.html | 6 +- modern-js/builder/guide/features.html | 130 +-- modern-js/builder/guide/framework/vue2.html | 24 +- modern-js/builder/guide/framework/vue3.html | 24 +- modern-js/builder/guide/glossary.html | 38 +- modern-js/builder/guide/introduction.html | 52 +- .../guide/optimization/split-chunk.html | 24 +- modern-js/builder/guide/quick-start.html | 48 +- modern-js/builder/index.html | 4 +- modern-js/builder/plugins/introduction.html | 26 +- modern-js/builder/plugins/list.html | 20 +- modern-js/builder/plugins/plugin-esbuild.html | 52 +- .../plugins/plugin-image-compress.html | 22 +- .../builder/plugins/plugin-node-polyfill.html | 18 +- modern-js/builder/plugins/plugin-stylus.html | 24 +- modern-js/builder/plugins/plugin-swc.html | 78 +- modern-js/builder/plugins/plugin-vue.html | 24 +- modern-js/builder/plugins/plugin-vue2.html | 26 +- .../builder/static/css/1062.e7f0d4f2.css | 17 - .../builder/static/css/1530.cfb0693b.css | 17 + .../{1110.c62309fb.css => 5077.c62309fb.css} | 0 .../{4814.c62309fb.css => 6818.c62309fb.css} | 0 .../{5123.c62309fb.css => 7032.c62309fb.css} | 0 .../{702.c62309fb.css => 9008.c62309fb.css} | 0 modern-js/builder/static/js/1062.7c42c8ff.js | 2 - modern-js/builder/static/js/1530.99165a33.js | 2 + ...CENSE.txt => 1530.99165a33.js.LICENSE.txt} | 980 +++++++++++------- .../builder/static/js/async/1110.1ca5b0cd.js | 2 - .../builder/static/js/async/1244.d4a96276.js | 2 - .../js/async/1244.d4a96276.js.LICENSE.txt | 19 - .../builder/static/js/async/126.5ddc1637.js | 2 - .../builder/static/js/async/1262.3d6e2406.js | 2 - .../{2458.c69a615e.js => 1384.ab954b14.js} | 4 +- ...CENSE.txt => 1384.ab954b14.js.LICENSE.txt} | 0 .../builder/static/js/async/1404.444573ac.js | 2 - .../js/async/1404.444573ac.js.LICENSE.txt | 51 - .../builder/static/js/async/1421.ef571d33.js | 2 + ...CENSE.txt => 1421.ef571d33.js.LICENSE.txt} | 0 .../builder/static/js/async/1441.5d3d53d6.js | 2 + ...CENSE.txt => 1441.5d3d53d6.js.LICENSE.txt} | 0 .../builder/static/js/async/1495.2290def7.js | 2 - .../js/async/1495.2290def7.js.LICENSE.txt | 17 - .../builder/static/js/async/1499.dfedd574.js | 2 + ...CENSE.txt => 1499.dfedd574.js.LICENSE.txt} | 0 .../builder/static/js/async/1552.29c88afb.js | 2 - .../builder/static/js/async/158.673381ef.js | 2 - .../js/async/158.673381ef.js.LICENSE.txt | 123 --- .../{6406.fbffe866.js => 1629.693be2b8.js} | 4 +- ...CENSE.txt => 1629.693be2b8.js.LICENSE.txt} | 0 .../builder/static/js/async/1868.baea041c.js | 2 + ...CENSE.txt => 1868.baea041c.js.LICENSE.txt} | 0 .../builder/static/js/async/193.b2a31102.js | 2 + ...ICENSE.txt => 193.b2a31102.js.LICENSE.txt} | 0 .../builder/static/js/async/1993.4750b492.js | 2 - .../js/async/1993.4750b492.js.LICENSE.txt | 33 - .../{8738.76ae60b2.js => 1995.63dba26d.js} | 4 +- ...CENSE.txt => 1995.63dba26d.js.LICENSE.txt} | 0 .../builder/static/js/async/2169.06d05060.js | 2 + ...CENSE.txt => 2169.06d05060.js.LICENSE.txt} | 0 .../{8465.88f06dc4.js => 2170.32d51aae.js} | 4 +- ...CENSE.txt => 2170.32d51aae.js.LICENSE.txt} | 0 .../builder/static/js/async/2244.b41fdff8.js | 2 + .../js/async/2244.b41fdff8.js.LICENSE.txt | 5 + .../builder/static/js/async/2255.abeed890.js | 2 + ...CENSE.txt => 2255.abeed890.js.LICENSE.txt} | 0 .../builder/static/js/async/2259.7a6f0b84.js | 2 + ...CENSE.txt => 2259.7a6f0b84.js.LICENSE.txt} | 0 .../builder/static/js/async/2349.8aee0904.js | 2 + .../js/async/2349.8aee0904.js.LICENSE.txt | 5 + .../{9945.fad7c679.js => 2612.973ff2e7.js} | 4 +- ...CENSE.txt => 2612.973ff2e7.js.LICENSE.txt} | 0 .../builder/static/js/async/2705.fea96143.js | 2 + ...CENSE.txt => 2705.fea96143.js.LICENSE.txt} | 0 .../{7797.5f505fad.js => 2722.8d39abe7.js} | 4 +- ...CENSE.txt => 2722.8d39abe7.js.LICENSE.txt} | 0 .../builder/static/js/async/2798.0b802f5d.js | 2 - .../js/async/2798.0b802f5d.js.LICENSE.txt | 21 - .../builder/static/js/async/281.2072bbb1.js | 2 + ...ICENSE.txt => 281.2072bbb1.js.LICENSE.txt} | 0 .../builder/static/js/async/2875.e7b3290b.js | 2 + ...CENSE.txt => 2875.e7b3290b.js.LICENSE.txt} | 0 .../builder/static/js/async/2882.5448b00f.js | 2 - .../js/async/2882.5448b00f.js.LICENSE.txt | 15 - .../{9531.5790f8a9.js => 2974.9f495193.js} | 4 +- ...CENSE.txt => 2974.9f495193.js.LICENSE.txt} | 0 .../builder/static/js/async/2991.d9bb1a6f.js | 2 - .../js/async/2991.d9bb1a6f.js.LICENSE.txt | 75 -- .../builder/static/js/async/2994.eb64953c.js | 2 + ...CENSE.txt => 2994.eb64953c.js.LICENSE.txt} | 0 .../builder/static/js/async/3136.3c9783e6.js | 2 - .../{8474.47e2b58a.js => 3156.912bc151.js} | 4 +- ...CENSE.txt => 3156.912bc151.js.LICENSE.txt} | 0 .../builder/static/js/async/3165.16651eeb.js | 2 + ...CENSE.txt => 3165.16651eeb.js.LICENSE.txt} | 0 .../builder/static/js/async/3215.012f3630.js | 2 - .../js/async/3215.012f3630.js.LICENSE.txt | 15 - .../builder/static/js/async/3244.1f0a8807.js | 2 - .../js/async/3244.1f0a8807.js.LICENSE.txt | 15 - .../{4664.8998d4c1.js => 3282.bdf63f0e.js} | 4 +- ...CENSE.txt => 3282.bdf63f0e.js.LICENSE.txt} | 0 .../builder/static/js/async/3332.ba02ea21.js | 2 - .../builder/static/js/async/3343.f639bce0.js | 2 + ...CENSE.txt => 3343.f639bce0.js.LICENSE.txt} | 0 .../{5744.0364a74a.js => 3355.ca96ad7b.js} | 4 +- ...CENSE.txt => 3355.ca96ad7b.js.LICENSE.txt} | 0 .../builder/static/js/async/3515.d3383b08.js | 2 - .../js/async/3515.d3383b08.js.LICENSE.txt | 15 - .../{7991.6fa75131.js => 3532.e8e59468.js} | 4 +- ...CENSE.txt => 3532.e8e59468.js.LICENSE.txt} | 0 .../builder/static/js/async/36.3186651c.js | 2 - .../builder/static/js/async/3634.fe98d3fa.js | 2 + ...CENSE.txt => 3634.fe98d3fa.js.LICENSE.txt} | 0 .../builder/static/js/async/3752.718f8ef2.js | 2 + ...CENSE.txt => 3752.718f8ef2.js.LICENSE.txt} | 0 .../builder/static/js/async/3759.aa79f831.js | 2 + ...CENSE.txt => 3759.aa79f831.js.LICENSE.txt} | 0 .../builder/static/js/async/3808.1e6e1b2b.js | 2 + ...CENSE.txt => 3808.1e6e1b2b.js.LICENSE.txt} | 0 .../{2329.5f01dcba.js => 3853.6f1f5b68.js} | 4 +- ...CENSE.txt => 3853.6f1f5b68.js.LICENSE.txt} | 0 .../builder/static/js/async/3895.d71415a0.js | 2 - .../js/async/3895.d71415a0.js.LICENSE.txt | 31 - .../builder/static/js/async/3934.3ecbe630.js | 2 - .../js/async/3934.3ecbe630.js.LICENSE.txt | 51 - .../builder/static/js/async/3964.f7dc1ec2.js | 2 - .../builder/static/js/async/4045.791a77ae.js | 2 + ...CENSE.txt => 4045.791a77ae.js.LICENSE.txt} | 0 .../builder/static/js/async/4151.9120d00e.js | 2 - .../js/async/4151.9120d00e.js.LICENSE.txt | 183 ---- .../builder/static/js/async/4308.16a6d5f0.js | 2 - .../js/async/4308.16a6d5f0.js.LICENSE.txt | 31 - .../{6713.3042bd5e.js => 4324.b5823b73.js} | 4 +- ...CENSE.txt => 4324.b5823b73.js.LICENSE.txt} | 0 .../{5930.8a41b90e.js => 4341.2dd0a4cc.js} | 4 +- ...CENSE.txt => 4341.2dd0a4cc.js.LICENSE.txt} | 0 .../{3375.f190427f.js => 4416.10793d6d.js} | 4 +- ...CENSE.txt => 4416.10793d6d.js.LICENSE.txt} | 0 .../{5372.42034b87.js => 4484.63cc8fcb.js} | 4 +- ...CENSE.txt => 4484.63cc8fcb.js.LICENSE.txt} | 0 .../{9873.1f2f76cb.js => 4595.3d13219d.js} | 4 +- ...CENSE.txt => 4595.3d13219d.js.LICENSE.txt} | 0 .../builder/static/js/async/4663.0db8815c.js | 2 + ...CENSE.txt => 4663.0db8815c.js.LICENSE.txt} | 0 .../{3300.5813a257.js => 4672.fe069b48.js} | 4 +- ...CENSE.txt => 4672.fe069b48.js.LICENSE.txt} | 0 .../builder/static/js/async/480.baae58b5.js | 2 + ...ICENSE.txt => 480.baae58b5.js.LICENSE.txt} | 0 .../builder/static/js/async/4814.4d2a5162.js | 2 - .../builder/static/js/async/4988.a7b5e1e4.js | 2 - .../builder/static/js/async/506.a5288c0a.js | 2 - .../builder/static/js/async/5077.f90fba02.js | 2 + ...CENSE.txt => 5077.f90fba02.js.LICENSE.txt} | 12 +- .../builder/static/js/async/5099.b8c952b5.js | 2 + ...CENSE.txt => 5099.b8c952b5.js.LICENSE.txt} | 0 .../builder/static/js/async/5121.68a8faa3.js | 2 + ...CENSE.txt => 5121.68a8faa3.js.LICENSE.txt} | 0 .../builder/static/js/async/5123.7261f7b8.js | 2 - .../builder/static/js/async/5137.58f03281.js | 2 - .../js/async/5137.58f03281.js.LICENSE.txt | 15 - .../{9617.eafa0e38.js => 5162.fe0f3c10.js} | 4 +- ...CENSE.txt => 5162.fe0f3c10.js.LICENSE.txt} | 0 .../{2968.57332b58.js => 5172.abf0c1e3.js} | 4 +- ...CENSE.txt => 5172.abf0c1e3.js.LICENSE.txt} | 0 .../builder/static/js/async/5200.10da73d2.js | 2 - .../js/async/5200.10da73d2.js.LICENSE.txt | 69 -- .../builder/static/js/async/5201.06db0f7a.js | 2 - .../js/async/5201.06db0f7a.js.LICENSE.txt | 33 - .../builder/static/js/async/5233.d15dfc17.js | 2 + ...CENSE.txt => 5233.d15dfc17.js.LICENSE.txt} | 0 .../builder/static/js/async/542.7a1c175b.js | 2 + ...ICENSE.txt => 542.7a1c175b.js.LICENSE.txt} | 0 .../{8777.39f9f2cb.js => 5525.ccf266fc.js} | 4 +- ...CENSE.txt => 5525.ccf266fc.js.LICENSE.txt} | 0 .../builder/static/js/async/5573.e8470b83.js | 2 + ...CENSE.txt => 5573.e8470b83.js.LICENSE.txt} | 0 .../builder/static/js/async/5579.8b1257e4.js | 2 + ...CENSE.txt => 5579.8b1257e4.js.LICENSE.txt} | 0 .../builder/static/js/async/5627.7e20b475.js | 2 - .../js/async/5627.7e20b475.js.LICENSE.txt | 11 - .../{7787.0ec3c9fc.js => 5684.20867122.js} | 4 +- ...CENSE.txt => 5684.20867122.js.LICENSE.txt} | 0 .../builder/static/js/async/5719.c84f5fd1.js | 2 - .../js/async/5719.c84f5fd1.js.LICENSE.txt | 69 -- .../{3870.62812289.js => 5770.d03db12c.js} | 4 +- ...CENSE.txt => 5770.d03db12c.js.LICENSE.txt} | 0 .../{7138.4083f041.js => 5817.6b8843bc.js} | 4 +- ...CENSE.txt => 5817.6b8843bc.js.LICENSE.txt} | 0 .../builder/static/js/async/5830.d458d935.js | 2 + ...CENSE.txt => 5830.d458d935.js.LICENSE.txt} | 0 .../{1180.69922282.js => 5851.02f6d19f.js} | 4 +- ...CENSE.txt => 5851.02f6d19f.js.LICENSE.txt} | 0 .../builder/static/js/async/6040.3be66fcc.js | 2 + ...CENSE.txt => 6040.3be66fcc.js.LICENSE.txt} | 0 .../builder/static/js/async/6049.efb92913.js | 2 - .../js/async/6049.efb92913.js.LICENSE.txt | 183 ---- .../builder/static/js/async/6081.52d430cc.js | 2 - .../js/async/6081.52d430cc.js.LICENSE.txt | 25 - .../builder/static/js/async/6172.eb2a68ff.js | 2 + ...CENSE.txt => 6172.eb2a68ff.js.LICENSE.txt} | 0 .../builder/static/js/async/619.8eba512d.js | 2 - .../builder/static/js/async/6215.164e93ce.js | 2 + .../js/async/6215.164e93ce.js.LICENSE.txt | 3 + .../builder/static/js/async/640.a7fd03d8.js | 2 + .../js/async/640.a7fd03d8.js.LICENSE.txt | 3 + .../builder/static/js/async/6441.758bd66f.js | 2 + .../js/async/6441.758bd66f.js.LICENSE.txt | 3 + .../builder/static/js/async/6555.52bfd0fb.js | 2 + ...CENSE.txt => 6555.52bfd0fb.js.LICENSE.txt} | 0 .../builder/static/js/async/6560.519f77ca.js | 2 - .../js/async/6560.519f77ca.js.LICENSE.txt | 15 - .../builder/static/js/async/6732.7bc008cf.js | 2 - .../js/async/6732.7bc008cf.js.LICENSE.txt | 43 - .../builder/static/js/async/6818.6898f46b.js | 2 + ...CENSE.txt => 6818.6898f46b.js.LICENSE.txt} | 24 +- .../builder/static/js/async/684.11cc4e07.js | 2 + .../js/async/684.11cc4e07.js.LICENSE.txt | 3 + .../builder/static/js/async/695.e0298b28.js | 2 - .../js/async/695.e0298b28.js.LICENSE.txt | 15 - .../builder/static/js/async/702.f708e873.js | 2 - .../js/async/702.f708e873.js.LICENSE.txt | 31 - .../builder/static/js/async/7032.6dca68b5.js | 2 + ...CENSE.txt => 7032.6dca68b5.js.LICENSE.txt} | 22 +- .../builder/static/js/async/7054.f9d36145.js | 2 - .../js/async/7054.f9d36145.js.LICENSE.txt | 27 - .../builder/static/js/async/71.4a8bac6b.js | 2 - .../js/async/71.4a8bac6b.js.LICENSE.txt | 5 - .../builder/static/js/async/7133.edde3d80.js | 2 + .../js/async/7133.edde3d80.js.LICENSE.txt | 3 + .../{3576.935c718b.js => 7293.edf28a04.js} | 4 +- .../js/async/7293.edf28a04.js.LICENSE.txt | 3 + .../{9127.67ec3310.js => 7300.e0c00968.js} | 4 +- ...CENSE.txt => 7300.e0c00968.js.LICENSE.txt} | 0 .../builder/static/js/async/7466.674c2cab.js | 2 + .../js/async/7466.674c2cab.js.LICENSE.txt | 3 + .../builder/static/js/async/7474.ba1975f3.js | 2 - .../js/async/7474.ba1975f3.js.LICENSE.txt | 43 - .../{1391.b6c58e58.js => 7492.2831ae5a.js} | 4 +- .../js/async/7492.2831ae5a.js.LICENSE.txt | 3 + .../builder/static/js/async/7571.053dbc18.js | 2 - .../js/async/7571.053dbc18.js.LICENSE.txt | 11 - .../builder/static/js/async/7654.25567045.js | 2 + .../js/async/7654.25567045.js.LICENSE.txt | 3 + .../{2122.347a9068.js => 7697.64758e8e.js} | 4 +- .../js/async/7697.64758e8e.js.LICENSE.txt | 3 + .../builder/static/js/async/7703.c76de7f5.js | 2 - .../js/async/7703.c76de7f5.js.LICENSE.txt | 123 --- .../{6936.16373c4a.js => 7930.fa61ecf8.js} | 4 +- .../js/async/7930.fa61ecf8.js.LICENSE.txt | 3 + .../builder/static/js/async/796.effe48d3.js | 2 + .../js/async/796.effe48d3.js.LICENSE.txt | 5 + .../builder/static/js/async/8024.6b11157d.js | 2 - .../builder/static/js/async/8039.70246e3f.js | 2 + .../js/async/8039.70246e3f.js.LICENSE.txt | 3 + .../builder/static/js/async/8050.15206c07.js | 2 + .../js/async/8050.15206c07.js.LICENSE.txt | 3 + .../builder/static/js/async/8146.6a03dae7.js | 2 - .../{6901.725ca312.js => 8150.d4c1cf8d.js} | 4 +- .../js/async/8150.d4c1cf8d.js.LICENSE.txt | 3 + .../builder/static/js/async/8204.8e569cd4.js | 2 - .../builder/static/js/async/8344.ac1a428c.js | 2 + .../js/async/8344.ac1a428c.js.LICENSE.txt | 3 + .../builder/static/js/async/8451.748a89ff.js | 2 - .../js/async/8451.748a89ff.js.LICENSE.txt | 117 --- .../{3026.deee196d.js => 8468.87957486.js} | 4 +- ...CENSE.txt => 8468.87957486.js.LICENSE.txt} | 0 .../{6931.1053eb77.js => 8472.83fb07e3.js} | 4 +- .../js/async/8472.83fb07e3.js.LICENSE.txt | 3 + .../{3415.76e85ae9.js => 8473.17186655.js} | 4 +- .../js/async/8473.17186655.js.LICENSE.txt | 3 + .../{6665.46777d44.js => 8476.0eee5955.js} | 4 +- .../js/async/8476.0eee5955.js.LICENSE.txt | 3 + .../builder/static/js/async/8604.9993c8ca.js | 2 - .../js/async/8604.9993c8ca.js.LICENSE.txt | 27 - .../builder/static/js/async/8697.25660360.js | 2 + .../js/async/8697.25660360.js.LICENSE.txt | 3 + .../builder/static/js/async/8744.3de010dd.js | 2 + .../js/async/8744.3de010dd.js.LICENSE.txt | 3 + .../builder/static/js/async/875.1a5e50ff.js | 2 + .../js/async/875.1a5e50ff.js.LICENSE.txt | 3 + .../builder/static/js/async/8815.e86f051c.js | 2 - .../js/async/8815.e86f051c.js.LICENSE.txt | 21 - .../builder/static/js/async/887.9881f04f.js | 2 + .../js/async/887.9881f04f.js.LICENSE.txt | 3 + .../builder/static/js/async/893.4a97a3ca.js | 2 + .../js/async/893.4a97a3ca.js.LICENSE.txt | 3 + .../builder/static/js/async/8962.09ca403e.js | 2 + .../js/async/8962.09ca403e.js.LICENSE.txt | 3 + .../builder/static/js/async/9008.631ed1a3.js | 2 + .../js/async/9008.631ed1a3.js.LICENSE.txt | 21 + .../builder/static/js/async/9025.6edad7f6.js | 2 - .../js/async/9025.6edad7f6.js.LICENSE.txt | 17 - .../{3630.47e52482.js => 9027.1e7d96ce.js} | 4 +- ...CENSE.txt => 9027.1e7d96ce.js.LICENSE.txt} | 0 .../builder/static/js/async/9114.e3ddccce.js | 2 - .../builder/static/js/async/9134.4c13b487.js | 2 - .../js/async/9134.4c13b487.js.LICENSE.txt | 75 -- .../builder/static/js/async/9205.c3cb7f24.js | 2 + ...CENSE.txt => 9205.c3cb7f24.js.LICENSE.txt} | 0 .../{7080.d6efdf7e.js => 9274.9e237813.js} | 4 +- .../js/async/9274.9e237813.js.LICENSE.txt | 5 + .../{9594.75d0cff3.js => 9339.470ecb2a.js} | 4 +- .../js/async/9339.470ecb2a.js.LICENSE.txt | 3 + .../builder/static/js/async/9437.256e8293.js | 2 + .../js/async/9437.256e8293.js.LICENSE.txt | 3 + .../builder/static/js/async/9471.f3ce5363.js | 2 - .../builder/static/js/async/9513.9e3a1116.js | 2 - .../builder/static/js/async/9514.8efa5de9.js | 2 - .../js/async/9514.8efa5de9.js.LICENSE.txt | 117 --- .../{7744.68d2304b.js => 9603.d170c75f.js} | 4 +- .../js/async/9603.d170c75f.js.LICENSE.txt | 5 + .../builder/static/js/async/964.0f119dde.js | 2 + .../js/async/964.0f119dde.js.LICENSE.txt | 3 + .../builder/static/js/async/9641.462ed394.js | 2 - .../js/async/9641.462ed394.js.LICENSE.txt | 15 - .../builder/static/js/async/9657.4908f7a4.js | 2 + .../js/async/9657.4908f7a4.js.LICENSE.txt | 3 + .../builder/static/js/async/9658.dad2fb0d.js | 2 - .../{7856.403cfa6c.js => 9706.f8336e97.js} | 4 +- .../js/async/9706.f8336e97.js.LICENSE.txt | 3 + .../{9360.b479adaa.js => 9735.f82205af.js} | 4 +- .../js/async/9735.f82205af.js.LICENSE.txt | 3 + .../builder/static/js/async/9778.d675ce1c.js | 2 - .../builder/static/js/async/9849.25a389bc.js | 2 + .../js/async/9849.25a389bc.js.LICENSE.txt | 3 + .../builder/static/js/async/987.07a82164.js | 2 - .../builder/static/js/async/9878.c652ee6f.js | 2 - .../js/async/9945.fad7c679.js.LICENSE.txt | 3 - modern-js/builder/static/js/index.b236c229.js | 2 + ...ENSE.txt => index.b236c229.js.LICENSE.txt} | 4 +- modern-js/builder/static/js/index.c3b6e22e.js | 2 - .../static/js/lib-polyfill.9e97cc5b.js | 2 + ...t => lib-polyfill.9e97cc5b.js.LICENSE.txt} | 634 +++++------ .../static/js/lib-polyfill.c604f64a.js | 2 - .../static/search_index.en.139b58c9.json | 1 + .../static/search_index.en.3acbf387.json | 1 - .../static/search_index.zh.31c7c7bd.json | 1 - .../static/search_index.zh.cc6674af.json | 1 + 419 files changed, 4548 insertions(+), 6440 deletions(-) delete mode 100644 modern-js/builder/static/css/1062.e7f0d4f2.css create mode 100644 modern-js/builder/static/css/1530.cfb0693b.css rename modern-js/builder/static/css/async/{1110.c62309fb.css => 5077.c62309fb.css} (100%) rename modern-js/builder/static/css/async/{4814.c62309fb.css => 6818.c62309fb.css} (100%) rename modern-js/builder/static/css/async/{5123.c62309fb.css => 7032.c62309fb.css} (100%) rename modern-js/builder/static/css/async/{702.c62309fb.css => 9008.c62309fb.css} (100%) delete mode 100644 modern-js/builder/static/js/1062.7c42c8ff.js create mode 100644 modern-js/builder/static/js/1530.99165a33.js rename modern-js/builder/static/js/{1062.7c42c8ff.js.LICENSE.txt => 1530.99165a33.js.LICENSE.txt} (89%) delete mode 100644 modern-js/builder/static/js/async/1110.1ca5b0cd.js delete mode 100644 modern-js/builder/static/js/async/1244.d4a96276.js delete mode 100644 modern-js/builder/static/js/async/1244.d4a96276.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/126.5ddc1637.js delete mode 100644 modern-js/builder/static/js/async/1262.3d6e2406.js rename modern-js/builder/static/js/async/{2458.c69a615e.js => 1384.ab954b14.js} (99%) rename modern-js/builder/static/js/async/{1180.69922282.js.LICENSE.txt => 1384.ab954b14.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/1404.444573ac.js delete mode 100644 modern-js/builder/static/js/async/1404.444573ac.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/1421.ef571d33.js rename modern-js/builder/static/js/async/{126.5ddc1637.js.LICENSE.txt => 1421.ef571d33.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/1441.5d3d53d6.js rename modern-js/builder/static/js/async/{1262.3d6e2406.js.LICENSE.txt => 1441.5d3d53d6.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/1495.2290def7.js delete mode 100644 modern-js/builder/static/js/async/1495.2290def7.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/1499.dfedd574.js rename modern-js/builder/static/js/async/{1391.b6c58e58.js.LICENSE.txt => 1499.dfedd574.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/1552.29c88afb.js delete mode 100644 modern-js/builder/static/js/async/158.673381ef.js delete mode 100644 modern-js/builder/static/js/async/158.673381ef.js.LICENSE.txt rename modern-js/builder/static/js/async/{6406.fbffe866.js => 1629.693be2b8.js} (99%) rename modern-js/builder/static/js/async/{1552.29c88afb.js.LICENSE.txt => 1629.693be2b8.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/1868.baea041c.js rename modern-js/builder/static/js/async/{2122.347a9068.js.LICENSE.txt => 1868.baea041c.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/193.b2a31102.js rename modern-js/builder/static/js/async/{2329.5f01dcba.js.LICENSE.txt => 193.b2a31102.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/1993.4750b492.js delete mode 100644 modern-js/builder/static/js/async/1993.4750b492.js.LICENSE.txt rename modern-js/builder/static/js/async/{8738.76ae60b2.js => 1995.63dba26d.js} (99%) rename modern-js/builder/static/js/async/{2458.c69a615e.js.LICENSE.txt => 1995.63dba26d.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/2169.06d05060.js rename modern-js/builder/static/js/async/{3136.3c9783e6.js.LICENSE.txt => 2169.06d05060.js.LICENSE.txt} (100%) rename modern-js/builder/static/js/async/{8465.88f06dc4.js => 2170.32d51aae.js} (98%) rename modern-js/builder/static/js/async/{3300.5813a257.js.LICENSE.txt => 2170.32d51aae.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/2244.b41fdff8.js create mode 100644 modern-js/builder/static/js/async/2244.b41fdff8.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/2255.abeed890.js rename modern-js/builder/static/js/async/{3332.ba02ea21.js.LICENSE.txt => 2255.abeed890.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/2259.7a6f0b84.js rename modern-js/builder/static/js/async/{3375.f190427f.js.LICENSE.txt => 2259.7a6f0b84.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/2349.8aee0904.js create mode 100644 modern-js/builder/static/js/async/2349.8aee0904.js.LICENSE.txt rename modern-js/builder/static/js/async/{9945.fad7c679.js => 2612.973ff2e7.js} (89%) rename modern-js/builder/static/js/async/{3630.47e52482.js.LICENSE.txt => 2612.973ff2e7.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/2705.fea96143.js rename modern-js/builder/static/js/async/{3415.76e85ae9.js.LICENSE.txt => 2705.fea96143.js.LICENSE.txt} (100%) rename modern-js/builder/static/js/async/{7797.5f505fad.js => 2722.8d39abe7.js} (99%) rename modern-js/builder/static/js/async/{3576.935c718b.js.LICENSE.txt => 2722.8d39abe7.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/2798.0b802f5d.js delete mode 100644 modern-js/builder/static/js/async/2798.0b802f5d.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/281.2072bbb1.js rename modern-js/builder/static/js/async/{9114.e3ddccce.js.LICENSE.txt => 281.2072bbb1.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/2875.e7b3290b.js rename modern-js/builder/static/js/async/{36.3186651c.js.LICENSE.txt => 2875.e7b3290b.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/2882.5448b00f.js delete mode 100644 modern-js/builder/static/js/async/2882.5448b00f.js.LICENSE.txt rename modern-js/builder/static/js/async/{9531.5790f8a9.js => 2974.9f495193.js} (97%) rename modern-js/builder/static/js/async/{2968.57332b58.js.LICENSE.txt => 2974.9f495193.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/2991.d9bb1a6f.js delete mode 100644 modern-js/builder/static/js/async/2991.d9bb1a6f.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/2994.eb64953c.js rename modern-js/builder/static/js/async/{3964.f7dc1ec2.js.LICENSE.txt => 2994.eb64953c.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/3136.3c9783e6.js rename modern-js/builder/static/js/async/{8474.47e2b58a.js => 3156.912bc151.js} (99%) rename modern-js/builder/static/js/async/{4664.8998d4c1.js.LICENSE.txt => 3156.912bc151.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/3165.16651eeb.js rename modern-js/builder/static/js/async/{4988.a7b5e1e4.js.LICENSE.txt => 3165.16651eeb.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/3215.012f3630.js delete mode 100644 modern-js/builder/static/js/async/3215.012f3630.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/3244.1f0a8807.js delete mode 100644 modern-js/builder/static/js/async/3244.1f0a8807.js.LICENSE.txt rename modern-js/builder/static/js/async/{4664.8998d4c1.js => 3282.bdf63f0e.js} (98%) rename modern-js/builder/static/js/async/{506.a5288c0a.js.LICENSE.txt => 3282.bdf63f0e.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/3332.ba02ea21.js create mode 100644 modern-js/builder/static/js/async/3343.f639bce0.js rename modern-js/builder/static/js/async/{5372.42034b87.js.LICENSE.txt => 3343.f639bce0.js.LICENSE.txt} (100%) rename modern-js/builder/static/js/async/{5744.0364a74a.js => 3355.ca96ad7b.js} (99%) rename modern-js/builder/static/js/async/{5744.0364a74a.js.LICENSE.txt => 3355.ca96ad7b.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/3515.d3383b08.js delete mode 100644 modern-js/builder/static/js/async/3515.d3383b08.js.LICENSE.txt rename modern-js/builder/static/js/async/{7991.6fa75131.js => 3532.e8e59468.js} (98%) rename modern-js/builder/static/js/async/{3026.deee196d.js.LICENSE.txt => 3532.e8e59468.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/36.3186651c.js create mode 100644 modern-js/builder/static/js/async/3634.fe98d3fa.js rename modern-js/builder/static/js/async/{5930.8a41b90e.js.LICENSE.txt => 3634.fe98d3fa.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/3752.718f8ef2.js rename modern-js/builder/static/js/async/{619.8eba512d.js.LICENSE.txt => 3752.718f8ef2.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/3759.aa79f831.js rename modern-js/builder/static/js/async/{6406.fbffe866.js.LICENSE.txt => 3759.aa79f831.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/3808.1e6e1b2b.js rename modern-js/builder/static/js/async/{6665.46777d44.js.LICENSE.txt => 3808.1e6e1b2b.js.LICENSE.txt} (100%) rename modern-js/builder/static/js/async/{2329.5f01dcba.js => 3853.6f1f5b68.js} (99%) rename modern-js/builder/static/js/async/{6713.3042bd5e.js.LICENSE.txt => 3853.6f1f5b68.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/3895.d71415a0.js delete mode 100644 modern-js/builder/static/js/async/3895.d71415a0.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/3934.3ecbe630.js delete mode 100644 modern-js/builder/static/js/async/3934.3ecbe630.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/3964.f7dc1ec2.js create mode 100644 modern-js/builder/static/js/async/4045.791a77ae.js rename modern-js/builder/static/js/async/{6901.725ca312.js.LICENSE.txt => 4045.791a77ae.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/4151.9120d00e.js delete mode 100644 modern-js/builder/static/js/async/4151.9120d00e.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/4308.16a6d5f0.js delete mode 100644 modern-js/builder/static/js/async/4308.16a6d5f0.js.LICENSE.txt rename modern-js/builder/static/js/async/{6713.3042bd5e.js => 4324.b5823b73.js} (99%) rename modern-js/builder/static/js/async/{6931.1053eb77.js.LICENSE.txt => 4324.b5823b73.js.LICENSE.txt} (100%) rename modern-js/builder/static/js/async/{5930.8a41b90e.js => 4341.2dd0a4cc.js} (98%) rename modern-js/builder/static/js/async/{6936.16373c4a.js.LICENSE.txt => 4341.2dd0a4cc.js.LICENSE.txt} (100%) rename modern-js/builder/static/js/async/{3375.f190427f.js => 4416.10793d6d.js} (99%) rename modern-js/builder/static/js/async/{7138.4083f041.js.LICENSE.txt => 4416.10793d6d.js.LICENSE.txt} (100%) rename modern-js/builder/static/js/async/{5372.42034b87.js => 4484.63cc8fcb.js} (99%) rename modern-js/builder/static/js/async/{7797.5f505fad.js.LICENSE.txt => 4484.63cc8fcb.js.LICENSE.txt} (100%) rename modern-js/builder/static/js/async/{9873.1f2f76cb.js => 4595.3d13219d.js} (89%) rename modern-js/builder/static/js/async/{9127.67ec3310.js.LICENSE.txt => 4595.3d13219d.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/4663.0db8815c.js rename modern-js/builder/static/js/async/{3870.62812289.js.LICENSE.txt => 4663.0db8815c.js.LICENSE.txt} (100%) rename modern-js/builder/static/js/async/{3300.5813a257.js => 4672.fe069b48.js} (97%) rename modern-js/builder/static/js/async/{7856.403cfa6c.js.LICENSE.txt => 4672.fe069b48.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/480.baae58b5.js rename modern-js/builder/static/js/async/{8146.6a03dae7.js.LICENSE.txt => 480.baae58b5.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/4814.4d2a5162.js delete mode 100644 modern-js/builder/static/js/async/4988.a7b5e1e4.js delete mode 100644 modern-js/builder/static/js/async/506.a5288c0a.js create mode 100644 modern-js/builder/static/js/async/5077.f90fba02.js rename modern-js/builder/static/js/async/{4814.4d2a5162.js.LICENSE.txt => 5077.f90fba02.js.LICENSE.txt} (72%) create mode 100644 modern-js/builder/static/js/async/5099.b8c952b5.js rename modern-js/builder/static/js/async/{7080.d6efdf7e.js.LICENSE.txt => 5099.b8c952b5.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/5121.68a8faa3.js rename modern-js/builder/static/js/async/{8204.8e569cd4.js.LICENSE.txt => 5121.68a8faa3.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/5123.7261f7b8.js delete mode 100644 modern-js/builder/static/js/async/5137.58f03281.js delete mode 100644 modern-js/builder/static/js/async/5137.58f03281.js.LICENSE.txt rename modern-js/builder/static/js/async/{9617.eafa0e38.js => 5162.fe0f3c10.js} (98%) rename modern-js/builder/static/js/async/{7744.68d2304b.js.LICENSE.txt => 5162.fe0f3c10.js.LICENSE.txt} (100%) rename modern-js/builder/static/js/async/{2968.57332b58.js => 5172.abf0c1e3.js} (98%) rename modern-js/builder/static/js/async/{7787.0ec3c9fc.js.LICENSE.txt => 5172.abf0c1e3.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/5200.10da73d2.js delete mode 100644 modern-js/builder/static/js/async/5200.10da73d2.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/5201.06db0f7a.js delete mode 100644 modern-js/builder/static/js/async/5201.06db0f7a.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/5233.d15dfc17.js rename modern-js/builder/static/js/async/{7991.6fa75131.js.LICENSE.txt => 5233.d15dfc17.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/542.7a1c175b.js rename modern-js/builder/static/js/async/{8465.88f06dc4.js.LICENSE.txt => 542.7a1c175b.js.LICENSE.txt} (100%) rename modern-js/builder/static/js/async/{8777.39f9f2cb.js => 5525.ccf266fc.js} (98%) rename modern-js/builder/static/js/async/{8024.6b11157d.js.LICENSE.txt => 5525.ccf266fc.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/5573.e8470b83.js rename modern-js/builder/static/js/async/{8474.47e2b58a.js.LICENSE.txt => 5573.e8470b83.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/5579.8b1257e4.js rename modern-js/builder/static/js/async/{8738.76ae60b2.js.LICENSE.txt => 5579.8b1257e4.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/5627.7e20b475.js delete mode 100644 modern-js/builder/static/js/async/5627.7e20b475.js.LICENSE.txt rename modern-js/builder/static/js/async/{7787.0ec3c9fc.js => 5684.20867122.js} (97%) rename modern-js/builder/static/js/async/{8777.39f9f2cb.js.LICENSE.txt => 5684.20867122.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/5719.c84f5fd1.js delete mode 100644 modern-js/builder/static/js/async/5719.c84f5fd1.js.LICENSE.txt rename modern-js/builder/static/js/async/{3870.62812289.js => 5770.d03db12c.js} (98%) rename modern-js/builder/static/js/async/{9531.5790f8a9.js.LICENSE.txt => 5770.d03db12c.js.LICENSE.txt} (100%) rename modern-js/builder/static/js/async/{7138.4083f041.js => 5817.6b8843bc.js} (97%) rename modern-js/builder/static/js/async/{9360.b479adaa.js.LICENSE.txt => 5817.6b8843bc.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/5830.d458d935.js rename modern-js/builder/static/js/async/{9513.9e3a1116.js.LICENSE.txt => 5830.d458d935.js.LICENSE.txt} (100%) rename modern-js/builder/static/js/async/{1180.69922282.js => 5851.02f6d19f.js} (99%) rename modern-js/builder/static/js/async/{9594.75d0cff3.js.LICENSE.txt => 5851.02f6d19f.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/6040.3be66fcc.js rename modern-js/builder/static/js/async/{987.07a82164.js.LICENSE.txt => 6040.3be66fcc.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/6049.efb92913.js delete mode 100644 modern-js/builder/static/js/async/6049.efb92913.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/6081.52d430cc.js delete mode 100644 modern-js/builder/static/js/async/6081.52d430cc.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/6172.eb2a68ff.js rename modern-js/builder/static/js/async/{9471.f3ce5363.js.LICENSE.txt => 6172.eb2a68ff.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/619.8eba512d.js create mode 100644 modern-js/builder/static/js/async/6215.164e93ce.js create mode 100644 modern-js/builder/static/js/async/6215.164e93ce.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/640.a7fd03d8.js create mode 100644 modern-js/builder/static/js/async/640.a7fd03d8.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/6441.758bd66f.js create mode 100644 modern-js/builder/static/js/async/6441.758bd66f.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/6555.52bfd0fb.js rename modern-js/builder/static/js/async/{9658.dad2fb0d.js.LICENSE.txt => 6555.52bfd0fb.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/6560.519f77ca.js delete mode 100644 modern-js/builder/static/js/async/6560.519f77ca.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/6732.7bc008cf.js delete mode 100644 modern-js/builder/static/js/async/6732.7bc008cf.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/6818.6898f46b.js rename modern-js/builder/static/js/async/{1110.1ca5b0cd.js.LICENSE.txt => 6818.6898f46b.js.LICENSE.txt} (62%) create mode 100644 modern-js/builder/static/js/async/684.11cc4e07.js create mode 100644 modern-js/builder/static/js/async/684.11cc4e07.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/695.e0298b28.js delete mode 100644 modern-js/builder/static/js/async/695.e0298b28.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/702.f708e873.js delete mode 100644 modern-js/builder/static/js/async/702.f708e873.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/7032.6dca68b5.js rename modern-js/builder/static/js/async/{5123.7261f7b8.js.LICENSE.txt => 7032.6dca68b5.js.LICENSE.txt} (65%) delete mode 100644 modern-js/builder/static/js/async/7054.f9d36145.js delete mode 100644 modern-js/builder/static/js/async/7054.f9d36145.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/71.4a8bac6b.js delete mode 100644 modern-js/builder/static/js/async/71.4a8bac6b.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/7133.edde3d80.js create mode 100644 modern-js/builder/static/js/async/7133.edde3d80.js.LICENSE.txt rename modern-js/builder/static/js/async/{3576.935c718b.js => 7293.edf28a04.js} (98%) create mode 100644 modern-js/builder/static/js/async/7293.edf28a04.js.LICENSE.txt rename modern-js/builder/static/js/async/{9127.67ec3310.js => 7300.e0c00968.js} (88%) rename modern-js/builder/static/js/async/{9778.d675ce1c.js.LICENSE.txt => 7300.e0c00968.js.LICENSE.txt} (100%) create mode 100644 modern-js/builder/static/js/async/7466.674c2cab.js create mode 100644 modern-js/builder/static/js/async/7466.674c2cab.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/7474.ba1975f3.js delete mode 100644 modern-js/builder/static/js/async/7474.ba1975f3.js.LICENSE.txt rename modern-js/builder/static/js/async/{1391.b6c58e58.js => 7492.2831ae5a.js} (98%) create mode 100644 modern-js/builder/static/js/async/7492.2831ae5a.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/7571.053dbc18.js delete mode 100644 modern-js/builder/static/js/async/7571.053dbc18.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/7654.25567045.js create mode 100644 modern-js/builder/static/js/async/7654.25567045.js.LICENSE.txt rename modern-js/builder/static/js/async/{2122.347a9068.js => 7697.64758e8e.js} (98%) create mode 100644 modern-js/builder/static/js/async/7697.64758e8e.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/7703.c76de7f5.js delete mode 100644 modern-js/builder/static/js/async/7703.c76de7f5.js.LICENSE.txt rename modern-js/builder/static/js/async/{6936.16373c4a.js => 7930.fa61ecf8.js} (99%) create mode 100644 modern-js/builder/static/js/async/7930.fa61ecf8.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/796.effe48d3.js create mode 100644 modern-js/builder/static/js/async/796.effe48d3.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/8024.6b11157d.js create mode 100644 modern-js/builder/static/js/async/8039.70246e3f.js create mode 100644 modern-js/builder/static/js/async/8039.70246e3f.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/8050.15206c07.js create mode 100644 modern-js/builder/static/js/async/8050.15206c07.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/8146.6a03dae7.js rename modern-js/builder/static/js/async/{6901.725ca312.js => 8150.d4c1cf8d.js} (99%) create mode 100644 modern-js/builder/static/js/async/8150.d4c1cf8d.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/8204.8e569cd4.js create mode 100644 modern-js/builder/static/js/async/8344.ac1a428c.js create mode 100644 modern-js/builder/static/js/async/8344.ac1a428c.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/8451.748a89ff.js delete mode 100644 modern-js/builder/static/js/async/8451.748a89ff.js.LICENSE.txt rename modern-js/builder/static/js/async/{3026.deee196d.js => 8468.87957486.js} (98%) rename modern-js/builder/static/js/async/{9617.eafa0e38.js.LICENSE.txt => 8468.87957486.js.LICENSE.txt} (100%) rename modern-js/builder/static/js/async/{6931.1053eb77.js => 8472.83fb07e3.js} (98%) create mode 100644 modern-js/builder/static/js/async/8472.83fb07e3.js.LICENSE.txt rename modern-js/builder/static/js/async/{3415.76e85ae9.js => 8473.17186655.js} (98%) create mode 100644 modern-js/builder/static/js/async/8473.17186655.js.LICENSE.txt rename modern-js/builder/static/js/async/{6665.46777d44.js => 8476.0eee5955.js} (95%) create mode 100644 modern-js/builder/static/js/async/8476.0eee5955.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/8604.9993c8ca.js delete mode 100644 modern-js/builder/static/js/async/8604.9993c8ca.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/8697.25660360.js create mode 100644 modern-js/builder/static/js/async/8697.25660360.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/8744.3de010dd.js create mode 100644 modern-js/builder/static/js/async/8744.3de010dd.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/875.1a5e50ff.js create mode 100644 modern-js/builder/static/js/async/875.1a5e50ff.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/8815.e86f051c.js delete mode 100644 modern-js/builder/static/js/async/8815.e86f051c.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/887.9881f04f.js create mode 100644 modern-js/builder/static/js/async/887.9881f04f.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/893.4a97a3ca.js create mode 100644 modern-js/builder/static/js/async/893.4a97a3ca.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/8962.09ca403e.js create mode 100644 modern-js/builder/static/js/async/8962.09ca403e.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/9008.631ed1a3.js create mode 100644 modern-js/builder/static/js/async/9008.631ed1a3.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/9025.6edad7f6.js delete mode 100644 modern-js/builder/static/js/async/9025.6edad7f6.js.LICENSE.txt rename modern-js/builder/static/js/async/{3630.47e52482.js => 9027.1e7d96ce.js} (89%) rename modern-js/builder/static/js/async/{9873.1f2f76cb.js.LICENSE.txt => 9027.1e7d96ce.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/async/9114.e3ddccce.js delete mode 100644 modern-js/builder/static/js/async/9134.4c13b487.js delete mode 100644 modern-js/builder/static/js/async/9134.4c13b487.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/9205.c3cb7f24.js rename modern-js/builder/static/js/async/{9878.c652ee6f.js.LICENSE.txt => 9205.c3cb7f24.js.LICENSE.txt} (100%) rename modern-js/builder/static/js/async/{7080.d6efdf7e.js => 9274.9e237813.js} (98%) create mode 100644 modern-js/builder/static/js/async/9274.9e237813.js.LICENSE.txt rename modern-js/builder/static/js/async/{9594.75d0cff3.js => 9339.470ecb2a.js} (97%) create mode 100644 modern-js/builder/static/js/async/9339.470ecb2a.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/9437.256e8293.js create mode 100644 modern-js/builder/static/js/async/9437.256e8293.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/9471.f3ce5363.js delete mode 100644 modern-js/builder/static/js/async/9513.9e3a1116.js delete mode 100644 modern-js/builder/static/js/async/9514.8efa5de9.js delete mode 100644 modern-js/builder/static/js/async/9514.8efa5de9.js.LICENSE.txt rename modern-js/builder/static/js/async/{7744.68d2304b.js => 9603.d170c75f.js} (98%) create mode 100644 modern-js/builder/static/js/async/9603.d170c75f.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/964.0f119dde.js create mode 100644 modern-js/builder/static/js/async/964.0f119dde.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/9641.462ed394.js delete mode 100644 modern-js/builder/static/js/async/9641.462ed394.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/async/9657.4908f7a4.js create mode 100644 modern-js/builder/static/js/async/9657.4908f7a4.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/9658.dad2fb0d.js rename modern-js/builder/static/js/async/{7856.403cfa6c.js => 9706.f8336e97.js} (99%) create mode 100644 modern-js/builder/static/js/async/9706.f8336e97.js.LICENSE.txt rename modern-js/builder/static/js/async/{9360.b479adaa.js => 9735.f82205af.js} (99%) create mode 100644 modern-js/builder/static/js/async/9735.f82205af.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/9778.d675ce1c.js create mode 100644 modern-js/builder/static/js/async/9849.25a389bc.js create mode 100644 modern-js/builder/static/js/async/9849.25a389bc.js.LICENSE.txt delete mode 100644 modern-js/builder/static/js/async/987.07a82164.js delete mode 100644 modern-js/builder/static/js/async/9878.c652ee6f.js delete mode 100644 modern-js/builder/static/js/async/9945.fad7c679.js.LICENSE.txt create mode 100644 modern-js/builder/static/js/index.b236c229.js rename modern-js/builder/static/js/{index.c3b6e22e.js.LICENSE.txt => index.b236c229.js.LICENSE.txt} (100%) delete mode 100644 modern-js/builder/static/js/index.c3b6e22e.js create mode 100644 modern-js/builder/static/js/lib-polyfill.9e97cc5b.js rename modern-js/builder/static/js/{lib-polyfill.c604f64a.js.LICENSE.txt => lib-polyfill.9e97cc5b.js.LICENSE.txt} (92%) delete mode 100644 modern-js/builder/static/js/lib-polyfill.c604f64a.js create mode 100644 modern-js/builder/static/search_index.en.139b58c9.json delete mode 100644 modern-js/builder/static/search_index.en.3acbf387.json delete mode 100644 modern-js/builder/static/search_index.zh.31c7c7bd.json create mode 100644 modern-js/builder/static/search_index.zh.cc6674af.json diff --git a/modern-js/builder/api/builder-core.html b/modern-js/builder/api/builder-core.html index af236eca95..2799506582 100644 --- a/modern-js/builder/api/builder-core.html +++ b/modern-js/builder/api/builder-core.html @@ -1,4 +1,4 @@ -
本章节描述了 Builder 提供的一些核心方法。
创建一个 Builder 实例对象。
@@ -26,7 +26,7 @@当传入 builderRspackProvider
时,Builder 会使用 Rspack 作为 bundler 进行构建。
createBuilder
的第二个参数是一个配置对象,你可以传入以下选项:
各个选项的作用:
cwd
: 当前执行构建的根路径,默认值为 process.cwd()
entry
: 构建入口对象target
: 构建产物类型,默认值为 ['web']
,详见 构建产物类型 章节。target
: 构建产物类型,默认值为 ['web']
,详见 构建产物类型 章节。framework
: 框架的英文名称,唯一标识符,默认值为 'modern.js'
configPath
: 框架配置文件的路径(绝对路径),该参数影响构建缓存更新@@ -97,7 +97,7 @@该方法不会修改传入的 config 对象。
@@ -106,7 +106,7 @@大部分场景下,推荐从 Builder 中引用 webpack 对象,而不是手动安装一份 "webpack" 依赖,这样可以避免出现多实例问题。
大部分场景下,推荐从 Builder 中引用 HtmlWebpackPlugin 对象,而不是手动安装一份 "html-webpack-plugin" 依赖,这样可以避免出现多实例问题。
本章节描述了 Builder 实例对象上所有的属性和方法。
builder.context
是一个只读对象,提供一些上下文信息。
构建产物类型,对应调用 createBuilder
时传入的 target
选项。
当前执行构建的根路径,对应调用 createBuilder
时传入的 cwd
选项。
src 目录的绝对路径。
构建产物输出目录的绝对路径,对应 BuilderConfig
中的 output.distPath.root
配置项。
构建过程中生成的缓存文件所在的绝对路径。
框架配置文件的绝对路径,对应调用 createBuilder
时传入的 configPath
选项。
tsconfig.json 文件的绝对路径,若项目中不存在 tsconfig.json 文件,则为 undefined
。
框架的英文名称,唯一标识符,默认值为 'modern.js'
。
Dev Server 相关信息,包含了当前 Dev Server 的 hostname 和端口号。
当前执行构建的构建工具类型。
调用 build 方法时,会执行一次生产环境构建。
如果需要执行一次开发环境构建,可以将 mode
参数设置为 'development'
。
如果需要自动监听文件变化并重新执行构建,可以将 watch
参数设置为 true
。
个别情况下,你可能希望使用自定义的 compiler:
启动本地 Dev Server,基于 Modern.js Dev Server 实现。
启动 Dev Server:
-成功启动 Dev Server 后,可以看到以下日志信息:
startDevServer
会返回以下参数:
urls
:访问 Dev Server 的 URLs将 printURLs
设置为 false
可以禁用默认的 URL 输出,此时你可以输出自定义的日志内容。
你也可以直接将 printURLs
配置为一个函数来修改 URL,比如给每个 URL 增加一个子路径:
当端口被占用时,Builder 会自动递增端口号,直至找到一个可用端口。
如果你希望在端口被占用时抛出异常,可以将 strictPort
设置为 true
。
个别情况下,你可能希望使用自定义的 compiler:
某些情况下,默认启动的端口号已经被占用,此时 Builder 会自动递增端口号,直至找到一个可用端口。这个过程会输出提示日志,如果你不希望这段日志,可以将 getPortSliently
设置为 true
。
默认情况下,Builder 会使用 @modern-js/utils/logger
来输出日志,你可以通过 logger
参数来自定义日志输出对象。
这样,Builder 会使用你自定义的日志输出对象来输出日志。
在本地启动 Server 来预览生产环境构建的产物,需要在 builder.build
方法之后执行。
启动 Server:
-serve
会返回以下参数:
urls
:访问 Server 的 URLs创建一个 compiler 对象。
当 createBuilder
的 target
选项包含一个值时,返回值为 Compiler
;当 target
包含多个值时,返回值为 MultiCompiler
。
@@ -288,7 +288,7 @@大部分场景下,不需要使用该 API,除非需要进行自定义 Dev Server 等高级操作。
移除一个或多个 builder 插件,可以被多次调用。
该方法需要在开始编译前调用,如果在开始编译之后调用,则不会影响编译结果。
;
判断某个插件是否已经被注册。
查看 Builder 内部最终生成的 builder 配置和 bundler 配置。
拿到字符串格式的 Config 内容:
直接将配置内容写入到磁盘上:
;
onBeforeCreateCompiler
是在创建底层 Compiler 实例前触发的回调函数,当你执行 builder.startDevServer
、builder.build
或 builder.createCompiler
时,都会调用此钩子。
你可以通过 bundlerConfigs
参数获取到底层打包工具的最终配置数组:
;
onAfterCreateCompiler
是在创建 Compiler 实例后、执行构建前触发的回调函数,当你执行 builder.startDevServer
、builder.build
或 builder.createCompiler
时,都会调用此钩子。
你可以通过 compiler
参数获取到 Compiler 实例对象:
;
onBeforeBuild
是在执行生产环境构建前触发的回调函数,你可以通过 bundlerConfigs
参数获取到底层打包工具的最终配置数组:
;
onAfterBuild
是在执行生产环境构建后触发的回调函数,你可以通过 stats
参数获取到构建结果信息:
;
在启动开发服务器前调用。
;
在启动开发服务器后调用,你可以通过 port
参数获得开发服务器监听的端口号。
;
在每次开发环境构建结束后调用,你可以通过 isFirstCompile
来判断是否为首次构建。
;
在进程即将退出时调用,这个钩子只能执行同步代码。
;
获取 Builder 配置,该方法必须在 modifyBuilderConfig
钩子执行完成后才能被调用。
;
获取归一化后的 Builder 配置,该方法必须在 modifyBuilderConfig
钩子执行完成后才能被调用。
相较于 getBuilderConfig
方法,该方法返回的配置经过了归一化处理,配置的类型定义会得到收敛,比如 config.html
的 undefined
类型将被移除。
推荐优先使用该方法获取配置。
;
获取所有 HTML 产物的路径信息。
该方法会返回一个对象,对象的 key 为 entry 名称,value 为 HTML 文件在产物目录下的相对路径。
本章节描述了 Builder 提供的一些类型定义。
Builder 实例的类型。
你可以通过泛型来传入 Provider 的类型,使 Builder 实例获得更准确的类型定义:
Builder 实例中 context 属性的类型定义。
Builder 插件的类型,需要配合 provider 中提供的 BuilderPluginAPI
类型来使用。
Builder 构建产物的类型。
-对应 createBuilder
方法的 entry
选项的类型。
对应 createBuilder
方法的入参类型。
本章节描述了 Builder 中与本地开发有关的配置。
;
boolean | string
'/'
对应 JS 文件在浏览器中加载的地址如下:
-如果设置 assetPrefix
为 false
或不设置,则默认使用 /
作为访问前缀。
当 assetPrefix
的值为 string
类型时,字符串会作为前缀,自动拼接到静态资源访问 URL 上:
对应 JS 文件在浏览器中加载的地址如下:
-dev.assetPrefix
对应以下原生配置:
它与原生配置的区别在于:
dev.assetPrefix
仅在开发环境下生效。dev.assetPrefix
默认会自动补全尾部的 /
。dev.assetPrefix
的值会写入 process.env.ASSET_PREFIX
环境变量。dev.assetPrefix
仅在开发环境下生效。
dev.assetPrefix
默认会自动补全尾部的 /
。
dev.assetPrefix
的值会写入 process.env.ASSET_PREFIX
环境变量。
;
() => Promise<void> | void
undefined
;
boolean
true
;
string
0.0.0.0
;
boolean | { key: string; cert: string }
false
配置该选项后,可以开启 Dev Server 对 HTTPS 的支持,同时会禁用 HTTP 服务器。
开启前:
开启后:
你可以直接将 https
设置为 true
,Builder 会基于 devcert 来自动生成 Dev Server 所需的 HTTPS 证书。
使用这种方式时,你需要在当前项目中手动安装 devcert 依赖:
+你可以直接将 https
设置为 true
,Builder 会基于 devcert 来自动生成 Dev Server 所需的 HTTPS 证书。
使用这种方式时,你需要在当前项目中手动安装 devcert 依赖:
然后配置 dev.https
为 true
即可:
该方式有一定局限性,由于 devcert 目前不支持 IP addresses,因此访问 Network 域名时,会遇到「您的连接不是私密连接」的问题。
此问题的解决方法为:点击 Chrome 浏览器问题页面的「高级」->「继续前往 192.168.0.1(不安全)」。
https 代理自动安装证书需要获取 root 权限, 请根据提示输入密码即可。 密码仅在信任证书时使用,不会泄漏或者用于其他环节。
你也可以在 dev.https
选项中手动传入 HTTPS 服务器所需要的证书和对应的私钥,这个参数将直接传递给 Node.js 中 https 模块的 createServer。
具体可以参考 https.createServer。
+具体可以参考 https.createServer。
;
number
8080
;
true
如果需要修改进度条左侧显示的文本内容,可以设置 id
选项:
;
boolean | string | string[] | undefined
undefined
由于端口号可能会发生变动,你可以使用 <port>
占位符来指代当前端口号,Builder 会自动将占位符替换为实际监听的端口号。
在 MacOS 上,通过设置环境变量 BROWSER
,你可以指定 Dev Server 在启动时打开的浏览器,支持如下的值:
本章节描述了 Builder 中的一些实验性配置,实验性配置可以开启 Builder 中尚未稳定的功能。
-如果你在使用实验性功能时遇到问题,请先关闭对应的配置,并通过 GitHub Issues 进行反馈。
+如果你在使用实验性功能时遇到问题,请先关闭对应的配置,并通过 GitHub Issues 进行反馈。
;
false
仅支持 webpack
延迟编译只在开发环境下生效。
延迟编译 dynamic import 引入的异步模块:
+延迟编译 dynamic import 引入的异步模块:
开启 imports
选项后,所有的异步模块只有在被请求时才触发编译。如果你的项目是一个单页应用(SPA),并通过 dynamic import 进行了路由拆分,那么会有明显的编译提速效果。
除了延迟编译异步模块,你也可以选择同时延迟编译入口模块和异步模块。
@@ -50,13 +50,13 @@以上配置也可以简化为:
开启 entries
选项后,当启动编译时,不会编译所有的页面,而是仅在路由跳转到对应的页面时,才对该页面进行编译。
使用延迟编译入口模块时,有以下注意事项:
Lazy Compilation 依赖 webpack 在本地启动的开发服务器,当你将某个域名代理到 localhost 进行开发时,Lazy Compilation 将无法正常工作。因此,如果你需要使用代理时,请禁用 Lazy Compilation。
考虑到 Lazy Compilation 仍然是 webpack 的实验性功能,因此你在使用过程中,可能会遇到一些潜在的问题,比如编译产物的行为变化,或是编译出现异常。
-当你遇到这些问题时,可以参考 webpack 的 Issues 寻找解决方案,也可以关闭 lazyCompilation
配置项。
当你遇到这些问题时,可以参考 webpack 的 Issues 寻找解决方案,也可以关闭 lazyCompilation
配置项。
;
boolean | PluginSourceBuildOptions
false
更多信息可参考「源码构建模式」。
+}; +更多信息可参考「源码构建模式」。
experiments.sourceBuild
底层基于 Rsbuild 的 Source Build 插件 实现,你可以传入插件选项,比如:
experiments.sourceBuild
底层基于 Rsbuild 的 Source Build 插件 实现,你可以传入插件选项,比如:
本章节描述了 Builder 中与 HTML 有关的配置。
;
string
undefined
设置为绝对路径:
重新编译后,HTML 中自动生成了以下标签:
-;
boolean | 'anonymous' | 'use-credentials'
false
用于设置 <script>
和 <style>
标签的 crossorigin 属性。
用于设置 <script>
和 <style>
标签的 crossorigin 属性。
true
时,它会被自动设置为 crossorigin="anonymous"
。false
时,它不会设置 crossorigin
属性。编译后,HTML 中的 <script>
标签变为:
<style>
标签变为:
crossorigin
可以被设置为以下几个值:
anonymous
:请求使用 CORS 头,并将证书标志设置为 "same-origin"。除非目标是相同的 origin,否则不会通过 cookie、客户端 SSL 证书或 HTTP 身份验证交换用户凭据。use-credentials
:请求使用 CORS 头,证书标志设置为 "include",并始终包含用户凭据。anonymous
:请求使用 CORS 头,并将证书标志设置为 "same-origin"。除非目标是相同的 origin,否则不会通过 cookie、客户端 SSL 证书或 HTTP 身份验证交换用户凭据。
use-credentials
:请求使用 CORS 头,证书标志设置为 "include",并始终包含用户凭据。
;
boolean
false
移除 HTML 产物对应的文件夹。开启该选项后,生成的 HTML 文件目录会从 [name]/index.html
变为 [name].html
。
默认情况下,HTML 产物在 dist
目录下的结构为:
开启 html.disableHtmlFolder
配置:
重新编译后,HTML 产物在 dist 中的目录结构如下:
如果需要设置 HTML 文件在 dist 目录中的路径,请使用
output.distPath.html
配置。
;
string
undefined
配置该选项后,在编译过程中会自动将图标拷贝至 dist 目录下,并在 HTML 中添加相应的 link
标签。
设置为相对路径:
设置为绝对路径:
设置为 URL:
重新编译后,HTML 中自动生成了以下标签:
-;
Record<string, string>
undefined
整体用法与 favicon
一致,并且可以使用「入口名称」作为 key ,对各个页面进行单独设置。
faviconByEntries
的优先级高于 favicon
,因此会覆盖 favicon
中设置的值。
重新编译后,可以看到:
foo
的 favicon 为 ./src/assets/foo.png
。./src/assets/default.png
。页面 foo
的 favicon 为 ./src/assets/foo.png
。
其他页面的 favicon 为 ./src/assets/default.png
。
;
'head' | 'body'| 'true' | false
'head'
添加如下配置,可以将 script 插入至 body 标签:
可以看到 script 标签生成在 body 标签尾部:
;
Record<string, boolean | string>
undefined
整体用法与 inject
一致,并且可以使用「入口名称」作为 key ,对各个页面进行单独设置。
injectByEntries
的优先级高于 inject
,因此会覆盖 inject
中设置的值。
重新编译后,可以看到:
foo
的 script 标签会插入到 body
标签内。head
标签内。页面 foo
的 script 标签会插入到 body
标签内。
其他页面的 script 标签会插入到 head
标签内。
;
Record<string, false | string | Record<string, string | boolean>>
undefined
最终在 HTML 中生成的 meta
标签为:
当 meta
对象的 value
为对象时,会将该对象的 key: value
映射为 meta
标签的属性。
这种情况下默认不会设置 name
和 content
属性。
最终在 HTML 中生成的 meta
标签为:
将 meta
对象的 value
设置为 false
,则表示不生成对应的 meta 标签。
比如移除框架预设的 imagemode
:
;
Record<string, Meta>
undefined
整体用法与 meta
一致,并且可以使用「入口名称」作为 key ,对各个页面进行单独设置。
metaByEntries
的优先级高于 meta
,因此会覆盖 meta
中设置的值。
编译后,可以看到页面 foo
的 meta 为:
其他页面的 meta 为:
-;
string
'root'
默认情况下,HTML 模板中包含了 root
节点用于组件挂载,通过 mountId
可以修改该节点的 id。
修改 DOM 挂载节点 id
为 app
:
编译后:
在修改 mountId
后,如果你的代码中有获取 root
根节点的逻辑,请更新对应的值:
如果你自定义了 HTML 模板,请确保模板中包含 <div id="<%= mountId %>"></div>
,否则 mountId
配置项无法生效。
;
'defer' | 'blocking' | 'module'
'defer'
当浏览器遇到带有 defer 属性的 <script>
标签时,它会异步地下载脚本文件,不会阻塞页面的解析和渲染。在页面解析和渲染完成后,浏览器会按照 <script>
标签在文档中出现的顺序依次执行它们。
当你需要设置 blocking
时,建议把 html.inject
设置为 body
,避免页面渲染被阻塞。
将 scriptLoading
设置为 module
时,可以让脚本支持 ESModule 语法,同时浏览器也会自动默认延迟执行这些脚本,效果与 defer
类似。
;
ArrayOrNot<HtmlInjectTag | HtmlInjectTagHandler>
undefined
对象形式的配置项可以用于描述需要注入的标签,并可以通过参数控制注入的位置:
这样的配置将会在 HTML 的 head
最后添加一个 script
标签:
标签最终的插入位置由 head
和 append
选项决定,两个配置相同的元素将被插入到相同区域,并且维持彼此之间的相对位置。
标签中表示外部资源文件路径的字段会受到 publicPath
和 hash
选项的影响,
这些字段包括 script
标签的 src
和 link
标签的 href
。
html.tags
也支持传入回调函数,通过在回调中编写逻辑可以任意修改标签列表,常用于修改标签列表或是在插入标签的同时确保其相对位置。
回调函数接受 tags 列表作为参数,并需要修改或直接返回新的 tags 数组:
函数将在 HTML 处理流程的最后被执行,即如下的例子中不管回调函数在配置项中的位置如何,
参数 tags
都会包含配置项中所有的对象形式配置。
也因此在回调中修改 append
publicPath
hash
等属性都不会生效,因为这些属性都已经分别应用到了标签的位置和路径属性。
这个配置用于在 Builder 构建完成后修改 HTML 产物的内容,并不会引入和解析新的模块。因此,它无法用于引入未编译的源码文件,也无法代替 source.preEntry 等配置。
+这个配置用于在 Builder 构建完成后修改 HTML 产物的内容,并不会引入和解析新的模块。因此,它无法用于引入未编译的源码文件,也无法代替 source.preEntry 等配置。
例如对于以下项目:
这里的 tag 对象将会在简单处理后直接添加到 HTML 产物中,但对应的 polyfill.ts
将不会被转译、打包,也因此应用会在处理这行脚本时出现 404 错误。
合理的使用场景包括:
得到的产物将会类似:
;
Record<string, ArrayOrNot<HtmlInjectTag | HtmlInjectTagHandler>>
undefined
整体用法与 tags
一致,并且可以使用「入口名称」作为 key ,对各个页面进行单独设置。
tagsByEntries
的优先级高于 tags
,因此会覆盖 tags
中设置的值。
编译后,可以看到页面 foo
注入标签:
其他页面则注入了:
-;
string
定义 HTML 模板的文件路径,对应 html-webpack-plugin 的 template
配置项。
定义 HTML 模板的文件路径,对应 html-webpack-plugin 的 template
配置项。
使用自定义的 HTML 模板文件替代默认模板,可以添加如下设置:
;
Object
undefined
整体用法与 template
一致,并且可以使用「入口名称」作为 key ,对各个页面进行单独设置。
templateByEntries
的优先级高于 template
,因此会覆盖 template
设置的值。
;
Object | Function
定义 HTML 模板中的参数,对应 html-webpack-plugin 的 templateParameters
配置项。你可以使用配置为对象或者函数。
定义 HTML 模板中的参数,对应 html-webpack-plugin 的 templateParameters
配置项。你可以使用配置为对象或者函数。
如果是对象,会和默认参数合并。比如:
如果是函数,会传入默认参数,你可以返回一个对象,用于覆盖默认参数。比如:
如果需要在 HTML 模板中使用 foo
参数,可以添加如下设置:
或者使用函数配置:
接下来,你可以在 HTML 模板中,通过 <%= foo %>
来读取参数:
经过编译后的最终 HTML 代码如下:
-;
Object
undefined
整体用法与 templateParameters
一致,并且可以使用「入口名称」作为 key ,对各个页面进行单独设置。
templateParametersByEntries
的优先级高于 templateParameters
,因此会覆盖 templateParameters
中设置的值。
;
string
undefined
;
Record<string, string>
undefined
title
。
整体用法与 title
一致,并且可以使用「入口名称」作为 key ,对各个页面进行单独设置。
titleByEntries
的优先级高于 title
,因此会覆盖 title
中设置的值。
重新编译后,可以看到:
foo
的 title 为 TikTok
。本章节描述了 Builder 中与构建产物有关的配置。
;
string
'/'
构建之后,可以看到 JS 文件从以下地址加载:
output.assetPrefix
对应以下原生配置:
它与原生配置的区别在于:
output.assetPrefix
仅在生产环境下生效。output.assetPrefix
默认会自动补全尾部的 /
。output.assetPrefix
的值会写入 process.env.ASSET_PREFIX
环境变量。output.assetPrefix
仅在生产环境下生效。
output.assetPrefix
默认会自动补全尾部的 /
。
output.assetPrefix
的值会写入 process.env.ASSET_PREFIX
环境变量。
;
Object
由于该能力会往 HTML 中注入额外的一些运行时代码,因此我们默认关闭了该能力,如果需要开启该能力,你可以添加以下配置:
当你开启该能力后,assetsRetry
的默认配置如下:
同时你也可以使用以下的配置项,来定制你的重试逻辑。
添加以上配置后,当 cdn1.com
域名的资源加载失败时,请求域名会自动降级到 cdn2.com
。
如果 cdn2.com
的资源也请求失败,则会继续请求 cdn3.com
。
number
string | ((url: string) => boolean) | undefined
undefined | boolean | 'anonymous' | 'use-credentials'
undefined | (options: AssetsRetryHookContext) => void
undefined | (options: AssetsRetryHookContext) => void
undefined | (options: AssetsRetryHookContext) => void
boolean
添加以上配置后,assetsRetry
的运行时代码会被抽取为一个独立的 assets-retry.[version].js
文件,并输出到产物目录下。
这种方式的弊端在于,assets-retry.[version].js
自身有加载失败的可能性。如果出现这种情况,静态资源重试的逻辑就无法生效。因此,我们更推荐将运行时代码内联到 HTML 文件中。
以下场景 assetsRetry
可能无法生效:
目前 assetsRetry
无法对动态 import 资源生效,该功能正在支持中。
assetsRetry
通过监听页面 error 事件来获悉当前资源是否加载失败需要重试。因此,如果自定义模版中的资源执行早于 assetsRetry
,那 assetsRetry
无法监听到该资源加载失败的事件,故无法 retry。
如果想要 assetsRetry
对自定义模版中的资源生效,可参考 自定义插入示例 来修改 html.inject 配置和自定义模版。
如果想要 assetsRetry
对自定义模版中的资源生效,可参考 自定义插入示例 来修改 html.inject 配置和自定义模版。
;
'ascii' | 'utf8'
'ascii'
当 output.charset
为 utf8
时,Builder 会自动将 <meta charset="utf-8">
添加到生成的 HTML 文件中。
;
boolean
true
;
boolean | object
false
此时,rem 配置默认如下:
当 output.convertToRem
的值为 object
类型时,Builder 会根据当前配置进行 rem 处理。
选项:
@@ -397,12 +403,12 @@object
;
CopyPluginOptions | CopyPluginOptions['patterns']
undefined
更详细的配置项请参考:copy-webpack-plugin 文档。
+}; +更详细的配置项请参考:copy-webpack-plugin 文档。
;
自定义 CSS 模块配置。
auto 配置项允许基于文件名自动启用 CSS 模块。
@@ -463,7 +469,7 @@类型说明:
undefined
: 根据 output.disableCssModuleExtension 配置项决定为哪些样式文件启用 CSS 模块。undefined
: 根据 output.disableCssModuleExtension 配置项决定为哪些样式文件启用 CSS 模块。true
: 为所有匹配 /\.module\.\w+$/i.test(filename)
正则表达式的文件启用 CSS 模块。false
: 禁用 CSS 模块。RegExp
: 为所有匹配 /RegExp/i.test(filename)
正则表达式的文件禁用 CSS 模块。导出的类名称的样式。
;
string
设置 CSS Modules 编译后生成的 className 格式。
cssModuleLocalIdentName
在开发环境和生产环境有不同的默认值。
在 cssModuleLocalIdentName
中,你可以使用以下模板字符串:
在使用 Rspack 作为打包工具时, 暂不支持配置 <hashDigest>
。
将 cssModuleLocalIdentName
设置为其他值:
;
设置图片、字体、媒体等静态资源被自动内联为 base64 的体积阈值。
默认情况下,体积小于 10KB 的图片、字体、媒体等文件,会自动经过 Base64 编码,内联到页面中,不再会发送独立的 HTTP 请求。
你可以通过修改 dataUriLimit
参数来调整这个阈值。
image
:表示非 SVG 图片的体积阈值。media
:表示视频等媒体资源的体积阈值。修改图片资源的阈值为 5000 Bytes,设置视频资源不内联:
;
boolean
false
是否禁用 CSS 提取逻辑,并将 CSS 文件内联到 JS 文件中。
默认情况下,Builder 会把 CSS 提取为独立的 .css
文件,并输出到构建产物目录。设置该选项为 true
后,CSS 文件会被内联到 JS 文件中,并在运行时通过 <style>
标签插入到页面上。
;
boolean
false
.sass
、.scss
和 .less
文件的处理规则与 .css
文件一致,也会受到 disableCssModuleExtension
的影响。
我们不推荐开启此配置项,因为开启 disableCssModuleExtension
后,CSS Modules 文件和普通 CSS 文件无法得到明确的区分,不利于长期维护。
以下是对 CSS Modules 判断规则的详细解释:
对于 node_modules 中的 CSS Modules 文件,请始终使用 *.module.css
后缀。
;
设置构建产物的输出目录,Builder 会根据产物的类型输出到对应的子目录下。
其中:
root
是构建产物的根目录,可以为相对路径或绝对路径。如果 root
的值为相对路径,则会基于当前项目的根目录拼接为绝对路径。
其他目录只能为相对路径,并且会相对于 root
进行输出。
以 JavaScript 文件为例,会输出到 distPath.root
+ distPath.js
目录,即为 dist/static/js
。
如果需要将 JavaScript 文件输出到 build/resource/js
目录,可以这样设置:
;
boolean
false
该配置项通常用于代码调试和问题排查,不建议在生产环境禁用代码压缩,否则会导致页面性能显著下降。
;
是否禁用 Source Map 生成。
Source Map 是保存源代码映射关系的信息文件,它记录了编译后的代码的每一个位置,以及所对应的编译前的位置。通过 Source Map,可以在调试编译后的代码时,直接查看对应的源代码。
默认情况下,Builder 的 Source Map 生成规则如下:
@@ -746,13 +752,13 @@如果需要开启开发环境的 Source Map,并在生产环境禁用,可以设置为:
如果需要单独控制 JS 文件或 CSS 文件的 Source Map,可以参考下方设置:
;
boolean
false
;
boolean
false
禁用 TypeScript 类型检查:
禁用开发环境构建时的类型检查:
禁用生产环境构建时的类型检查:
不建议在生产环境构建时禁用类型检查,这会导致线上代码的稳定性下降,请谨慎使用。
;
boolean
false
移除生产环境的构建产物名称中的 hash 值。
在生产环境构建后,会自动在文件名中间添加 hash 值,如果不需要添加,可以通过 output.disableFilenameHash
配置来禁用该行为。
默认情况下,构建后的产物名称为:
添加 output.disableFilenameHash
配置:
重新构建,产物的名称变为:
;
boolean
false
用于控制是否将打包工具的 runtime 代码内联到 HTML 中。
在生产环境下,Builder 默认会将 runtimeChunk 文件内联到 HTML 文件中,而不是写到产物目录中,这样做是为了减少文件请求的数量。
如果你不希望生成独立的 runtimeChunk 文件,而是想让 runtimeChunk 代码被打包到页面的 JS 文件里,可以这样设置:
;
boolean
false
是否生成 manifest 文件,该文件包含所有构建产物的信息。
-添加以下配置来开启:
开启后,当编译完成时,会自动生成 dist/asset-manifest.json
文件:
如果当前项目有多种类型构建产物,比如包含了 SSR 构建产物,那么会生成多份 manifest.json 文件。
asset-manifest.json
asset-manifest-node.json
web 产物:asset-manifest.json
node 产物:asset-manifest-node.json
;
boolean
false
开启该选项后,当编译过程中遇到无法识别的文件类型时,会直接将该文件直接输出到产物目录;否则会抛出一个异常。
-开启配置项:
在代码中引用一个未知类型的模块:
-编译后,foo.xxx
会被自动输出到 dist/static/media
目录下。
你可以通过 output.distPath.media
和 output.filename.media
配置项来控制 fallback 后的输出路径和文件名称。
开启该配置会导致 webpack 配置中的 rules 结构变化,增加一层额外的 oneOf
嵌套结构。大多数情况下,我们不推荐你使用此配置。
;
boolean
false
是否要使用 新版 decorator 提案 进行编译。
-默认情况下,Builder 在编译装饰器时采用 旧版 decorator 提案。
+是否要使用 新版 decorator 提案 进行编译。
+默认情况下,Builder 在编译装饰器时采用 旧版 decorator 提案。
将 output.enableLatestDecorators
设置为 true
时,Builder 会采用新版 decorator 提案 (2018-09 版本) 进行编译。
;
boolean
false
项目构建完成后,每个 CSS Module 文件都会生成一个 .d.ts
文件。例如:
;
false
用来控制生产环境中是否用 <script>
标签将产物中的 script 文件(.js 文件)inline 到 HTML 中。
注意,如果开启了这个选项,那么 script 文件将不会被写入产物目录中,而只会以 inline 脚本的形式存在于 HTML 文件中。
-当使用约定式路由时,如果开启了这个选项,需要将 output.splitRouteChunks 设置为 false。 +
当使用约定式路由时,如果开启了这个选项,需要将 output.splitRouteChunks 设置为 false。
默认情况下,我们有这样的产物文件:
开启 output.enableInlineScripts
选项后:
产物文件将变成:
同时,dist/static/js/main.js
文件将被 inline 到 index.html
中:
当你需要内联产物中的一部分 JS 文件时,你可以将 enableInlineScripts
设置为一个正则表达式,匹配需要内联的 JS 文件的 URL。
比如,将产物中的 main.js
内联到 HTML 中,你可以添加如下配置:
生产环境的文件名中默认包含了一个 hash 值,比如 static/js/main.18a568e5.js
。因此,在正则表达式中需要通过 \w+
来匹配 hash。
;
false
用来控制生产环境中是否用 <style>
标签将产物中的 style 文件(.css 文件)inline 到 HTML 中。
注意,如果开启了这个选项,那么 style 文件将不会被写入产物目录中,而只会以 inline 样式的形式存在于 HTML 文件中。
-当使用约定式路由时,如果开启了这个选项,需要将 output.splitRouteChunks 设置为 false。 +
当使用约定式路由时,如果开启了这个选项,需要将 output.splitRouteChunks 设置为 false。
默认情况下,我们有这样的产物文件:
开启 output.enableInlineStyles
选项后:
产物文件将变成:
同时,dist/static/css/style.css
文件将被 inline 到 index.html
中:
当你需要内联产物中的一部分 CSS 文件时,你可以将 enableInlineStyles
设置为一个正则表达式,匹配需要内联的 CSS 文件的 URL。
比如,将产物中的 main.css
内联到 HTML 中,你可以添加如下配置:
生产环境的文件名中默认包含了一个 hash 值,比如 static/css/main.18a568e5.css
。因此,在正则表达式中需要通过 \w+
来匹配 hash。
你也可以将 output.enableInlineStyles
设置为一个函数,函数接收以下参数:
name
:文件名,比如 static/css/main.18a568e5.css
。;
string | object | function | RegExp
undefined
在构建时,防止将代码中某些 import
的依赖包打包到 bundle 中,而是在运行时再去从外部获取这些依赖。
详情请见: webpack 外部扩展 (Externals)
-详情请见: webpack 外部扩展 (Externals)
+将 react-dom
依赖从构建产物中剔除。为了在运行时获取这个模块, react-dom
的值将全局检索 ReactDOM
变量。
当构建 Web Worker 产物时,externals 将不会生效。这是因为 Worker 环境不支持通过访问全局变量。
;
设置构建产物的名称。
在生产环境构建后,会自动在文件名中间添加 hash 值,如果不需要添加,可以通过 output.disableFilenameHash
配置来禁用该行为。
下面是各个文件类型的说明:
@@ -1130,7 +1140,7 @@image
:表示非 SVG 图片的名称。media
:表示视频等媒体资源的名称。修改 JavaScript 文件的名称为 [name]_script.js
:
通常来说,我们只会在生产环境下设置文件名的 hash 值(即 process.env.NODE_ENV === 'production'
时)。
如果你在开发环境下设置了文件名的 hash,那么可能会导致热更新不生效(尤其是 CSS 文件)。这是因为每次文件内容变化时,都会引起 hash 变化,导致 mini-css-extract-plugin 等工具无法读取到最新的文件内容。 +
如果你在开发环境下设置了文件名的 hash,那么可能会导致热更新不生效(尤其是 CSS 文件)。这是因为每次文件内容变化时,都会引起 hash 变化,导致 mini-css-extract-plugin 等工具无法读取到最新的文件内容。
当你在代码中通过 dynamic import 的方式引入模块时,该模块会被单独打包成一个文件,它默认的命名规则如下:
@@ -1151,14 +1161,14 @@dist/static/js/async/src_add_ts.js
。dist/static/js/async/798.27e3083e.js
,这是为了避免在生产环境中泄露源代码的路径,同时字符数也更少。如果你希望为异步模块指定一个固定的名称,可以通过打包工具提供的 magic comments 来实现,通过 webpackChunkName
指定模块名称:
如果你希望为异步模块指定一个固定的名称,可以通过打包工具提供的 magic comments 来实现,通过 webpackChunkName
指定模块名称:
通过以上写法指定模块名称后,生成的文件会是 dist/static/js/async/my-chunk-name.js
。
;
'linked' | 'inline' | 'none'
'linked'
inline
:保留所有 legal comments。
none
:移除所有 legal comments。移除所有 legal comments。
;
string[] | Record<BuilderTarget, string[]>
undefined
指定项目兼容的目标浏览器范围。该值会被 @babel/preset-env 和 autoprefixer 用来确定需要转换的 JavaScript 语法特性和需要添加的 CSS 浏览器前缀。
+指定项目兼容的目标浏览器范围。该值会被 @babel/preset-env 和 autoprefixer 用来确定需要转换的 JavaScript 语法特性和需要添加的 CSS 浏览器前缀。
overrideBrowserslist
配置的优先级高于项目中的 .browserslistrc
配置文件和 package.json 中的 browserslist
字段。
大多数场景下,推荐优先使用 .browserslistrc
文件,而不是使用 overrideBrowserslist
配置。因为 .browserslistrc
文件是官方定义的配置文件,通用性更强,可以被社区中的其他库识别。
如果项目中没有定义任何 browserslist
相关的配置,也没有定义 overrideBrowserslist
,那么 Builder 会设置默认值为:
下面是兼容移动端 H5 场景的示例:
可以查看 browserslist 文档 来了解如何自定义浏览器范围。
+}; +可以查看 browserslist 文档 来了解如何自定义浏览器范围。
当你同时构建多种类型的产物时,你可以为不同的产物类型设置不同的目标浏览器范围。此时,你需要把 overrideBrowserslist
设置为一个对象,对象的 key 为对应的产物类型。
比如为 web
和 node
设置不同的范围:
;
'entry' | 'usage' | 'ua' | 'off'
'entry'
@babel/preset-env
的 useBuiltIns: 'usage'
配置。
根据当前请求的 UA 信息,动态下发 Polyfill 代码。
-动态下发能力需要与上层框架结合使用,详情可参考 Modern.js - 运行时按需 Polyfill。
+动态下发能力需要与上层框架结合使用,详情可参考 Modern.js - 运行时按需 Polyfill。
不注入 Polyfill。使用此选项时,需要自行保证代码的兼容性。
;
'url' | 'component'
'url'
output.svgDefaultExport
配置为 url
时,SVG 文件的默认导出是文件的 URL。例如:
当 output.svgDefaultExport
配置为 component
时,SVG 文件的默认导出是文件的 React 组件。例如:
此时,你也可以通过指定 ?url
的 query 来导入 url,比如:
本章节描述了 Builder 中与性能有关的配置。
;
仅支持 webpack
如果不希望缓存,你也可以将 buildCache
置为 false
将其禁用掉:
cacheDigest
用来添加一些会对构建结果产生影响的环境变量。Builder 将根据 cacheDigest
内容和当前构建模式来设置缓存名称,来确保不同的 cacheDigest
可以命中不同的缓存。
;
Object | undefined
用于开启 webpack-bundle-analyzer 插件来分析产物体积。
+用于开启 webpack-bundle-analyzer 插件来分析产物体积。
默认情况下,Builder 不会开启 webpack-bundle-analyzer
。当开启该功能后,内部的默认配置如下:
你有两种方式开启 webpack-bundle-analyzer
来分析构建产物的体积:
BUNDLE_ANALYZE=true
,比如:performance.bundleAnalyze
来固定开启:在启用后,Builder 会生成一个分析构建产物体积的 HTML 文件,并在 Terminal 中打印以下日志:
-手动在浏览器中打开该文件,可以看到打包产物的瓦片图;区块的面积越大,说明该模块的体积越大。
在 webpack-bundle-analyzer
的面板中,你可以在左上角控制 Size 类型(默认为 Parsed
):
build
进程不能正常退出。BUNDLE_ANALYZE
环境变量来按需开启。dev
阶段不会进行代码压缩等优化,无法反映真实的产物体积,因此建议在 build
阶段分析产物体积。开启 Server 模式会导致 build
进程不能正常退出。
开启 bundleAnalyzer 会降低构建性能。因此,在日常开发过程中不应该开启此配置项,建议通过 BUNDLE_ANALYZE
环境变量来按需开启。
由于 dev
阶段不会进行代码压缩等优化,无法反映真实的产物体积,因此建议在 build
阶段分析产物体积。
;
Object
{ strategy: 'split-by-experience' }
Builder 支持设置以下几种拆包策略:
number
RegExp[] | Record<string, RegExp>
相比直接配置 webpack 的 splitChunks,这是一个更加简便的方式。
注意,通过 forceSplitting
配置拆分的 chunk 会通过 <script>
标签插入到 HTML 文件中,作为首屏请求的资源。因此,请根据实际场景来进行适当地拆分,避免首屏资源体积过大。
当 performance.chunkSplit.strategy
为 split-by-experience
、split-by-module
、split-by-size
或 single-vendor
时,可以通过 performance.chunkSplit.override
配置项来自定义 webpack 拆包配置,此配置会和 webpack 的 splitChunks 配置进行合并(cacheGroups 配置也会合并)。比如:
当 Builder 构建 "node" 类型的产物时,由于 Node Bundles 不需要通过拆包来优化加载性能,因此 chunkSplit 规则不会生效。
;
类型: undefined | string[]
undefined
为哪些资源配置 dns-prefetch 属性。
+为哪些资源配置 dns-prefetch 属性。
配置该属性可以在请求资源之前解析域名,降低请求延迟,提升加载性能。
-更多信息可参考:Using dns-prefetch
-更多信息可参考:Using dns-prefetch
+;
undefined | Array<string | PreconnectOption>
undefined
为哪些资源配置 preconnect 属性。
+为哪些资源配置 preconnect 属性。
配置该属性会预先建立与服务器的连接,如果站点是 HTTPS 的,则此过程包括 DNS 解析,建立 TCP 连接以及执行 TLS 握手。将 Preconnect 和 DnsPrefetch 结合使用可进一步减少跨域请求的延迟。
-;
undefined | true | PrefetchOption
undefined
为哪些资源配置 prefetch 属性。
+为哪些资源配置 prefetch 属性。
该属性用于配置在将来某些导航下可能需要的资源,此时,浏览器通常在空闲状态时获取此资源。
当设置 performance.prefetch
为 true
,将根据如下配置对资源进行预获取:
当 performance.prefetch
的值为 object 类型时,Builder 会根据当前配置对指定资源开启 prefetch 能力。
all-chunks
: 预获取所有资源(当前页面),包含所有异步和非异步资源。all-assets
: 预获取所有资源,MPA 场景下会包含其他页面的资源。当你希望对当前页面中所有 png 格式的图片资源进行预获取时,可以配置如下:
;
undefined | true | PreloadOption
undefined
为哪些资源配置 preload 属性。
+为哪些资源配置 preload 属性。
该属性通常用于配置当前导航下可能需要的资源,此时,浏览器通常以中等优先级(不是布局阻塞)获取此资源。
-当设置 performance.preload
为 true
,将根据如下配置对资源进行预加载:
当 performance.preload
的值为 object 类型时,Builder 会根据当前配置对指定资源开启 preload 能力。
type
字段控制了哪些资源会被预加载,同时支持通过 include
和 exclude
对指定资源进行二次过滤。
all-chunks
: 预加载所有资源(当前页面),包含所有异步和非异步资源。
all-assets
: 预加载所有资源,MPA 场景下会包含其他页面的资源。当你希望对当前页面中所有 png 格式的图片资源进行预加载时,可以配置如下:
;
boolean
true
禁用相关日志:
;
boolean
false
是否捕获每个模块的耗时信息,对应 webpack / Rspack 的 profile 配置。
-是否捕获每个模块的耗时信息,对应 webpack / Rspack 的 profile 配置。
+开启后,Webpack / Rspack 生成一些有关模块的统计数据的 JSON 文件会将模块构建的耗时信息也包含进去。
;
boolean | ConsoleType[]
false
你也可以指定仅移除特定类型的 console.xx
,比如移除 console.log
和 console.warn
:
目前支持配置以下类型的 console:
-;
boolean
false
是否移除 moment.js 的语言包文件。
+是否移除 moment.js 的语言包文件。
moment.js
默认包含了大量的语言包文件,会导致打包后的包体积增大。
当项目中使用了 moment.js
时,推荐开启此选项,自动排除所有的语言包文件:
开启后,可以通过以下方式来加载语言包文件:
;
boolean
true
仅支持 webpack
是否模块化 lodash 的导入,删除未使用的 lodash 模块,从而减少 lodash 代码体积。
-这项优化基于 babel-plugin-lodash 和 swc-plugin-lodash 实现。
-是否模块化 lodash 的导入,删除未使用的 lodash 模块,从而减少 lodash 代码体积。
+这项优化基于 babel-plugin-lodash 和 swc-plugin-lodash 实现。
+该选项默认开启,Builder 会自动将 lodash
的代码引用指向子路径。
比如:
转换后的代码为:
在个别情况下,lodash
的 import 转换可能会生成不符合预期的代码,此时你可以手动关闭这项优化:
本章节描述了 Builder 中与安全有关的配置。
;
undefined
仅支持 webpack
为 HTML 所引入的子资源添加完整性属性 —— integrity
,使浏览器能够验证引入资源的完整性,以此防止下载的资源被篡改。
启动该选项后会将 webpack 的 output.crossOriginLoading 配置项设置为 anonymous
。
启动该选项后会将 webpack 的 output.crossOriginLoading 配置项设置为 anonymous
。
子资源完整性 Subresource Integrity(SRI)是专门用来校验资源的一种方案,它读取资源标签中的 integrity 属性,将其中的信息摘要值,和资源实际的信息摘要值进行对比,如果发现无法匹配,那么浏览器就会拒绝执行资源。
对于 script 标签来说,结果为拒绝执行其中的代码;对于 CSS link 来说,结果为不加载其中的样式。
-关于 SRI 的更多内容,可以查看 Subresource Integrity - MDN。
+关于 SRI 的更多内容,可以查看 Subresource Integrity - MDN。
默认情况下,不会开启 SRI
,当开启之后它的默认配置如下:
你可以按照你自己的需求自定义配置项:
;
false
当你开启 checkSyntax
后,Builder 会在生产环境构建时进行检测,当在构建产物中检测到不兼容的高级语法后,会将错误日志打印在终端,并退出当前构建流程。
错误日志的格式如下所示,包含代码来源文件、产物位置、错误原因、源代码等信息:
@@ -88,7 +88,7 @@目前语法检测是基于 AST parser 来实现的,每次检测时,只能找出文件中的第一个不兼容语法。如果一个文件中存在多个不兼容语法,你需要修复已发现的语法,并重新执行检测。output.disableMinimize 设置为 true 后再重新构建。
如果日志中没有显示对应的源码位置,可以尝试将
string[]
当前项目的 browserslist 配置
targets
表示项目的目标浏览器范围,它的值为标准的 browserslist 数组,如果你不了解 browserslist 的用法,请参考 「设置浏览器范围」。
targets
表示项目的目标浏览器范围,它的值为标准的 browserslist 数组,如果你不了解 browserslist 的用法,请参考 「设置浏览器范围」。
Builder 会读取 targets
的值,并自动推导出构建产物中可以使用的最低 ECMAScript 语法版本,比如 ES5
或 ES6
。
Builder 会推导出 chrome >= 53
可以使用的 ECMAScript 语法版本为 ES6
,当构建产物中包含 es2016
或更高的语法时,就会触发语法错误提示。
请留意,Builder 不支持基于 targets
来自动分析 ES6 以上的语法版本,如果你的构建产物兼容的语法版本超过 ES6,请通过 checkSyntax.ecmaVersion
进行设置。
此时,构建产物中可以包含 ES2020
支持的所有语法,比如 optional chaining。
本章节描述了 Builder 中与源代码解析、编译方式相关的配置。
;
Record<string, string | string[]> | Function
undefined
设置文件引用的别名,对应 webpack 和 Rspack 的 resolve.alias 配置。
-对于 TypeScript 项目,你只需要在 tsconfig.json
中配置 compilerOptions.paths 即可,Builder 会自动识别它,不需要额外配置 source.alias
字段,详见 「路径别名」。
+
设置文件引用的别名,对应 webpack 和 Rspack 的 resolve.alias 配置。
+对于 TypeScript 项目,你只需要在 tsconfig.json
中配置 compilerOptions.paths 即可,Builder 会自动识别它,不需要额外配置 source.alias
字段,详见 「路径别名」。
alias
的值可以定义为 Object 类型,其中的相对路径会自动被 Builder 转换为绝对路径。
以上配置完成后,如果你在代码中引用 @common/Foo.tsx
, 则会映射到 <project>/src/common/Foo.tsx
路径上。
alias
的值定义为函数时,可以接受预设的 alias 对象,并对其进行修改。
也可以在函数中返回一个新对象作为最终结果,新对象会覆盖预设的 alias 对象。
默认情况,source.alias
会自动匹配子路径,比如以下配置:
它的匹配结果如下:
你可以添加 $
符号来开启精确匹配,开启后将不会自动匹配子路径。
它的匹配结果如下:
你可以使用 alias
将某个 npm 包指向统一的目录。
比如项目中安装了多份 react
,你可以将 react
统一指向根目录的 node_modules
中安装的版本,避免出现打包多份 React 代码的问题。
当你在使用 alias 处理 npm 包时,请留意项目中是否使用了这个包不同的 major 版本。
比如你的项目中某个模块或 npm 依赖使用了 React 18 的 API,如果你将 React alias 到 17 版本,就会导致该模块无法引用到 React 18 的 API,导致代码异常。
;
'prefer-tsconfig' | 'prefer-alias'
'prefer-tsconfig'
source.alias
:由于 tsconfig paths 的优先级更高,所以:
@common
会使用 tsconfig paths 定义的值,指向 ./src/common-1
比如同时配置以下内容:
source.alias
:由于 tsconfig paths 只用于提供类型,所以最终只有 @common
别名生效,并指向 ./src/common-2
目录。
大部分情况下你不需要使用 prefer-alias
,但当你需要动态生成一些别名配置时,可以考虑使用它。比如,基于环境变量来生成 alias
选项:
;
source.include
用于指定额外需要编译的 JavaScript 文件。
为了避免二次编译,默认情况下,Rsbuild 只会编译当前目录下的 JavaScript 文件,以及所有目录下的 TypeScript 和 JSX 文件,不会编译 node_modules 下的 JavaScript 文件。
-通过 source.include
配置项,可以指定需要 Rsbuild 额外进行编译的目录或模块。source.include
的用法与 Rspack 中的 Rule.include 一致,支持传入字符串、正则表达式来匹配模块的路径。
通过 source.include
配置项,可以指定需要 Rsbuild 额外进行编译的目录或模块。source.include
的用法与 Rspack 中的 Rule.include 一致,支持传入字符串、正则表达式来匹配模块的路径。
比如:
比较典型的使用场景是编译 node_modules 下的 npm 包,因为某些第三方依赖存在 ES6+ 的语法,这可能导致在低版本浏览器上无法运行,你可以通过该选项指定需要编译的依赖,从而解决此类问题。
以 query-string
为例,你可以做如下的配置:
上述两种方法分别通过 "路径前缀" 和 "正则表达式" 来匹配文件的绝对路径,值得留意的是,项目中所有被引用的模块都会经过匹配,因此你不能使用过于松散的值进行匹配,避免造成编译性能问题或编译异常。
当你通过 source.include
编译一个 npm 包时,Builder 默认只会编译匹配到的模块,不会编译对应模块的子依赖。
在 Monorepo 中进行开发时,如果需要引用 Monorepo 中其他库的源代码,也可以直接在 source.include
进行配置:
Babel 默认无法编译 CommonJS 模块,如果你编译了一个 CommonJS 模块,可能会出现 exports is not defined
的运行时报错信息。
当你需要使用 source.include
来编译 CommonJS 模块时,可以将 Babel 的 sourceType
配置设置为 unambiguous
:
将 sourceType
设置为 unambiguous
可能会产生一些其他影响,请参考 Babel 官方文档。
将 sourceType
设置为 unambiguous
可能会产生一些其他影响,请参考 Babel 官方文档。
如果你匹配的模块是通过 symlink 链接到当前项目中的,那么需要匹配这个模块的真实路径,而不是 symlink 后的路径。
比如,你将 Monorepo 中的 packages/foo
路径 symlink 到当前项目的 node_modules/foo
路径下,则需要去匹配 packages/foo
路径,而不是 node_modules/foo
路径。
该行为可以通过 webpack 的 resolve.symlinks 配置项来进行控制。
+该行为可以通过 webpack 的 resolve.symlinks 配置项来进行控制。
注意,source.include
不应该被用于编译整个 node_modules
目录,比如下面的写法是错误的:
如果你对整个 node_modules
进行编译,不仅会使编译时间大幅度增加,并且可能会产生不可预期的错误。因为 node_modules
中的大部分 npm 包发布的已经是编译后的产物,通常没必要经过二次编译。此外,core-js
等 npm 包被编译后可能会出现异常。
;
Array<string | RegExp>
[]
指定不需要编译的 JavaScript/TypeScript 文件。用法与 webpack 中的 Rule.exclude 一致,支持传入字符串或正则表达式来匹配模块的路径。
+指定不需要编译的 JavaScript/TypeScript 文件。用法与 webpack 中的 Rule.exclude 一致,支持传入字符串或正则表达式来匹配模块的路径。
比如:
;
Record<string, unknown>
{}
.
连接作为需要替换的变量名。更多细节参考 webpack - DefinePlugin。
-在使用 Rspack 作为打包工具时,支持的类型可参考 Rspack.builtins.define +
更多细节参考 webpack - DefinePlugin。
+在使用 Rspack 作为打包工具时,支持的类型可参考 Rspack.builtins.define
表达式会被替换为对应的代码段:
;
Record<string, JSONValue> | Function
用于在构建时将类似 process.env.FOO
的全局变量表达式替换为指定的值,比如:
在下方示例中,会在代码中注入 ENABLE_VCONSOLE
和 APP_CONTEXT
两个环境变量:
你可以在代码中直接使用它们:
你可以将 source.globalVars
设置为一个函数,从而动态设置一些环境变量的值。
比如,根据当前的构建产物类型进行动态设置:
source.globalVars
是 source.define
的一个语法糖,它们之间唯一的区别是,source.globalVars
会自动将传入的值进行 JSON 序列化处理,这使得设置全局变量的值更加方便。注意 globalVars
的每个值都需要是可以被 JSON 序列化的值。
source.globalVars
是通过字符串替换的形式来注入环境变量的,因此它无法对「解构赋值」等动态写法生效。
在使用解构赋值时,Builder 将无法判断变量 NODE_ENV
是否与要替换的表达式 process.env.NODE_ENV
存在关联,因此以下使用方式是无效的:
;
Array<string | Regexp> | Function
undefined
仅支持 webpack
限制源代码的引用路径。配置该选项后,所有源文件只能从约定的目录下引用代码,从其他目录引用代码会产生对应的报错提示。
-首先我们配置 moduleScopes
仅包含 src
目录:
然后在 src/App.tsx
中导入 src
目录外部的 utils/a
模块:
在编译时,会提示引用路径错误:
通过该选项配置 utils
目录,再进行编译,则不会出现错误提示。
当 moduleScopes
的值为 Array
类型时,可以直接设置若干个代码路径,比如添加以下配置:
moduleScopes
也支持通过函数的形式来进行修改,避免覆盖默认值:
用于按需引入组件库的代码和样式,能力等价于 babel-plugin-import。
-它与 babel-plugin-import 的区别在于,source.transformImport
不与 Babel 耦合。Builder 会自动识别当前使用的编译工具是 Babel、SWC 还是 Rspack,并添加相应的按需引入配置。
;
+用于按需引入组件库的代码和样式,能力等价于 babel-plugin-import。
+它与 babel-plugin-import 的区别在于,source.transformImport
不与 Babel 耦合。Builder 会自动识别当前使用的编译工具是 Babel、SWC 还是 Rspack,并添加相应的按需引入配置。
当项目中安装了 Ant Design 组件库 <= 4.x 版本时,Builder 会自动添加以下默认配置:
+当项目中安装了 Ant Design 组件库 <= 4.x 版本时,Builder 会自动添加以下默认配置:
当项目中安装了 Arco Design 组件库 时,Builder 会自动添加以下默认配置:
+}; +当项目中安装了 Arco Design 组件库 时,Builder 会自动添加以下默认配置:
当你添加了 antd
或 @arco-design/web-react
相关的配置时,优先级会高于上述默认配置。
当使用上述 antd 默认配置:
源代码如下:
-会被转换成:
你可以手动设置 transformImport: false
来关掉 transformImport 的默认行为。
比如,当你使用了 externals
来避免打包 antd 时,由于 transformImport
默认会转换 antd 的引用路径,导致匹配的路径发生了变化,因此 externals 无法正确生效,此时你可以设置关闭 transformImport
来避免该问题。
用于拼接转换后的路径,拼接规则为 ${libraryName}/${libraryDirectory}/${member}
,其中 member 为引入成员。
示例:
-转换结果:
-boolean
true
,则会引入路径 ${libraryName}/${libraryDirectory}/${member}/style
。
若为 false
或 undefined
则不会引入样式。
当配置为 true
时:
转换结果:
string
该配置用于拼接引入样式时的引入路径,若该配置被指定,则 style
配置项会被忽略。拼接引入路径为 ${libraryName}/${styleLibraryDirectory}/${member}
。
当配置为 styles
时:
转换结果:
boolean
是否需要将 camelCase 的引入转换成 kebab-case。
示例:
-转换结果:
boolean
是否将导入语句转换成默认导入。
示例:
-转换结果:
((member: string) => string | undefined) | string
自定义转换后的导入路径,输入是引入的成员,例如配置成 (member) => `my-lib/${member}`
,会将 import { foo } from 'bar'
转换成 import foo from 'my-lib/foo'
。
在使用 Rspack 构建时,不能使用函数配置,但可以使用 handlebars 模版字符串,对于上面的函数配置,在使用模版字符串时可以用以下模版代替 my-lib/{{ member }}
,也可以使用一些内置帮助方法,例如 my-lib/{{ kebabCase member }}
来转换成 kebab-case 格式,除了 kebabCase 以外还有 camelCase,snakeCase,upperCase,lowerCase 可以使用。
在使用 Rspack 构建时,不能使用函数配置,但可以使用 handlebars 模版字符串,对于上面的函数配置,在使用模版字符串时可以用以下模版代替 my-lib/{{ member }}
,也可以使用一些内置帮助方法,例如 my-lib/{{ kebabCase member }}
来转换成 kebab-case 格式,除了 kebabCase 以外还有 camelCase,snakeCase,upperCase,lowerCase 可以使用。
((member: string) => string | undefined) | string
自定义转换后的样式导入路径,输入是引入的成员,例如配置成 (member) => `my-lib/${member}`
,会将 import { foo } from 'bar'
转换成 import foo from 'my-lib/foo'
。
在使用 Rspack 构建时,不能使用函数配置,但可以使用 handlebars 模版字符串,对于上面的函数配置,在使用模版字符串时可以用以下模版代替 my-lib/{{ member }}
,也可以使用一些内置帮助方法,例如 my-lib/{{ kebabCase member }}
来转换成 kebab-case 格式,除了 kebabCase 以外还有 camelCase,snakeCase,upperCase,lowerCase 可以使用。
在使用 Rspack 构建时,不能使用函数配置,但可以使用 handlebars 模版字符串,对于上面的函数配置,在使用模版字符串时可以用以下模版代替 my-lib/{{ member }}
,也可以使用一些内置帮助方法,例如 my-lib/{{ kebabCase member }}
来转换成 kebab-case 格式,除了 kebabCase 以外还有 camelCase,snakeCase,upperCase,lowerCase 可以使用。
;
string | string[]
undefined
在每个页面的入口文件前添加一段代码,这段代码会早于页面的代码执行,因此可以用于执行一些全局的代码逻辑,比如注入 polyfill、设置全局样式等。
首先创建一个 src/polyfill.ts
文件:
然后将 src/polyfill.ts
配置到 source.preEntry
上:
重新运行编译并访问任意页面,可以看到 src/polyfill.ts
中的代码已经执行,并在 console 中输出了对应的内容。
你也可以通过 source.preEntry
来配置全局样式,这段 CSS 代码会早于页面代码加载,比如引入一个 normalize.css
文件:
你可以将 preEntry
设置为数组来添加多个脚本,它们会按数组顺序执行:
;
string | Record<BuilderTarget, string>
undefined
用于为 resolve.extensions 添加统一的前缀。
+用于为 resolve.extensions 添加统一的前缀。
如果多个文件拥有相同的名称,但具有不同的文件后缀,Builder 会根据 extensions 数组的顺序进行识别,解析数组中第一个被识别的文件,并跳过其余文件。
-下面是配置 .web
前缀的例子。
配置完成后,extensions 数组会发生以下变化:
在代码中 import './foo'
时,会优先识别 foo.web.js
文件,再识别 foo.js
文件。
当你同时构建多种类型的产物时,你可以为不同的产物类型设置不同的 extension 前缀。此时,你需要把 resolveExtensionPrefix
设置为一个对象,对象的 key 为对应的产物类型。
在代码中 import './foo'
时,对于 node 产物,会优先识别 foo.node.js
文件,而对于 web 产物,则会优先识别 foo.web.js
文件。
;
undefined
该配置项将决定你使用 package.json
哪个字段导入 npm
模块。对应 webpack 的 resolve.mainFields 配置。
该配置项将决定你使用 package.json
哪个字段导入 npm
模块。对应 webpack 的 resolve.mainFields 配置。
当你同时构建多种类型的产物时,你可以为不同的产物类型设置不同的 mainFields。此时,你需要把 resolveMainFields
设置为一个对象,对象的 key 为对应的产物类型。
比如为 web
和 node
设置不同的 mainFields:
本章节描述了 Builder 中与底层工具有关的配置。
;
Object | Function
通过 tools.autoprefixer
可以修改 autoprefixer 的配置。
通过 tools.autoprefixer
可以修改 autoprefixer 的配置。
当 tools.autoprefixer
的值为 Object
类型时,会与默认配置通过 Object.assign 合并。比如:
当 tools.autoprefixer
为 Function 类型时,默认配置作为第一个参数传入,可以直接修改配置对象,也可以返回一个值作为最终结果。比如:
;
Object | Function
undefined
通过 tools.babel
可以修改 babel-loader 的配置项。
通过 tools.babel
可以修改 babel-loader 的配置项。
请留意 tools.babel
在以下使用场景中的局限性:
tools.babel
配置项将会明显拖慢 Rspack 构建速度。因为 Rspack 默认使用的是 SWC 编译,配置 Babel 会导致代码需要被编译两次,产生了额外的编译开销。tools.babel
选项将不会生效。当 tools.babel
为 Function 类型时,默认 Babel 配置会作为第一个参数传入,你可以直接修改配置对象,也可以返回一个对象作为最终的 babel-loader
配置。
tools.babel
函数的第二个参数提供了一些方便的工具函数,请继续阅读下方文档。
以上示例仅作为参考,通常来说,你不需要手动配置 babel-plugin-import
,因为 Builder 已经提供了更通用的 source.transformImport
配置。
当 tools.babel
的值为 Object
类型时,会与默认配置通过 Object.assign
浅合并。
Object.assign
是浅拷贝,会完全覆盖内置的 presets
或 plugins
数组,导致内置的 presets 或 plugins 失效,请在明确影响面的情况下再使用这种方式。
tools.babel
为 Function 类型时,第二个参数可用的工具函数如下:
(presets: BabelPlugin[]) => void
(plugins: string | string[]) => void
(presets: string | string[]) => void
(options: PresetEnvOptions) => void
修改 @babel/preset-env 的配置项,传入的配置会与默认配置进行浅层合并,比如:
+修改 @babel/preset-env 的配置项,传入的配置会与默认配置进行浅层合并,比如:
(options: PresetReactOptions) => void
修改 @babel/preset-react 的配置项,传入的配置会与默认配置进行浅层合并,比如:
+修改 @babel/preset-react 的配置项,传入的配置会与默认配置进行浅层合并,比如:
已废弃,请使用 source.include 代替,两者功能完全一致。
+已废弃,请使用 source.include 代替,两者功能完全一致。
已废弃,请使用 source.exclude 代替,两者功能完全一致。
+已废弃,请使用 source.exclude 代替,两者功能完全一致。
当你通过 tools.babel
修改 babel-loader
配置后,可以在 Builder 调试模式 下查看最终生成的配置。
当你通过 tools.babel
修改 babel-loader
配置后,可以在 Builder 调试模式 下查看最终生成的配置。
首先通过 DEBUG=builder
参数开启调试模式:
然后打开生成的 (webpack|rspack).config.web.js
,搜索 babel-loader
关键词,即可看到完整的 babel-loader
配置内容。
;
Function | undefined
undefined
Bundler chain 是 webpack chain 的子集,其中包含一部分 webpack chain API,你可以用它来同时修改 webpack 和 Rspack 的配置。
-通过 bundler chain 修改的配置,在 webpack 和 Rspack 构建时均可生效。需要注意的是,bundler chain 只支持修改 webpack 和 Rspack 间无差异部分的配置。如,修改 devtool 配置项(webpack 和 Rspack 的 devtool 属性值类型相同),或添加一个Rspack 兼容的 webpack 插件。
+通过 bundler chain 修改的配置,在 webpack 和 Rspack 构建时均可生效。需要注意的是,bundler chain 只支持修改 webpack 和 Rspack 间无差异部分的配置。如,修改 devtool 配置项(webpack 和 Rspack 的 devtool 属性值类型相同),或添加一个Rspack 兼容的 webpack 插件。
-
tools.bundlerChain
的执行时机早于 tools.webpackChain / tools.webpack / tools.rspack,因此会被其他几个配置中的修改所覆盖。
'development' | 'production' | 'test'
通过 env 参数可以判断当前环境为 development、production 还是 test。比如:
-boolean
通过 isProd 参数可以判断当前环境是否为 production。比如:
-'web' | 'node' | 'modern-web' | 'web-worker'
通过 target 参数可以判断当前构建的目标运行时环境。比如:
-boolean
判断当前构建的目标运行时环境是否为 node
,等价于 target === 'node'
。
boolean
判断当前构建的目标运行时环境是否为 web-worker
,等价于 target === 'web-worker'
。
typeof import('html-webpack-plugin') | import('@rspack/plugin-html')
通过这个参数你可以拿到 webpack 或 Rspack 中的 HtmlPlugin 实例。
-Builder 中预先定义了一些常用的 Chain ID,你可以通过这些 ID 来定位到内置的 Rule 或 Plugin。
-请留意,下列的一部分 Rule 或 Plugin 并不是默认存在的,当你开启特定配置项、或是注册某些插件后,它们才会被包含在 Rspack 或 webpack 配置中。
-比如,RULE.STYLUS
仅在注册了 Stylus 插件后才会存在。
-
ID | -描述 | -
---|---|
RULE.MJS |
-处理 mjs 的规则 |
-
RULE.CSS |
-处理 css 的规则 |
-
RULE.LESS |
-处理 less 的规则 |
-
RULE.SASS |
-处理 sass 的规则 |
-
RULE.STYLUS |
-处理 stylus 的规则 |
-
RULE.TOML |
-处理 toml 的规则 |
-
RULE.YAML |
-处理 yaml 的规则 |
-
RULE.WASM |
-处理 wasm 的规则 |
-
RULE.NODE |
-处理 node 的规则 |
-
通过 ONE_OF.XXX
可以匹配到规则数组中的某一类规则。
ID | -描述 | -
---|---|
ONE_OF.SVG |
-处理 SVG 的规则,在 data URI 和单独文件之间自动选择 | -
ONE_OF.SVG_URL |
-处理 SVG 的规则,输出为单独文件 | -
ONE_OF.SVG_INLINE |
-处理 SVG 的规则,作为 data URI 内联到 bundle 中 | -
ONE_OF.SVG_ASSETS |
-处理 SVG 的规则,在 data URI 和单独文件之间自动选择 | -
通过 USE.XXX
可以匹配到对应的 loader。
ID | -描述 | -
---|---|
USE.LESS |
-对应 less-loader |
-
USE.SASS |
-对应 sass-loader |
-
USE.STYLUS |
-对应 stylus-loader |
-
USE.VUE |
-对应 vue-loader |
-
USE.TOML |
-对应 toml-loader |
-
USE.YAML |
-对应 yaml-loader |
-
USE.NODE |
-对应 node-loader |
-
USE.SVGR |
-对应 @svgr/webpack |
-
USE.POSTCSS |
-对应 postcss-loader |
-
USE.RESOLVE_URL_LOADER_FOR_SASS |
-对应 resolve-url-loader |
-
通过 PLUGIN.XXX
可以匹配到对应的 plugin。
ID | -描述 | -
---|---|
PLUGIN.HTML |
-对应 HtmlPlugin ,使用时需要拼接 entry 名称:${PLUGIN.HTML}-${entryName} |
-
PLUGIN.APP_ICON |
-对应 AppIconPlugin |
-
PLUGIN.INLINE_HTML |
-对应 InlineChunkHtmlPlugin |
-
PLUGIN.BUNDLE_ANALYZER |
-对应 WebpackBundleAnalyzer |
-
PLUGIN.ASSETS_RETRY |
-对应 Builder 中的 webpack 静态资源重试插件 WebpackAssetsRetryPlugin |
-
PLUGIN.VUE_LOADER_PLUGIN |
-对应 VueLoaderPlugin |
-
PLUGIN.AUTO_SET_ROOT_SIZE |
-对应 Builder 中的自动设置根字体大小插件 AutoSetRootSizePlugin |
-
通过 MINIMIZER.XXX
可以匹配到对应的压缩工具。
ID | -描述 | -
---|---|
MINIMIZER.JS |
-对应 TerserWebpackPlugin 或 SwcJsMinimizerRspackPlugin |
-
MINIMIZER.CSS |
-对应 CssMinimizerWebpackPlugin |
-
使用示例可参考:WebpackChain 使用示例。
+更多信息可参考 Rsbuild#tools.bundlerChain
;
Object | Function
仅支持 webpack
通过 tools.cssExtract
可以更改 mini-css-extract-plugin 的配置。
通过 tools.cssExtract
可以更改 mini-css-extract-plugin 的配置。
当此值为 Object 类型时,与默认配置通过 Object.assign 合并。比如:
当此值为 Function 类型时,默认配置作为第一个参数传入,你可以直接修改配置对象,也可以返回一个对象作为最终配置。比如:
更多配置细节可参考 mini-css-extract-plugin。
+}; +更多配置细节可参考 mini-css-extract-plugin。
;
Object | Function
undefined
通过 tools.cssLoader
可以修改 css-loader 的配置项。默认配置如下:
通过 tools.cssLoader
可以修改 css-loader 的配置项。默认配置如下:
在使用 Rspack 作为打包工具时,仅支持在 disableCssExtract 时使用该配置。
-修改 CSS Modules 相关配置,推荐使用 output.cssModules 配置项。 +}
在使用 Rspack 作为打包工具时,仅支持在 disableCssExtract 时使用该配置。
+修改 CSS Modules 相关配置,推荐使用 output.cssModules 配置项。
当此值为 Object 类型时,会与默认配置进行深层合并 (deep merge)。比如:
当此值为 Function 类型时,默认配置作为第一个参数传入,你可以直接修改配置对象,也可以返回一个对象作为最终配置。比如:
;
Object
{}
通过 tools.devServer
可以修改开发环境服务器的配置。
Modern.js 中并没有直接使用 webpack-dev-server 或 @rspack/dev-server, 而是基于 webpack-dev-middleware 实现 DevServer。 +
Modern.js 中并没有直接使用 webpack-dev-server 或 @rspack/dev-server, 而是基于 webpack-dev-middleware 实现 DevServer。
webpack-dev-server
使用 Express 作为服务端框架。Modern.js 中没有使用任何框架,上述中间件中 req
和 res
都是 Node 原生对象,因此 webpack-dev-server
的 Express 中间件不一定能直接在 Modern.js 中使用。
如果要迁移 webpack-dev-server
中使用的 Express 中间件,可以使用以下方式,将 Express app 作为中间件传入:
Array
对应 HMR 客户端的配置,通常用于设置 HMR 对应的 WebSocket URL。
devMiddleware 配置项。当前配置是 webpack-dev-middleware 配置项的子集.
+} +devMiddleware 配置项。当前配置是 webpack-dev-middleware 配置项的子集.
Record<string, string>
boolean | ConnectHistoryApiFallbackOptions
更多选项和详细信息可参考 connect-history-api-fallback 文档。
+}; +更多选项和详细信息可参考 connect-history-api-fallback 文档。
boolean
true
是否开启 Hot Module Replacement 热更新能力。
+是否开启 Hot Module Replacement 热更新能力。
boolean | { key: string; cert: string }
boolean
undefined
一些特殊场景需求可能需要使用服务器 API:
Record<string, string> | Record<string, ProxyDetail>
此时,/api/users 请求将会代理到 http://localhost:3000/api/users。
+}; +此时,/api/users 请求将会代理到 http://localhost:3000/api/users。
如果你不想传递 /api,可以通过 pathRewrite
重写请求路径:
DevServer Proxy 基于 http-proxy-middleware 实现。你可以使用 http-proxy-middleware 的所有配置项,具体可以查看文档。
+}; +DevServer Proxy 基于 http-proxy-middleware 实现。你可以使用 http-proxy-middleware 的所有配置项,具体可以查看文档。
DevServer Proxy 完整类型定义为:
除了 http-proxy-middleware 的选项外,还支持 bypass 和 context 两个配置项:
boolean
mock/
、server/
、api/
等目录的文件变化。
;
false | Object | Function
通过 tools.htmlPlugin
可以修改 html-webpack-plugin 或 @rspack/plugin-html 的配置项。
通过 tools.htmlPlugin
可以修改 html-webpack-plugin 或 @rspack/plugin-html 的配置项。
当 tools.htmlPlugin
的值为 Object
类型时,会与默认配置通过 Object.assign
合并。
当 tools.htmlPlugin
为 Function 类型时:
将 tools.htmlPlugin
配置为 false
,可以禁用默认的 html-webpack-plugin
插件。
默认情况下,Builder 会在生产环境构建时压缩 HTML 内的 JavaScript / CSS 代码,从而提升页面性能。此能力通常在使用自定义模版或插入自定义脚本时会有帮助。然而,当开启 output.enableInlineScripts
或 output.enableInlineStyles
时,会出现对 inline JavaScript / CSS 代码重复压缩的情况,对构建性能会有一定影响。你可以通过修改 tools.htmlPlugin.minify
配置项来修改默认的压缩行为。
;
Object | Function
你可以通过 tools.less
修改 less-loader 的配置。
你可以通过 tools.less
修改 less-loader 的配置。
当 tools.less
的值为 Object
类型时,会与默认配置通过 Object.assign 进行浅层合并,值得注意的是,lessOptions
会通过 deepMerge 进行深层合并。
当 tools.less
为 Function 类型时,默认配置作为第一个参数传入,可以直接修改配置对象,也可以返回一个值作为最终结果,第二个参数提供了一些可以直接调用的工具函数:
在某些场景下,如果你需要使用特定的 Less 版本,而不是使用 Builder 内置的 Less v4,可以在项目中安装需要使用的 Less 版本,并通过 less-loader
的 implementation
选项设置。
(excludes: RegExp | RegExp[]) => void
;
Object | Function | undefined
在生产环境构建时,Builder 会通过 css-minimizer-webpack-plugin 对 CSS 代码进行压缩优化。可以通过 tools.minifyCss
修改 css-minimizer-webpack-plugin 的配置。
在生产环境构建时,Builder 会通过 css-minimizer-webpack-plugin 对 CSS 代码进行压缩优化。可以通过 tools.minifyCss
修改 css-minimizer-webpack-plugin 的配置。
当 tools.minifyCss
的值为 Object
类型时,会与默认配置通过 Object.assign
合并。
例如下面修改 cssnano 的 preset
配置:
例如下面修改 cssnano 的 preset
配置:
当 tools.minifyCss
配置为 Function
类型时,默认配置作为第一个参数传入,可以直接修改配置对象,也可以返回一个值作为最终结果。
;
Object | Function
Builder 默认集成 PostCSS,你可以通过 tools.postcss
对 postcss-loader 进行配置。
Builder 默认集成 PostCSS,你可以通过 tools.postcss
对 postcss-loader 进行配置。
值为 Function 类型时,内部默认配置作为第一参数传入,可以直接修改配置对象不做返回,也可以返回一个对象作为最终结果;第二个参数为修改 postcss-loader 配置的工具函数集合。
例如,需要在原有插件的基础上新增一个 PostCSS 插件,在 postcssOptions.plugins 数组中 push 一个新的插件即可:
需要给 PostCSS 插件传递参数时,可以通过函数参数的形式进行传入:
tools.postcss
可以返回一个配置对象,并完全替换默认配置:
当此值为 Object 类型时,与默认配置通过 Object.assign
合并。注意 Object.assign
是浅拷贝,会完全覆盖内置的 plugins
数组,请谨慎使用。
(plugins: PostCSSPlugin | PostCSSPlugin[]) => void
Builder 中使用的 PostCSS 版本为 v8,当你引入社区中的 PostCSS 插件时,请注意版本是否适配,部分旧版本插件可能无法在 PostCSS v8 下运行。
;
true | Object | Function | undefined
false
配置 Pug 模板引擎。
-配置 Pug 模板引擎。
+Builder 默认不启用 Pug 模板引擎,你可以将 tools.pug
设置为 true
来启用它。
启用后,你可以在 html.template
中指定使用 index.pug
作为模板文件。
当 tools.terser
的值为 Object
类型时,可以配置 Pug 模板引擎的选项:
详细参数请查看 Pug API Reference。
-详细参数请查看 Pug API Reference。
+当 tools.pug
配置为 Function
类型时,默认配置作为第一个参数传入,可以直接修改配置对象,也可以返回一个值作为最终结果。
;
Object | Function
你可以通过 tools.sass
修改 sass-loader 的配置。
你可以通过 tools.sass
修改 sass-loader 的配置。
当 tools.sass
的值为 Object
类型时,会与默认配置通过 Object.assign 进行浅层合并,值得注意的是,sassOptions
会通过 deepMerge 进行深层合并。
当 tools.sass
为 Function 类型时,默认配置作为第一个参数传入,可以直接修改配置对象,也可以返回一个值作为最终结果,第二个参数提供了一些可以直接调用的工具函数:
在某些场景下,如果你需要使用特定的 Sass 版本,而不是使用 Builder 内置的 Dart Sass v1,可以在项目中安装需要使用的 Sass 版本,并通过 sass-loader
的 implementation
选项设置。
(excludes: RegExp | RegExp[]) => void
;
Object | Function
{}
通过 tools.styleLoader
可以设置 style-loader 的配置项。
通过 tools.styleLoader
可以设置 style-loader 的配置项。
值得注意的是,Builder 默认不会开启 style-loader
,你可以通过 output.disableCssExtract
配置项来开启它。
当此值为 Object 类型时,与默认配置通过 Object.assign 合并。比如:
当此值为 Function 类型时,默认配置作为第一个参数传入,你可以直接修改配置对象,也可以返回一个对象作为最终配置。比如:
;
Object | Function | false
对应 babel-plugin-styled-components 或使用 SWC 时 @swc/plugin-styled-components 的配置。 值为 Object
类型时,利用 Object.assign 函数与默认配置合并。比如:
对应 babel-plugin-styled-components 或使用 SWC 时 @swc/plugin-styled-components 的配置。 值为 Object
类型时,利用 Object.assign 函数与默认配置合并。比如:
值为 Function
类型时,第一个参数为默认配置,第二个参数提供了一些可以直接调用的工具函数:
该特性默认启用,你可以配置 tools.styledComponents
为 false
来关闭该行为,关闭后可以提升编译性能:
;
Object | Function | undefined
仅支持 webpack
在生产环境构建时,Builder 会通过 terser-webpack-plugin 对 JavaScript 代码进行压缩优化。可以通过 tools.terser
修改 terser-webpack-plugin 的配置。
在生产环境构建时,Builder 会通过 terser-webpack-plugin 对 JavaScript 代码进行压缩优化。可以通过 tools.terser
修改 terser-webpack-plugin 的配置。
当 tools.terser
的值为 Object
类型时,会与默认配置通过 Object.assign
合并。
例如通过 exclude
排除部分文件的压缩:
当 tools.terser
配置为 Function
类型时,默认配置作为第一个参数传入,可以直接修改配置对象,也可以返回一个值作为最终结果。
如果你需要禁用代码压缩,可以使用 output.disableMinimize 配置项。 +};
如果你需要禁用代码压缩,可以使用 output.disableMinimize 配置项。
;
Object | Function | undefined
undefined
仅支持 webpack
使用 babel-loader 或 Rspack 转译 TypeScript 代码的性能明显优于 ts-loader 且能够使用更多拓展能力。
-启用 ts-loader 时将无法使用 source.transformImport 和 tools.styledComponents 等由 Babel 和 SWC 提供支持的能力。 +
使用 babel-loader 或 Rspack 转译 TypeScript 代码的性能明显优于 ts-loader 且能够使用更多拓展能力。
+启用 ts-loader 时将无法使用 source.transformImport 和 tools.styledComponents 等由 Babel 和 SWC 提供支持的能力。
项目中默认不开启 ts-loader,当 tools.tsLoader
不为 undefined 则表示开启 ts-loader,同时禁用 babel-loader 对 TypeScript 的编译。
当此值为 Object 类型时,与默认配置通过 Object.assign 合并。
默认配置如下:
你可以通过 tools.tsLoader
配置项来覆盖默认配置:
当此值为 Function 类型时,默认配置作为第一参数传入,可以直接修改配置对象,也可以返回一个对象作为最终配置;第二个参数为修改 ts-loader
配置工具函数集合:
已废弃,请使用 source.include 代替,两者功能完全一致。
-已废弃,请使用 source.exclude 代替,两者功能完全一致。
+}; +已废弃,请使用 source.include 代替,两者功能完全一致。
+已废弃,请使用 source.exclude 代替,两者功能完全一致。
;
Object | Function
默认情况下,Builder 会开启 fork-ts-checker-webpack-plugin 进行类型检查。你可以通过 output.disableTsChecker
配置项来关闭类型检查。
默认情况下,Builder 会开启 fork-ts-checker-webpack-plugin 进行类型检查。你可以通过 output.disableTsChecker
配置项来关闭类型检查。
当 tsChecker
的值为 Object 类型时,会与默认配置进行深层合并。
当 tsChecker
的值为 Function 类型时,默认配置会作为第一个参数传入,你可以直接修改配置对象,也可以返回一个对象作为最终配置。
;
Object | Function | undefined
undefined
仅支持 webpack
tools.webpack
选项用于配置原生的 webpack。
tools.webpack
选项用于配置原生的 webpack。
-
tools.bundlerChain
同样可以修改 webpack 配置,并且功能更加强大,建议优先使用tools.bundlerChain
。
tools.webpack
可以配置为一个对象,这个对象将会和内置的 webpack 配置通过 webpack-merge 进行深层合并。
tools.webpack
可以配置为一个对象,这个对象将会和内置的 webpack 配置通过 webpack-merge 进行深层合并。
比如添加 resolve.alias
配置:
tools.webpack
也可以配置为一个函数,这个函数的第一个入参为内置的 webpack 配置对象,你可以对这个对象进行修改,然后返回一份新的配置。比如:
tools.webpack
函数返回的对象会直接作为最终使用的 webpack 配置,不会再与内置的 webpack 配置进行合并。
boolean
'web' | 'node' | 'modern-web' | 'web-worker'
boolean
boolean
typeof import('webpack')
typeof import('html-webpack-plugin')
(rules: RuleSetRule | RuleSetRule[]) => void
添加额外的 webpack rules。
+添加额外的 webpack rules。
示例:
(plugins: WebpackPluginInstance | WebpackPluginInstance[]) => void
(plugins: WebpackPluginInstance | WebpackPluginInstance[]) => void
(name: string) => void
删除内部的 webpack 插件,参数为该插件的 constructor.name
。
例如,删除内部的 fork-ts-checker-webpack-plugin:
+例如,删除内部的 fork-ts-checker-webpack-plugin:
(...configs: WebpackConfig[]) => WebpackConfig
用于合并多份 webpack 配置,等价于 webpack-merge。
+用于合并多份 webpack 配置,等价于 webpack-merge。
(name: string) => string
获取 builder 内置依赖的所在路径,等价于 webpackChain#getCompiledPath。
+获取 builder 内置依赖的所在路径,等价于 webpackChain#getCompiledPath。
;
Function | undefined
undefined
tools.webpackChain
的执行时机早于 tools.webpack,因此会被 tools.webpack
中的修改所覆盖。
'development' | 'production' | 'test'
boolean
'web' | 'node' | 'modern-web' | 'web-worker'
boolean
boolean
typeof import('webpack')
typeof import('html-webpack-plugin')
(name: string) => string
Builder 中预先定义了一些常用的 Chain ID,你可以通过这些 ID 来定位到内置的 Rule 或 Plugin。
请留意,下列的一部分 Rule 或 Plugin 并不是默认存在的,当你开启特定配置项、或是注册某些插件后,它们才会被包含在 webpack 配置中。
@@ -1872,15 +1596,15 @@RULE.STYLUS
stylus
的规则stylus
的规则(依赖 Stylus 插件)RULE.PUG
pug
的规则RULE.SVG
svg
RULE.VUE
vue
的规则RULE.PUG
pug
的规则RULE.TOML
使用示例可参考:WebpackChain 使用示例。
+使用示例可参考:WebpackChain 使用示例。
;
Object | Function | undefined
undefined
仅支持 Rspack
tools.rspack
选项用于配置原生的 Rspack。
tools.rspack
可以配置为一个对象,这个对象将会和内置的 Rspack 配置通过 webpack-merge 进行深层合并。
tools.rspack
选项用于配置原生的 Rspack。
tools.rspack
可以配置为一个对象,这个对象将会和内置的 Rspack 配置通过 webpack-merge 进行深层合并。
比如添加 resolve.alias
配置:
tools.rspack
也可以配置为一个函数,这个函数接收一个参数,即内置的 Rspack 配置对象,你可以对这个对象进行修改,然后返回一份新的配置。比如:
tools.rspack
函数返回的对象会直接作为最终使用的 Rspack 配置,不会再与内置的 Rspack 配置进行合并。
这个函数的第二个参数是一个对象,包含了一些工具函数和属性,详情如下:
-'development' | 'production' | 'test'
boolean
'web' | 'node' | 'modern-web' | 'web-worker'
boolean
boolean
typeof import('@rspack/core')
(rules: RuleSetRule | RuleSetRule[]) => void
添加额外的 Rspack rules。
+添加额外的 Rspack rules。
示例:
(plugins: RspackPluginInstance | RspackPluginInstance[]) => void
(plugins: RspackPluginInstance | RspackPluginInstance[]) => void
(name: string) => void
删除内部的 Rspack 插件,参数为该插件的 constructor.name
。
例如,删除内部的 webpack-bundle-analyzer:
+例如,删除内部的 webpack-bundle-analyzer:
(...configs: RspackConfig[]) => RspackConfig
用于合并多份 Rspack 配置,等价于 webpack-merge。
+用于合并多份 Rspack 配置,等价于 webpack-merge。
(name: string) => string
本章节描述了 Builder 插件核心的类型定义和 API。
插件对象的类型,插件对象包含以下属性:
@@ -25,7 +25,7 @@你可以从 @modern-js/builder
中导入该类型:
默认情况下,插件会按照添加顺序依次执行,通过 pre
字段可以声明前置执行的插件。
比如有下面两个插件:
@@ -50,7 +50,7 @@Bar 插件在 pre
字段中配置了 Foo 插件,因此 Foo 插件一定会在 Bar 插件之前执行。
同样的,通过 post
字段可以声明后置执行的插件。
Bar 插件在 post
字段中配置了 Foo 插件,因此 Foo 插件一定会在 Bar 插件之后执行。
通过 remove
字段可以在一个插件中移除其他插件。
比如同时注册上述的 Foo 和 Bar 插件,由于 Bar 插件声明 remove 了 Foo 插件,因此 Foo 插件不会生效。
插件 API 对象的类型。插件 API 对象上挂载了提供给插件使用的上下文数据、工具函数和注册生命周期钩子的函数。
-关于生命周期钩子的完整介绍,请阅读 Plugin Hooks 章节。
+关于生命周期钩子的完整介绍,请阅读 Plugin Hooks 章节。
在使用 webpack-provider 或 rspack-provider 时,BuilderPluginAPI
的类型定义有一定不同,你可以根据插件的使用场景来引入对应的类型。
开发适用于 webpack-provider 的插件时,请从 @modern-js/builder-webpack-provider
中引入 BuilderPluginAPI
。
开发适用于 rspack-provider 的插件时,请从 @modern-js/builder-rspack-provider
中引入 BuilderPluginAPI
。
想要开发同时适用于 webpack-provider 和 rspack-provider 的插件时,请从 @modern-js/builder-shared
中引入 DefaultBuilderPlugin
。
需要注意的是,开发 webpack 和 Rspack 同时支持的插件,意味着不能使用任何带有 webpack 或 Rspack 标识的 api,如 modifyWebpackConfig
或 modifyRspackConfig
。
可通过 modifyBundlerChain 修改同时适用于 webpack 和 Rspack 的配置。
+可通过 modifyBundlerChain 修改同时适用于 webpack 和 Rspack 的配置。
api.context
是一个只读对象,提供一些上下文信息。
api.context
的内容与 builder.context
完全一致,请参考 builder.context。
api.context
的内容与 builder.context
完全一致,请参考 builder.context。
;
获取 Builder 配置,该方法必须在 modifyBuilderConfig
钩子执行完成后才能被调用。
;
获取归一化后的 Builder 配置,该方法必须在 modifyBuilderConfig
钩子执行完成后才能被调用。
相较于 getBuilderConfig
方法,该方法返回的配置经过了归一化处理,配置的类型定义会得到收敛,比如 config.html
的 undefined
类型将被移除。
推荐优先使用该方法获取配置。
;
判断某个插件是否已经被注册。
;
获取所有 HTML 产物的路径信息。
该方法会返回一个对象,对象的 key 为 entry 名称,value 为 HTML 文件在产物目录下的相对路径。
本章节描述了 Builder 插件提供的生命周期钩子。
通用钩子
@@ -51,7 +51,7 @@实验性
;
Bundler chain 是 webpack chain 的子集,其中包含一部分 webpack chain API,你可以用它来同时修改 webpack 和 Rspack 的配置。
-通过 bundler chain 修改的配置,在 webpack 和 Rspack 构建时均可生效。需要注意的是,bundler chain 只支持修改 webpack 和 Rspack 间无差异部分的配置。如,修改 devtool 配置项(webpack 和 Rspack 的 devtool 属性值类型相同),或添加一个Rspack 兼容的 webpack 插件。
+通过 bundler chain 修改的配置,在 webpack 和 Rspack 构建时均可生效。需要注意的是,bundler chain 只支持修改 webpack 和 Rspack 间无差异部分的配置。如,修改 devtool 配置项(webpack 和 Rspack 的 devtool 属性值类型相同),或添加一个Rspack 兼容的 webpack 插件。
modifyBundlerChain
用于调用 bundler chain 来修改 webpack / Rspack 的配置。你在使用 webpack-provider 或 rspack-provider 时都可以使用该 hook。
通过 webpack chain 来修改 webpack 配置。该方法仅在使用 webpack-provider 时调用。
修改最终的 webpack 配置对象,你可以直接修改传入的 config 对象,也可以返回一个新的对象来替换传入的对象。该方法仅在使用 webpack-provider 时调用。
该方法的调用时机晚于 modifyWebpackChain
钩子。
修改最终的 Rspack 配置对象,你可以直接修改传入的 config 对象,也可以返回一个新的对象来替换传入的对象。该方法仅在使用 rspack-provider 时调用。
;
onBeforeCreateCompiler
是在创建底层 Compiler 实例前触发的回调函数,当你执行 builder.startDevServer
、builder.build
或 builder.createCompiler
时,都会调用此钩子。
你可以通过 bundlerConfigs
参数获取到底层打包工具的最终配置数组:
;
onAfterCreateCompiler
是在创建 Compiler 实例后、执行构建前触发的回调函数,当你执行 builder.startDevServer
、builder.build
或 builder.createCompiler
时,都会调用此钩子。
你可以通过 compiler
参数获取到 Compiler 实例对象:
;
onBeforeBuild
是在执行生产环境构建前触发的回调函数,你可以通过 bundlerConfigs
参数获取到底层打包工具的最终配置数组:
;
onAfterBuild
是在执行生产环境构建后触发的回调函数,你可以通过 stats
参数获取到构建结果信息:
;
在启动开发服务器前调用。
;
在启动开发服务器后调用,你可以通过 port
参数获得开发服务器监听的端口号。
;
在每次开发环境构建结束后调用,你可以通过 isFirstCompile
来判断是否为首次构建。
;
在进程即将退出时调用,这个钩子只能执行同步代码。
This section describes some of the core methods provided by Builder.
Create a Builder instance object.
@@ -26,7 +26,7 @@When builderRspackProvider
is passed, the Builder will use Rspack as the bundler for building.
The second parameter of createBuilder
is a options object, you can pass in the following options:
Description:
cwd
: The root path of the current build, the default value is process.cwd()
.entry
: Build entry object.target
: Build target type, the default value is ['web']
, see chapter Build Target for details.target
: Build target type, the default value is ['web']
, see chapter Build Target for details.framework
: The name of the framework, a unique identifier, the default value is 'modern.js'
.configPath
: The path to the framework config file (absolute path), this parameter affects the build cache update.@@ -97,7 +97,7 @@This method does not modify the original config object.
@@ -106,7 +106,7 @@In most scenarios, it is recommended to import webpack from Builder instead of manually installing a "webpack" dependency, which can avoid multi-instance problems.
In most scenarios, it is recommended to import HtmlWebpackPlugin from builder instead of manually installing a "html-webpack-plugin" dependency, which can avoid multi-instance problems.
This section describes all the properties and methods on the Builder instance object.
builder.context
is a read-only object that provides some context infos.
Build target type, corresponding to the target
option of createBuilder
method.
The root path of current build, corresponding to the cwd
option of createBuilder
method.
The absolute path to the src directory.
The absolute path of the output directory, corresponding to the output.distPath.root
config in BuilderConfig
.
The absolute path of the build cache files.
The absolute path to the framework config file, corresponding to the configPath
option of createBuilder
method.
The absolute path of the tsconfig.json file, or undefined
if the tsconfig.json file does not exist in current project.
The name of the framework, a unique identifier, the default value is 'modern.js'
.
Dev Server information, including the current Dev Server hostname and port number.
The bundler type of current build.
Perform a production build.
If you need to perform a development build, you can set the mode
option to 'development'
.
If you need to watch file changes and re-build, you can set the watch
option to true
.
In some cases, you may want to use a custom compiler:
Start the local Dev Server, based on the Modern.js Dev Server.
Start Dev Server:
-After successfully starting Dev Server, you can see the following logs:
startDevServer
returns the following parameters:
urls
: URLs to access dev server.Setting printURLs
to false
to disable the default URL output, so you can custom the logs.
You can also directly configure printURLs
as a function to modify URLs, such as adding a subpath to each URL:
When a port is occupied, Builder will automatically increment the port number until an available port is found.
Set strictPort
to true
and Builder will throw an exception when the port is occupied.
In some cases, you may want to use a custom compiler:
In some cases, the default startup port number is already occupied. In this situation, Builder will automatically increment the port number until it finds an available one. This process will output a prompt log. If you do not want this log, you can set getPortSliently
to true
.
By default, Builder uses @modern-js/utils/logger
to output logs. You can customize the log output object through the logger
parameter.
Then Builder will use the custom logger to output logs.
Start a server to preview the production build locally. This method should be executed after builder.build
.
Start the server:
-serve
returns the following parameters:
urls
: URLs to access server.Create a Compiler object.
When the target
option of createBuilder
contains only one value, the return value is Compiler
; when target
contains multiple values, the return value is MultiCompiler
.
@@ -288,7 +288,7 @@In most scenarios, you do not need to use this API unless you need to custom the Dev Server or other advanced scenarios.
Removes one or more Builder plugins, which can be called multiple times.
This method needs to be called before compiling. If it is called after compiling, it will not affect the compilation result.
;
Determines whether a plugin has been registered.
Inspect the final generated builder config and bundler config.
The inspectConfig
method does not support simultaneous use with the startDevServer
/ build
method.
When you need to view the complete builder and bundler configurations during the build process, you can use the debug mode or obtain them through hooks such as onBeforeBuild
and onBeforeCreateCompile
.
+
When you need to view the complete builder and bundler configurations during the build process, you can use the debug mode or obtain them through hooks such as onBeforeBuild
and onBeforeCreateCompile
.
Get the config content in string format:
Write the config content to disk:
;
onBeforeCreateCompiler
is a callback function that is triggered after the Compiler instance has been created, but before the build process begins. This hook is called when you run builder.startDevServer
, builder.build
, or builder.createCompiler
.
You can access the Compiler instance object through the compiler
parameter:
;
onAfterCreateCompiler
is a callback function that is triggered after the compiler instance has been created, but before the build process. This hook is called when you run builder.startDevServer
, builder.build
, or builder.createCompiler
.
You can access the Compiler instance object through the compiler
parameter:
;
onBeforeBuild
is a callback function that is triggered before the production build is executed. You can access the final configuration array of the underlying bundler through the `bundlerConfigs' parameter:
;
onAfterBuild
is a callback function that is triggered after running the production build. You can access the build result information via the `stats' parameter:
;
Called before starting the development server.
;
Called after starting the development server, you can get the port number through the port
parameter.
;
Called after each development environment build, you can use isFirstCompile
to determine whether it is the first build.
;
Called when the process is going to exit, this hook can only execute synchronous code.
;
Get the Builder config, this method must be called after the modifyBuilderConfig
hook is executed.
;
Get the normalized Builder config, this method must be called after the modifyBuilderConfig
hook is executed.
Compared with the api.getBuilderConfig
method, the config returned by this method has been normalized, and the type definition of the config will be narrowed. For example, the undefined
type of config.html
will be removed.
It is recommended to use this method to get the Builder config.
;
Get path information for all HTML assets.
This method will return an object, the key is the entry name and the value is the relative path of the HTML file in the dist directory.
This section describes some of the type definitions provided by the Builder.
The type of the Builder instance.
You can pass in the Provider type through generics to make the type definition of the Builder instance more accurate:
The type of the context property in the Builder instance.
The type of Builder plugin, should be used with the BuilderPluginAPI
type exported from the provider.
The type of build target.
-The type of the entry
option to the createBuilder
method.
The param type of createBuilder
method.
This section describes some dev configurations in Modern.js Builder.
;
boolean | string
'/'
The script URL will be:
-If assetPrefix
is set to false
or not set, /
is used as the default value.
When the value of assetPrefix
is string
type, the string will be used as the URL prefix:
The script URL will be:
-dev.assetPrefix
corresponds to the following native configurations:
The differences from the native configuration are as follows:
dev.assetPrefix
only takes effect in the development environment.dev.assetPrefix
automatically appends a trailing /
by default.dev.assetPrefix
is written to the process.env.ASSET_PREFIX
environment variable.dev.assetPrefix
only takes effect in the development environment.
dev.assetPrefix
automatically appends a trailing /
by default.
The value of dev.assetPrefix
is written to the process.env.ASSET_PREFIX
environment variable.
;
() => Promise<void> | void
undefined
;
boolean
true
;
string
0.0.0.0
;
boolean | { key: string; cert: string }
false
After configuring this option, you can enable HTTPS Dev Server, and disabling the HTTP Dev Server.
HTTP:
HTTPS:
You can directly set https
to true
, Builder will automatically generate the HTTPS certificate based on devcert.
When using this method, you need to manually install the devcert dependency in your project:
+You can directly set https
to true
, Builder will automatically generate the HTTPS certificate based on devcert.
When using this method, you need to manually install the devcert dependency in your project:
Then configure dev.https
to true
:
The devcert has some limitations, it does not currently support IP addresses yet.
The https proxy automatically installs the certificate and needs root authority, please enter the password according to the prompt.The password is only used to trust the certificate, and will not be leaked or be used elsewhere.
You can also manually pass in the certificate and the private key required in the dev.https
option. This parameter will be directly passed to the createServer method of the https module in Node.js.
For details, please refer to https.createServer.
+For details, please refer to https.createServer.
;
number
8080
;
true
If you need to modify the text displayed on the left side of the progress bar, you can set the id
option:
;
boolean | string | string[] | undefined
undefined
Since the port number may change, you can use the <port>
placeholder to refer to the current port number, and Builder will automatically replace the placeholder with the actual listening port number.
On MacOS, you can open the specified browser when Dev Server starts, by set environment variable BROWSER
, support values:
This section describes some experimental configs in the Builder, which can enable unstable features in Builder.
-If you meet issues with experimental features, please disable the config first and report through GitHub Issues.
+If you meet issues with experimental features, please disable the config first and report through GitHub Issues.
;
false
only support webpack
Lazy compilation only takes effect in the development.
Lazy compile async modules introduced by dynamic import:
+Lazy compile async modules introduced by dynamic import:
When imports
option is enabled, all async modules will only be compiled when requested. If your project is a single-page application, and routing is split through dynamic import, there will be a significant effect of speeding up compilation.
In addition to lazy compilation for async modules, you can also choose to lazily compile both entries and async modules at the same time.
@@ -50,13 +50,13 @@The above config can also be simplified to:
When entries
option is enabled, all pages will not be compiled when the compilation is started, and the page will be compiled only when you visit it.
When using lazy compilation for entries, there are some considerations:
Considering that Lazy Compilation is still an experimental feature of webpack, you may encounter some potential issues while using it, such as changes in the behavior of compiled artifacts or compilation errors.
-When you encounter these issues, you can refer to webpack Issues to find solutions or disable the lazyCompilation
configuration option.
When you encounter these issues, you can refer to webpack Issues to find solutions or disable the lazyCompilation
configuration option.
;
boolean | PluginSourceBuildOptions
false
More detail can see "Source Code Build Mode"。
+}; +More detail can see "Source Code Build Mode"。
experiments.sourceBuild
is implemented based on Rsbuild's Source Build plugin. You can pass plugin options like this:
experiments.sourceBuild
is implemented based on Rsbuild's Source Build plugin. You can pass plugin options like this:
This section describes some HTML configurations in Modern.js Builder.
;
string
undefined
Set to an absolute path:
After recompiling, the following tags are automatically generated in the HTML:
-;
boolean | 'anonymous' | 'use-credentials'
false
Set the crossorigin attribute of the <script>
and <style>
tags.
Set the crossorigin attribute of the <script>
and <style>
tags.
true
is passed, it will automatically be set to crossorigin="anonymous"
.false
is passed, it will not set the crossorigin
attr.After compilation, the <script>
tag in HTML becomes:
The <style>
tag becomes:
crossorigin
can the set to the following values:
anonymous
: Request uses CORS headers and credentials flag is set to 'same-origin'. There is no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication, unless destination is the same origin.use-credentials
: Request uses CORS headers, credentials flag is set to 'include' and user credentials are always included.anonymous
: Request uses CORS headers and credentials flag is set to 'same-origin'. There is no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication, unless destination is the same origin.
use-credentials
: Request uses CORS headers, credentials flag is set to 'include' and user credentials are always included.
;
boolean
false
Remove the folder of the HTML files. When this option is enabled, the generated HTML file path will change from [name]/index.html
to [name].html
.
By default, the structure of HTML files in the dist
directory is:
Enable the html.disableHtmlFolder
config:
After recompiling, the directory structure of the HTML files in dist is:
If you want to set the path of the HTML files, use the
output.distPath.html
config.
;
string
undefined
After config this option, the favicon will be automatically copied to the dist directory during the compilation, and the corresponding link
tag will be added to the HTML.
Set as a relative path:
Set to an absolute path:
Set to a URL:
After recompiling, the following tags are automatically generated in the HTML:
-;
Record<string, string>
undefined
The usage is same as favicon
, and you can use the "entry name" as the key to set each page individually.
faviconByEntries
will overrides the value set in favicon
.
After recompiling, you will see:
foo
is ./src/assets/foo.png
../src/assets/default.png
.The favicon for page foo
is ./src/assets/foo.png
.
The favicon for other pages is ./src/assets/default.png
.
;
'head' | 'body' | 'true' | false
'head'
Add the following config to inject script into the body tag:
You will see that the script tag is generated at the end of the body tag:
;
Record<string, boolean | string>
undefined
The usage is same as inject
, and you can use the "entry name" as the key to set each page individually.
injectByEntries
will overrides the value set in inject
.
After recompiling, you will see:
foo
will be injected inside the body
tag.head
tag.The script tag of the page foo
will be injected inside the body
tag.
The script tag of other pages will be injected inside the head
tag.
;
Record<string, false | string | Record<string, string | boolean>>
undefined
The generated meta
tag in HTML is:
When the value
of a meta
object is an object, the key: value
of the object is mapped to the attribute of the meta
tag.
In this case, the name
and content
properties will not be set by default.
The meta
tag in HTML is:
Setting the value
of the meta
object to false
and the meta tag will not be generated.
For example to remove the imagemode
:
;
Record<string, Meta>
undefined
The usage is same as meta
, and you can use the "entry name" as the key to set each page individually.
metaByEntries
will overrides the value set in meta
.
After compiling, you can see that the meta of the page foo
is:
The meta of other pages is:
-;
string
'root'
By default, the root
element is included in the HTML template for component mounting, and the element id can be modified through mountId
.
Set the id
to app
:
After compilation:
After modifying mountId
, if there is logic in your code to obtain the root
root node, please update the corresponding value:
If you customized the HTML template, please make sure that the template contains <div id="<%= mountId %>"></div>
, otherwise the mountId
config will not take effect.
;
'defer' | 'blocking' | 'module'
'defer'
When the browser encounters a <script>
tag with the defer attribute, it will download the script file asynchronously without blocking the parsing and rendering of the page. After the page is parsed and rendered, the browser executes the <script>
tags in the order they appear in the document.
When you need to set blocking
, it is recommended to set html.inject
to 'body'
to avoid page rendering being blocked.
When scriptLoading
is set to module
, the script can support ESModule syntax, and the browser will automatically delay the execution of these scripts by default, which is similar to defer
.
;
ArrayOrNot<HtmlInjectTag | HtmlInjectTagHandler>
undefined
A tag object can be used to describe the tag to be injected and the location of the injection can be controlled by the parameters.
It will add a script
tag to the end of the head
of the HTML:
The final insertion position of the tag is determined by the head
and append
options, and two elements with the same configuration will be inserted into the same area and hold their relative positions to each other.
Fields in the tag that indicate the path to the external assets are affected by the publicPath
and hash
options.
These fields include src
for the script
tag and href
for the link
tag.
html.tags
can also accept functions that can arbitrarily modify tags by writing logic to the callback, often used to ensure the relative position of tags while inserting them.
The callback function accepts a tag list as an argument and needs to modify or return a new tag array directly.
The function will be executed at the end of the HTML processing flow. In the example below, the 'tags' parameter will contain all tag objects that form config, regardless of the function's location in config.
Modifying the attributes append
, publicPath
, hash
in the callback will not take effect, because they have been applied to the tag's location and path attributes, respectively.
So the end product will look like:
@@ -472,15 +484,15 @@This configuration is used to modify the content of HTML files after Builder completes building, and does not resolve or parse new modules. It cannot be used to import uncompiled source code files. Also cannot replace configurations such as source.preEntry.
+This configuration is used to modify the content of HTML files after Builder completes building, and does not resolve or parse new modules. It cannot be used to import uncompiled source code files. Also cannot replace configurations such as source.preEntry.
For example, for the following project:
The tag object here will be directly added to the HTML product after simple processing, but the polyfill.ts
will not be transpiled or bundled, so there will be a 404 error when processing this script in the application.
Reasonable use cases include:
The result will seems like:
;
Record<string, ArrayOrNot<HtmlInjectTag | HtmlInjectTagHandler>>
undefined
The usage is the same as tags
, and you can use the "entry name" as the key to set each page individually.
tagsByEntries
will override the value set in tags
.
Compile the application and you can see a tag injected on the foo
page:
And for any other pages:
-;
string
Define the path to the HTML template, corresponding to the template
config of html-webpack-plugin.
Define the path to the HTML template, corresponding to the template
config of html-webpack-plugin.
Replace the default template with a custom HTML template file, you can add the following config:
;
Object
undefined
The usage is same as template
, and you can use the "entry name" as the key to set each page individually.
templateByEntries
will overrides the value set in template
.
;
Object | Function
Define the parameters in the HTML template, corresponding to the templateParameters
config of html-webpack-plugin. You can use the config as an object or a function.
Define the parameters in the HTML template, corresponding to the templateParameters
config of html-webpack-plugin. You can use the config as an object or a function.
If it is an object, it will be merged with the default parameters. For example:
If it is a function, the default parameters will be passed in, and you can return an object to override the default parameters. For example:
To use the foo
parameter in the HTML template, you can add the following config:
Or you can use a function to dynamically generate the parameters:
Then you can use the foo
parameter in the HTML template by <%= foo %>
:
The compiled HTML is:
-;
Object
undefined
The usage is same as templateParameters
, and you can use the "entry name" as the key to set each page individually.
templateParametersByEntries
will overrides the value set in templateParameters
.
;
string
undefined
;
Record<string, string>
undefined
The usage is same as title
, and you can use the "entry name" as the key to set each page individually.
titleByEntries
will overrides the value set in title
.
After recompiling, you can see:
foo
is TikTok
.This section describes some output related configurations in Modern.js Builder.
;
string
'/'
After building, you can see that the JS files are loaded from:
output.assetPrefix
corresponds to the following native configurations:
The differences from the native configuration are as follows:
output.assetPrefix
only takes effect in the production environment.output.assetPrefix
automatically appends a trailing /
by default.output.assetPrefix
is written to the process.env.ASSET_PREFIX
environment variable.output.assetPrefix
only takes effect in the production environment.
output.assetPrefix
automatically appends a trailing /
by default.
The value of output.assetPrefix
is written to the process.env.ASSET_PREFIX
environment variable.
;
Object
Since the ability will inject some extra runtime code into HTML, we have disabled this ability by default. If you need to enable it, you can configure it in the form of an object, for example:
When you enable this ability, the default config of assetsRetry
is as follows:
At the same time, you can also customize your retry logic using the following configurations.
After adding the above configuration, when assets fail to load from the cdn1.com
domain, the request domain will automatically fallback to cdn2.com
.
If the assets request for cdn2.com
also fails, the request will fallback to cdn3.com
.
number
string | ((url: string) => boolean) | undefined
undefined | boolean | 'anonymous' | 'use-credentials'
undefined | (options: AssetsRetryHookContext) => void
undefined | (options: AssetsRetryHookContext) => void
undefined | (options: AssetsRetryHookContext) => void
boolean
After adding the above configuration, the runtime code of assetsRetry
will be extracted into a separate assets-retry.[version].js
file and output to the dist directory.
The downside is that assets-retry.[version].js
itself may fail to load. If this happens, the assets retry will not work. Therefore, we prefer to inline the runtime code into the HTML file.
assetsRetry
may not work in the following scenarios:
Currently, assetsRetry
cannot work on dynamically imported resources. This feature is being supported.
assetsRetry
listens to the page error event to know whether the current resource fails to load and needs to be retried. Therefore, if the resource in the custom template is executed earlier than assetsRetry
, then assetsRetry
cannot listen to the event that the resource fails to load, so it cannot retry.
If you want assetsRetry
to work on resources in custom templates, you can refer to Custom Insertion Example to modify html.inject configuration and custom template.
If you want assetsRetry
to work on resources in custom templates, you can refer to Custom Insertion Example to modify html.inject configuration and custom template.
;
'ascii' | 'utf8'
'ascii'
Builder will automatically add <meta charset="utf-8">
to the generated HTML files if output.charset
is utf8
.
;
boolean
true
;
boolean | object
false
At this point, the rem configuration defaults as follows:
When the value of output.convertToRem
is object
type, The Builder will perform Rem processing based on the current configuration.
options:
@@ -397,12 +403,12 @@object
;
CopyPluginOptions | CopyPluginOptions['patterns']
undefined
For more detailed configuration, please refer to: copy-webpack-plugin.
+}; +For more detailed configuration, please refer to: copy-webpack-plugin.
;
Setup css modules configuration.
The auto
configuration option allows CSS modules to be automatically enabled based on their filenames.
Type description:
undefined
: According to the output.disableCssModuleExtension configuration option to determine which style files to enable CSS modules.undefined
: According to the output.disableCssModuleExtension configuration option to determine which style files to enable CSS modules.true
: enable CSS modules for all files matching /\.module\.\w+$/i.test(filename)
regexp.false
: disables CSS Modules.RegExp
: enable CSS modules for all files matching /RegExp/i.test(filename)
regexp.Style of exported class names.
;
string
Sets the format of the className generated by CSS Modules after compilation.
cssModuleLocalIdentName
has different default values in development and production.
You can use the following template strings in cssModuleLocalIdentName
:
When using Rspack as the bundler, currently does not support custom <hashDigest>
.
Set cssModuleLocalIdentName
to other value:
;
Set the size threshold to inline static assets such as images and fonts.
By default, static assets will be Base64 encoded and inline into the page if the size is less than 10KB.
You can adjust the threshold by setting the dataUriLimit
config.
image
: The threshold of non-SVG images.media
: The threshold of media assets such as videos.Set the threshold of images to 5000 Bytes, and set media assets not to be inlined:
;
boolean
false
Whether to disable CSS extract and inline CSS files into JS files.
By default, Builder will extract CSS into a separate .css
file and output it to the dist directory. When this option is set to true
, CSS files will be inlined into JS files and inserted on the page at runtime via <style>
tags.
;
boolean
false
.sass
, .scss
and .less
files are also affected by disableCssModuleExtension
.
We do not recommend enabling this config, because after enabling disableCssModuleExtension
, CSS Modules files and ordinary CSS files cannot be clearly distinguished, which is not conducive to long-term maintenance.
The following is a detailed explanation of the CSS Modules rules:
For CSS Modules files inside node_modules, please always use the *.module.css
suffix.
;
Set the directory of the dist files. Builder will output files to the corresponding subdirectory according to the file type.
Detail:
The root
is the root directory of the build artifacts and can be specified as a relative or absolute path. If the value of root
is a relative path, it will be appended to the project's root directory to form an absolute path.
Other directories can only be specified as relative paths and will be output relative to the root
directory.
The JavaScript files will be output to the distPath.root
+ distPath.js
directory, which is dist/static/js
.
If you need to output JavaScript files to the build/resource/js
directory, you can add following config:
;
boolean
false
This configuration is usually used for debugging and troubleshooting. It is not recommended to disable code minification in production environments, as it will significantly degrade the page performance.
;
Whether to disable Source Map generation.
Source Map is an information file that saves the source code mapping relationship. It records each location of the compiled code and the corresponding pre-compilation location. With Source Map, you can directly view the source code when debugging the compiled code.
By default, Builder's Source Map generation rules are:
@@ -746,13 +752,13 @@If you want to enable Source Map in development and disable it in the production, you can set to:
If you need to individually control the Source Map of JS files or CSS files, you can refer to the following settings:
;
boolean
false
;
boolean
false
Disable TypeScript type checker:
Disable type checker in development:
Disable type checker in production:
It is not recommended to disable type checker in production, which will reduce the stability of the production code, please use it with caution.
;
boolean
false
Remove the hash from the name of static files after production build.
After the production build, there will be a hash in the middle of the filename by default. You can disable this behavior through the output.disableFilenameHash
config.
By default, the filename is:
Add output.disableFilenameHash
config:
After rebuild, the filenames become:
;
boolean
false
Used to control whether to inline the bundler's runtime code into HTML.
Builder will generate a builder-runtime.js
file in the dist directory, which is the runtime code of webpack or Rspack.
runtimeChunk is a piece of runtime code, which is provided by webpack or Rspack, that contains the necessary module processing logic, such as module loading, module parsing, etc. See Runtime for details.
+runtimeChunk is a piece of runtime code, which is provided by webpack or Rspack, that contains the necessary module processing logic, such as module loading, module parsing, etc. See Runtime for details.
In the production environment, Builder will inline the runtimeChunk file into the HTML file by default instead of writing it to the dist directory. This is done to reduce the number of file requests.
If you don't want to generate a separate runtimeChunk file, but want the runtimeChunk code to be bundled into the page chunk, you can set the config like this:
;
boolean
false
Whether to generate a manifest file that contains information of all assets.
-Enable asset manifest:
After compiler, there will be a dist/manifest.json
file:
If the current project has multiple types of build artifacts, such as including SSR build artifacts, multiple manifest.json files will be generated.
asset-manifest.json
asset-manifest-node.json
web artifact: asset-manifest.json
node artifact: asset-manifest-node.json
;
boolean
false
If this option is enabled, all unrecognized files will be emitted to the dist directory; otherwise, an exception will be thrown.
-Enable the config:
Import a module of unknown type in code:
-After compilation, foo.xxx
will be output to the dist/static/media
directory.
You can control the output path and filename after fallback through the output.distPath.media
and output.filename.media
configs.
Enabling this config will change the rules structure in the webpack config. In most cases, we do not recommend using this config.
;
boolean
false
Whether to use the new decorator proposal.
-By default, Builder uses the legacy decorator proposal when compiling decorators.
-When output.enableLatestDecorators
is set to true
, the Builder will compile with the new decorator proposal (version 2018-09).
By default, Builder uses the legacy decorator proposal when compiling decorators.
+When output.enableLatestDecorators
is set to true
, the Builder will compile with the new decorator proposal (version 2018-09).
;
boolean
false
Whether to generate a TypeScript declaration file for CSS modules.
-Enable CSS module TypeScript declaration:
After building, there will be a .d.ts
file for each CSS module file. For example
;
false
Whether to inline output scripts files (.js files) into HTML with <script>
tags in production mode.
Note that, with this option on, the scripts files will no longer be written in dist directory, they will only exist inside the HTML file instead.
-When using convention-based routing, you need to set output.splitRouteChunks to false if this option is turned on. +
When using convention-based routing, you need to set output.splitRouteChunks to false if this option is turned on.
By default, we have following output files:
After turn on the output.enableInlineScripts
option:
The output files will become:
And dist/static/js/main.js
will be inlined in index.html
:
If you need to inline part of the JS files, you can set enableInlineScripts
to a regular expression that matches the URL of the JS file that needs to be inlined.
For example, to inline main.js
into HTML, you can add the following configuration:
The production filename includes a hash value by default, such as static/js/main.18a568e5.js
. Therefore, in regular expressions, \w+
is used to match the hash.
;
false
Whether to inline output style files (.css files) into HTML with <style>
tags in production mode.
Note that, with this option on, the style files will no longer be written in dist directory, they will only exist inside the HTML file instead.
-When using convention-based routing, you need to set output.splitRouteChunks to false if this option is turned on. +
When using convention-based routing, you need to set output.splitRouteChunks to false if this option is turned on.
By default, we have following output files:
After turn on the output.enableInlineStyles
option:
The output files will become:
And dist/static/css/style.css
will be inlined in index.html
:
If you need to inline part of the CSS files, you can set enableInlineStyles
to a regular expression that matches the URL of the CSS file that needs to be inlined.
For example, to inline main.css
into HTML, you can add the following configuration:
The production filename includes a hash value by default, such as static/css/main.18a568e5.css
. Therefore, in regular expressions, \w+
is used to match the hash.
You can also set output.enableInlineStyles
to a function that accepts the following parameters:
name
: The filename, such as static/css/main.18a568e5.css
.;
Type: string | object | function | RegExp
At build time, prevent some import
dependencies from being packed into bundles in your code, and instead fetch them externally at runtime.
For more information, please see: webpack Externals
-For more information, please see: webpack Externals
+Exclude the react-dom
dependency from the build product. To get this module at runtime, the value of react-dom
will globally retrieve the ReactDOM
variable.
When the build target is Web Worker, externals will not take effect. This is because the Worker environment can not access global variables.
;
Sets the filename of dist files.
After the production build, there will be a hash in the middle of the filename by default. This behavior can be disabled through the output.disableFilenameHash
config.
The following are the details of each filename:
@@ -1132,7 +1142,7 @@image
: The name of a non-SVG image.media
: The name of a media asset, such as a video.To set the name of the JavaScript file to [name]_script.js
, use the following configuration:
Usually, we only set the filename hash in the production mode (i.e., when process.env.NODE_ENV === 'production'
).
If you set the filename hash in the development mode, it may cause HMR to fail (especially for CSS files). This is because every time the file content changes, the hash value changes, preventing tools like mini-css-extract-plugin from reading the latest file content. +
If you set the filename hash in the development mode, it may cause HMR to fail (especially for CSS files). This is because every time the file content changes, the hash value changes, preventing tools like mini-css-extract-plugin from reading the latest file content.
When you import a module via dynamic import, the module will be bundled into a single file, and its default naming rules are as follows:
@@ -1153,14 +1163,14 @@dist/static/js/async/src_add_ts.js
.dist/static/js/async/798.27e3083e.js
. This is to avoid leaking the source code path in the production environment, and the number of characters is also less.If you want to specify a fixed name for the async module, you can use the magic comments provided by the bundler to achieve this, using webpackChunkName
to specify the module name:
If you want to specify a fixed name for the async module, you can use the magic comments provided by the bundler to achieve this, using webpackChunkName
to specify the module name:
After specifying the module name as above, the generated file will be dist/static/js/async/my-chunk-name.js
.
;
'linked' | 'inline' | 'none'
'linked'
inline
: Preserve all legal comments in original position.
none
: Remove all legal comments.Remove all legal comments:
;
string[] | Record<BuilderTarget, string[]
undefined
Specifies the range of target browsers that the project is compatible with. This value will be used by @babel/preset-env and autoprefixer to identify the JavaScript syntax that need to be transformed and the CSS browser prefixes that need to be added.
+Specifies the range of target browsers that the project is compatible with. This value will be used by @babel/preset-env and autoprefixer to identify the JavaScript syntax that need to be transformed and the CSS browser prefixes that need to be added.
The overrideBrowserslist
config will override the .browserslistrc
config file in the project and the browserslist
field in package.json.
In most cases, it is recommended to use the .browserslistrc
file rather than the overrideBrowserslist
config. Because the .browserslistrc
file is the official config file, it is more general and can be recognized by other libraries in the community.
If there is no browserslist
configs defined in the project, nor overrideBrowserslist
defined, then Builder will set the default browserslist to:
An example compatible with mobile scenarios:
Check out the browserslist documentation to learn more about browserslist.
+}; +Check out the browserslist documentation to learn more about browserslist.
When you build multiple targets at the same time, you can set different browser ranges for different targets. At this point, you need to set overrideBrowserslist
to an object whose key is the corresponding build target.
For example to set different ranges for web
and node
:
;
'entry' | 'usage' | 'ua' | 'off'
'entry'
useBuiltIns: 'usage'
configuration in @babel/preset-env
.
The Polyfill code is dynamically delivered according to the currently requested UA information.
-The dynamic delivery feature needs to be used with the upper-level framework. For more details, please refer to Modern.js - Polyfill At Runtime.
+The dynamic delivery feature needs to be used with the upper-level framework. For more details, please refer to Modern.js - Polyfill At Runtime.
Polyfill is not injected. When using this option, you need to ensure code compatibility yourself.
;
'url' | 'component'
'url'
output.svgDefaultExport
is set to url
, the default export of SVG files is the URL of the file. For example:
When output.svgDefaultExport
is set to component
, the default export of SVG files is the React component of the file. For example:
At this time, you can also specify the ?url
query to import the URL, for example:
This section describes some performance related configurations in Modern.js Builder.
;
only support webpack
You can also disable the build cache by setting it to false
:
cacheDigest
is used to add some environment variables that will affect the build results. The Builder will set the cache name based on the cacheDigest
content and the current build mode to ensure that different cacheDigests can hit different caches.
;
Object | undefined
Used to enable the webpack-bundle-analyzer plugin to analyze the size of the output.
+Used to enable the webpack-bundle-analyzer plugin to analyze the size of the output.
By default, Builder does not enable webpack-bundle-analyzer
. When this feature is enabled, the default configuration is as follows:
You have two ways to enable webpack-bundle-analyzer
to analyze the size of the output files:
BUNDLE_ANALYZE=true
, for example:performance.bundleAnalyze
to enable it permanently:After enabling it, Builder will generate an HTML file that analyzes the size of the output files, and print the following log in the Terminal:
-You can manually open the file in the browser and view the detail of the bundle size. When an area is larger, it indicates that its corresponding bundle size is larger.
In the webpack-bundle-analyzer
panel, you can control size types in the upper left corner (default is Parsed
):
build
process to not exit normally.bundleAnalyzer
will reduce build speed. Therefore, this configuration should not be enabled during daily development, and it is recommended to enable it on demand through the BUNDLE_ANALYZE
environment variable.dev
phase, the real output size cannot be reflected, so it is recommended to analyze the output size in the build
phase.Enabling the server mode will cause the build
process to not exit normally.
Enabling bundleAnalyzer
will reduce build speed. Therefore, this configuration should not be enabled during daily development, and it is recommended to enable it on demand through the BUNDLE_ANALYZE
environment variable.
Since no code minification and other optimizations are performed in the dev
phase, the real output size cannot be reflected, so it is recommended to analyze the output size in the build
phase.
;
Object
{ strategy: 'split-by-experience' }
Builder supports the following chunk splitting strategies:
number
RegExp[] | Record<string, RegExp>
This is an easier way than configuring webpack's splitChunks directly.
Chunks split using the forceSplitting
configuration will be inserted into the HTML file as resources requested for the initial screen using <script>
tags. Therefore, please split them appropriately based on the actual scenario to avoid excessive size of initial screen resources.
When performance.chunkSplit.strategy
is split-by-experience
, split-by-module
, split-by-size
or single-vendor
, you can specify the custom webpack chunk splitting config via performance.chunkSplit.override
. This config will be merged with the webpack splitChunks config (the cacheGroups
config will also be merged). For example:
When the Builder target is "node", since Node Bundles do not need to be splitted to optimize loading performance, the chunkSplit rule will not take effect.
;
Type: undefined | string[]
undefined
Specifies that the user agent should preemptively perform DNS resolution for the target resource's origin, refer to dns-prefetch.
+Specifies that the user agent should preemptively perform DNS resolution for the target resource's origin, refer to dns-prefetch.
After this property is set, the domain name can be resolved before the resource is requested, reducing request latency and improving loading performance.
-See Using dns-prefetch for more details.
-See Using dns-prefetch for more details.
+;
undefined | Array<string | PreconnectOption>
undefined
Specifies that the user agent should preemptively connect to the target resource's origin, refer to preconnect.
+Specifies that the user agent should preemptively connect to the target resource's origin, refer to preconnect.
Configuring this property will establish a connection with the server. If the site is HTTPS, this process includes DNS resolution, TCP connection establishment, and TLS handshake. Combining Preconnect and DnsPrefetch can further reduce the delay of cross-domain requests.
-;
undefined | true | PrefetchOption
undefined
Specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation. Refer to prefetch.
+Specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation. Refer to prefetch.
When setting performance.prefetch
to true
, resources will be prefetched according to the following configuration:
When the value of performance.prefetch
is object
type, the Builder will enable the prefetch capability for the specified resource according to the current configuration.
all-chunks
: prefetch all resources (on the current page), including all asynchronous and non-asynchronous resources.all-assets
: prefetch all resources, and resources of other pages will be included in the MPA scenario.When you want to prefetch all image resources in png format on the current page, you can configure it as follows:
;
undefined | true | PreloadOption
undefined
Specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the as attribute (and the priority associated with the corresponding destination). Refer to preload.
-Specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the as attribute (and the priority associated with the corresponding destination). Refer to preload.
+When setting performance.preload
to true
, resources will be preloaded according to the following configuration:
When the value of performance.preload
is object
type, the Builder will enable the preload capability for the specified resource according to the current configuration.
The type
field controls which resources will be pre-fetched, and supports secondary filtering of specified resources through include
and exclude
.
all-chunks
: preload all resources (on the current page), including all asynchronous and non-asynchronous resources.
all-assets
: preload all resources, and resources of other pages will be included in the MPA scenario.When you want to preload all image resources in png format on the current page, you can configure it as follows:
;
boolean
true
Disable the logs:
;
boolean
false
Whether capture timing information for each module, same as the profile config of webpack / Rspack.
-Whether capture timing information for each module, same as the profile config of webpack / Rspack.
+When turned on, webpack / Rspack generates a JSON file with some statistics about the module that includes information about timing information for each module.
;
boolean | ConsoleType[]
false
You can also specify to remove only certain types of console.xx
, such as console.log
and console.warn
:
The following types of console are currently supported:
-;
boolean
false
Whether to remove the locales of moment.js.
+Whether to remove the locales of moment.js.
moment.js
contains a lot of locales by default, which will increase the bundle size.
When moment.js
is used in the project, it is recommended to enable this option to automatically exclude all locales:
Once enabled, you can load a specific locale via:
;
boolean
true
only support webpack
Specifies whether to modularize the import of lodash and remove unused lodash modules to reduce the code size of lodash.
-This optimization is implemented using babel-plugin-lodash and swc-plugin-lodash under the hood.
-Specifies whether to modularize the import of lodash and remove unused lodash modules to reduce the code size of lodash.
+This optimization is implemented using babel-plugin-lodash and swc-plugin-lodash under the hood.
+This option is enabled by default, and Builder will automatically redirects the code references of lodash
to sub-paths.
For example:
The transformed code will be:
In some cases, the import transformation of lodash
may generate unexpected code. In such cases, you can manually disable this optimization:
This section describes some security related configurations in Modern.js Builder.
;
undefined
only support webpack
Adding an integrity attribute (integrity
) to sub-resources introduced by HTML allows the browser to verify the integrity of the introduced resource, thus preventing tampering with the downloaded resource.
Enabling this option will set the webpack output.crossOriginLoading configuration option to anonymous
.
Enabling this option will set the webpack output.crossOriginLoading configuration option to anonymous
.
Subresource Integrity (SRI) is a security feature that enables browsers to verify that resources they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched resource must match.
For script tags, the result is to refuse to execute the code; for CSS links, the result is not to load the styles.
-For more on subresource integrity, see Subresource Integrity - MDN.
+For more on subresource integrity, see Subresource Integrity - MDN.
By default, SRI
is not turned on, and when it is, its default configuration is as follows:
You can customize the configuration options according to your own needs:
;
false
When you enable checkSyntax
, Builder will perform the detection during production builds. If any incompatible advanced syntax is detected in the build artifacts, error logs will be printed to the terminal, and the current build process will be terminated.
The format of the error logs is as follows, including the source file, artifact location, error reason, and source code:
@@ -88,7 +88,7 @@Currently, syntax checking is implemented based on AST parser. Each time it performs a check, it can only identify the first incompatible syntax found in the file. If there are multiple incompatible syntaxes in the file, you need to fix the detected syntax and re-run the check.output.disableMinimize to true and rebuild again.
If the corresponding source location is not shown in the log, try setting
string[]
The browserslist configuration of the current project
targets
is the target browser range of the project. Its value is a standard browserslist array. If you are not familiar with the usage of browserslist, please refer to "Browserslist".
targets
is the target browser range of the project. Its value is a standard browserslist array. If you are not familiar with the usage of browserslist, please refer to "Browserslist".
Builder will read the value of targets
and automatically deduce the minimum ECMAScript syntax version that can be used in the build artifacts, such as ES5
or ES6
.
Builder will deduce that the ECMAScript syntax version that can be used with chrome >= 53
is ES6
. When the build artifacts contain ES2016
or higher syntax, it triggers syntax error prompts.
Please note that Builder does not support automatic analysis of syntax versions above ES6 based on targets
. If the syntax version compatible with your build artifacts exceeds ES6, please use checkSyntax.ecmaVersion
to set it.
At this time, the build artifacts can include all syntax supported by ES2020
, such as optional chaining.
This section describes configs related to source code parsing and compilation in Modern.js Builder.
;
Record<string, string | string[]> | Function
undefined
Create aliases to import or require certain modules, same as the resolve.alias config of webpack and Rspack.
-For TypeScript projects, you only need to configure compilerOptions.paths in the tsconfig.json
file. The Builder will automatically recognize it, so there is no need to configure the source.alias
option separately. For more details, please refer to Path Aliases.
+
Create aliases to import or require certain modules, same as the resolve.alias config of webpack and Rspack.
+For TypeScript projects, you only need to configure compilerOptions.paths in the tsconfig.json
file. The Builder will automatically recognize it, so there is no need to configure the source.alias
option separately. For more details, please refer to Path Aliases.
The alias
can be an Object, and the relative path will be automatically converted to absolute path.
With above configuration, if @common/Foo.tsx
is import in the code, it will be mapped to the <project>/src/common/Foo.tsx
path.
The alias
can be a function, it will accept the previous alias object, and you can modify it.
You can also return a new object as the final result in the function, which will replace the previous alias object.
By default, source.alias
will automatically match sub-paths, for example, with the following configuration:
It will match as follows:
You can add the $
symbol to enable exact matching, which will not automatically match sub-paths.
It will match as follows:
You can use alias
to resolve an npm package to a specific directory.
For example, if multiple versions of the react
are installed in the project, you can alias react
to the version installed in the root node_modules
directory to avoid bundling multiple copies of the React code.
When using alias to handle npm packages, please be aware of whether different major versions of the package are being used in the project.
For example, if a module or npm dependency in your project uses the React 18 API, and you alias React to version 17, the module will not be able to reference the React 18 API, resulting in code exceptions.
;
'prefer-tsconfig' | 'prefer-alias'
'prefer-tsconfig'
source.alias
:Since the tsconfig paths have a higher priority, the following will happen:
@common
will use the value defined in tsconfig paths, pointing to ./src/common-1
For example, if the following configurations are set at the same time:
source.alias
:Since the tsconfig paths are only used to provide types, only the @common
alias will be effective, pointing to the ./src/common-2
directory.
In most cases, you don't need to use prefer-alias
, but you can consider using it if you need to dynamically generate some alias configurations. For example, generating the alias
option based on environment variables:
;
The source.include
is used to specify additional JavaScript files that need to be compiled.
To avoid redundant compilation, by default, Rsbuild only compiles JavaScript files in the current directory and TypeScript and JSX files in all directories. It does not compile JavaScript files under node_modules.
-Through the source.include
config, you can specify directories or modules that need to be compiled by Rsbuild. The usage of source.include
is consistent with Rule.include in Rspack, which supports passing in strings or regular expressions to match the module path.
Through the source.include
config, you can specify directories or modules that need to be compiled by Rsbuild. The usage of source.include
is consistent with Rule.include in Rspack, which supports passing in strings or regular expressions to match the module path.
For example:
A typical usage scenario is to compile npm packages under node_modules, because some third-party dependencies have ES6+ syntax, which may cause them to fail to run on low-version browsers. You can solve the problem by using this config to specify the dependencies that need to be compiled.
Take query-string
as an example, you can add the following config:
The above two methods match the absolute paths of files using "path prefixes" and "regular expressions" respectively. It is worth noting that all referenced modules in the project will be matched. Therefore, you should avoid using overly loose values for matching to prevent compilation performance issues or compilation errors.
When you compile an npm package via source.include
, Builder will only compile the matching module by default, not the Sub Dependencies of the module.
When developing in Monorepo, if you need to refer to the source code of other libraries in Monorepo, you can add the corresponding library to source.include
:
Babel cannot compile CommonJS modules by default, and if you compile a CommonJS module, you may get a runtime error message exports is not defined
.
When you need to compile a CommonJS module using source.include
, you can set Babel's sourceType
configuration to unambiguous
.
Setting sourceType
to unambiguous
may have some other effects, please refer to Babel official documentation.
Setting sourceType
to unambiguous
may have some other effects, please refer to Babel official documentation.
If you match a module that is symlinked to the current project, then you need to match the real path of the module, not the symlinked path.
For example, if you symlink the packages/foo
path in Monorepo to the node_modules/foo
path of the current project, you need to match the packages/foo
path, not the node_modules/foo
path.
This behavior can be controlled via webpack's resolve.symlinks config.
+This behavior can be controlled via webpack's resolve.symlinks config.
Note that source.include
should not be used to compile the entire node_modules
directory. For example, the following usage is wrong:
If you compile the entire node_modules
, not only will the build time be greatly increased, but also unexpected errors may occur. Because most of the npm packages in node_modules
are already compiled, there is usually no need for a second compilation. In addition, exceptions may occur after npm packages such as core-js
are compiled.
;
Array<string | RegExp>
[]
Specifies JavaScript/TypeScript files that do not need to be compiled. The usage is consistent with Rule.exclude in webpack, which supports passing in strings or regular expressions to match the module path.
+Specifies JavaScript/TypeScript files that do not need to be compiled. The usage is consistent with Rule.exclude in webpack, which supports passing in strings or regular expressions to match the module path.
For example:
;
Record<string, unknown>
{}
For more information please visit webpack - DefinePlugin.
-When using Rspack as the bundler, the supported types can be found in Rspack.builtins.define. +
For more information please visit webpack - DefinePlugin.
+When using Rspack as the bundler, the supported types can be found in Rspack.builtins.define.
Expressions will be replaced with the corresponding code fragments:
;
Record<string, JSONValue> | Function
Used to define global variables. It can replace expressions like process.env.FOO
in your code after compile. Such as:
In the following example, the ENABLE_VCONSOLE
and APP_CONTEXT
are injected into the code:
You can use them directly in your code:
You can set source.globalVars
to a function to dynamically setting some environment variables.
For example, dynamically set according to the build target:
You can take source.globalVars
as the syntax sugar of source.define
, the only difference is that source.globalVars
will automatically stringify the value, which makes it easier to set the value of global variables. The values of globalVars
should be JSON-safe to ensure it can be serialized.
source.globalVars
injects environment variables through string replacement, so it cannot take effect on dynamic syntaxes such as destructuring.
When using destructuring assignment, Builder will not be able to determine whether the variable NODE_ENV
is associated with the expression process.env.NODE_ENV
to be replaced, so the following usage is invalid:
;
Array<string | Regexp> | Function
undefined
only support webpack
Restrict importing paths. After configuring this option, all source files can only import code from the specific paths, and import code from other paths is not allowed.
-First, we configure moduleScopes
to only include the src
directory:
Then we import the utils/a
module outside the src
directory in src/App.tsx
:
After compiling, there will be a reference path error:
If we configure the utils
directory in moduleScopes
, the error will disappear.
You can directly set several paths like this:
moduleScopes
also supports setting as a function, which can be modified instead of overriding the default value:
Used to import the code and style of the component library on demand, which is equivalent to babel-plugin-import.
-The difference between it and babel-plugin-import is that source.transformImport
is not coupled with Babel. Builder will automatically identify whether the currently used tools is Babel, SWC or Rspack, and apply the corresponding on-demand import configuration.
;
+Used to import the code and style of the component library on demand, which is equivalent to babel-plugin-import.
+The difference between it and babel-plugin-import is that source.transformImport
is not coupled with Babel. Builder will automatically identify whether the currently used tools is Babel, SWC or Rspack, and apply the corresponding on-demand import configuration.
When the Ant Design component library <= 4.x version is installed in the project, Builder will automatically add the following default configurations:
+When the Ant Design component library <= 4.x version is installed in the project, Builder will automatically add the following default configurations:
When the Arco Design component library is installed in the project, Builder will automatically add the following default configurations:
+}; +When the Arco Design component library is installed in the project, Builder will automatically add the following default configurations:
When you add configurations for antd
or @arco-design/web-react
, the priority will be higher than the default configurations mentioned above.
When using the above antd default configuration:
The source code is as follows:
-It will be transformed into:
You can manually set transformImport: false
to disable the default config.
For example, if you use externals
to avoid bundling antd, because transformImport
will convert the imported path of antd by default, the matching path changes and externals cannot take effect. At this time, you can disable transformImport
to avoid this problem.
Used to splice the transformed path, the splicing rule is ${libraryName}/${libraryDirectory}/${member}
, where member is the imported member.
Example:
-Out:
-boolean
true
, the path ${libraryName}/${libraryDirectory}/${member}/style
will be imported. If it is false
or undefined
, the style will not be imported.
When it is set to true
:
Out:
string
This configuration is used to splice the import path when importing styles. If this configuration is specified, the style
configuration option will be ignored. The spliced import path is ${libraryName}/${styleLibraryDirectory}/${member}
.
When it is set to styles
:
Out:
boolean
Whether to convert camelCase imports to kebab-case.
Example:
-Out:
boolean
Whether to convert import statements to default imports.
Example:
-Out:
((member: string) => string | undefined) | string
Customize the imported path after conversion. The input is the imported member. For example, configure it as (member) => `my-lib/${member}`
, which will convert import { foo } from 'bar'
to import foo from 'my-lib/foo'
.
When using Rspack to build, function configurations cannot be used, but you can use handlebars template strings. For the above function configuration, you can use the following template instead of my-lib/{{ member }}
, or use some built-in helper methods, such as my-lib/{{ kebabCase member }}
to convert it to kebab-case format. In addition to kebabCase, there are also camelCase, snakeCase, upperCase, and lowerCase that can be used.
When using Rspack to build, function configurations cannot be used, but you can use handlebars template strings. For the above function configuration, you can use the following template instead of my-lib/{{ member }}
, or use some built-in helper methods, such as my-lib/{{ kebabCase member }}
to convert it to kebab-case format. In addition to kebabCase, there are also camelCase, snakeCase, upperCase, and lowerCase that can be used.
((member: string) => string | undefined) | string
Customize the imported style path after conversion. The input is the imported member. For example, configure it as (member) => `my-lib/${member}`
, which will convert import { foo } from 'bar'
to import foo from 'my-lib/foo'
.
When using Rspack to build, function configurations cannot be used, but you can use handlebars template strings. For the above function configuration, you can use the following template instead of my-lib/{{ member }}
, or use some built-in helper methods, such as my-lib/{{ kebabCase member }}
to convert it to kebab-case format. In addition to kebabCase, there are also camelCase, snakeCase, upperCase, and lowerCase that can be used.
When using Rspack to build, function configurations cannot be used, but you can use handlebars template strings. For the above function configuration, you can use the following template instead of my-lib/{{ member }}
, or use some built-in helper methods, such as my-lib/{{ kebabCase member }}
to convert it to kebab-case format. In addition to kebabCase, there are also camelCase, snakeCase, upperCase, and lowerCase that can be used.
;
string | string[]
undefined
Add a script before the entry file of each page. This script will be executed before the page code. It can be used to execute global logics, such as injecting polyfills, setting global styles, etc.
First create a src/polyfill.ts
file:
Then configure src/polyfill.ts
to source.preEntry
:
Re-run the compilation and visit any page, you can see that the code in src/polyfill.ts
has been executed, and the I am a polyfill
is logged in the console.
You can also configure the global style through source.preEntry
, this CSS code will be loaded earlier than the page code, such as introducing a normalize.css
file:
You can add multiple scripts by setting preEntry
to an array, and they will be executed in array order:
;
string | Record<BuilderTarget, string>
undefined
Add a prefix to resolve.extensions.
+Add a prefix to resolve.extensions.
If multiple files share the same name but have different extensions, Builder will resolve the one with the extension listed first in the array and skip the rest.
-With the configuration above, the extensions array will become:
When import './foo'
in the code, the foo.web.js
file will be resolved first, then the foo.js
file.
When you build multiple targets at the same time, you can set different extension prefix for different targets. At this point, you need to set resolveExtensionPrefix
to an object whose key is the corresponding build target.
When import './foo'
in the code, the foo.node.js
file will be resolved for node target, and the foo.web.js
file will be resolved for web target.
;
undefined
This config will determine which field of package.json
you use to import the npm
module. Same as the resolve.mainFields config of webpack.
This config will determine which field of package.json
you use to import the npm
module. Same as the resolve.mainFields config of webpack.
When you build multiple targets at the same time, you can set different mainFields for different targets. At this point, you need to set resolveMainFields
to an object whose key is the corresponding build target.
For example to set different mainFields for web
and node
:
This section describes some low-level tools configurations in Modern.js Builder.
;
Object | Function
You can modify the config of autoprefixer by tools.autoprefixer
.
You can modify the config of autoprefixer by tools.autoprefixer
.
When tools.autoprefixer
is configured as Object
type, it is merged with the default config through Object.assign. For example:
When tools.autoprefixer
is a Function, the default config is passed as the first parameter and can be directly modified or returned as the final result. For example:
;
Object | Function
undefined
With tools.babel
you can modify the options of babel-loader.
With tools.babel
you can modify the options of babel-loader.
Please note the limitations of tools.babel
in the following usage scenarios:
tools.babel
option will significantly slow down the Rspack's build speed. This is because Rspack defaults to using SWC for compilation, and configuring Babel will cause the code to be compiled twice, resulting in additional compilation overhead.tools.babel
option will not take effect.When tools.babel
is of type Function
, the default Babel configuration will be passed as the first parameter. You can directly modify the configuration object or return an object as the final babel-loader
configuration.
The second parameter of the tools.babel
function provides some more convenient utility functions. Please continue reading the documentation below.
The above example is just for reference, usually you don't need to manually configure babel-plugin-import
, because the Builder already provides a more general source.transformImport
configuration.
When tools.babel
's type is Object
, the config will be shallow merged with default config by Object.assign
.
Note that Object.assign
is a shallow copy and will completely overwrite the built-in presets
or plugins
array, please use it with caution.
When tools.babel
is a Function, the tool functions available for the second parameter are as follows:
(presets: BabelPlugin[]) => void
(plugins: string | string[]) => void
(presets: string | string[]) => void
(options: PresetEnvOptions) => void
Modify the configuration of @babel/preset-env, the configuration you pass in will be shallowly merged with default config. For example:
+Modify the configuration of @babel/preset-env, the configuration you pass in will be shallowly merged with default config. For example:
(options: PresetReactOptions) => void
Modify the configuration of @babel/preset-react, the configuration you pass in will be shallowly merged with default config. For example:
+Modify the configuration of @babel/preset-react, the configuration you pass in will be shallowly merged with default config. For example:
Deprecated, please use source.include instead, both have the same functionality.
+Deprecated, please use source.include instead, both have the same functionality.
Deprecated, please use source.exclude instead, both have the same functionality.
+Deprecated, please use source.exclude instead, both have the same functionality.
After modifying the babel-loader
configuration through tools.babel
, you can view the final generated configuration in Builder debug mode.
After modifying the babel-loader
configuration through tools.babel
, you can view the final generated configuration in Builder debug mode.
First, enable debug mode by using the DEBUG=builder
parameter:
Then open the generated (webpack|rspack).config.web.js
file and search for the babel-loader
keyword to see the complete babel-loader
configuration.
;
Function | undefined
undefined
tools.bundlerChain
which is type of Function
. The function receives two parameters, the first is the original bundler chain object, and the second is an object containing some utils.
Bundler chain is a subset of webpack chain, which contains part of the webpack chain API that you can use to modify both webpack and Rspack configuration.
-Configurations modified via bundler chain will work on both webpack and Rspack builds. Note that the bundler chain only supports modifying the configuration of the non-differentiated parts of webpack and Rspack. For example, modifying the devtool configuration option (webpack and Rspack have the same devtool property value type), or adding an Rspack-compatible webpack plugin.
+Configurations modified via bundler chain will work on both webpack and Rspack builds. Note that the bundler chain only supports modifying the configuration of the non-differentiated parts of webpack and Rspack. For example, modifying the devtool configuration option (webpack and Rspack have the same devtool property value type), or adding an Rspack-compatible webpack plugin.
-
tools.bundlerChain
is executed earlier than tools.webpackChain / tools.webpack / tools.rspack and thus will be overridden by changes in others.
'development' | 'production' | 'test'
The env
parameter can be used to determine whether the current environment is development, production or test. For example:
boolean
The isProd
parameter can be used to determine whether the current environment is production. For example:
'web' | 'node' | 'modern-web' | 'web-worker'
The target
parameter can be used to determine the current environment. For example:
boolean
Determines whether the target environment is node
, equivalent to target === 'node'
.
boolean
Determines whether the target environment is web-worker
, equivalent to target === 'web-worker'
.
typeof import('html-webpack-plugin') | import('@rspack/plugin-html')
The HtmlPlugin instance in webpack or Rspack:
-Some common Chain IDs are predefined in the Builder, and you can use these IDs to locate the built-in Rule or Plugin.
-Please note that some of the rules or plugins listed below are not available by default. They will only be included in the Rspack or webpack configuration when you enable specific options or register certain plugins.
-For example, the RULE.STYLUS
rule exists only when the Stylus plugin is registered.
-
ID | -Description | -
---|---|
RULE.MJS |
-Rule for mjs |
-
RULE.CSS |
-Rule for css |
-
RULE.LESS |
-Rule for less |
-
RULE.SASS |
-Rule for sass |
-
RULE.STYLUS |
-Rule for stylus |
-
RULE.TOML |
-Rule for toml |
-
RULE.YAML |
-Rule for yaml |
-
RULE.WASM |
-Rule for WASM |
-
RULE.NODE |
-Rule for node |
-
ONE_OF.XXX
can match a certain type of rule in the rule array.
ID | -Description | -
---|---|
ONE_OF.SVG |
-Rules for SVG, automatic choice between data URI and separate file | -
ONE_OF.SVG_URL |
-Rules for SVG, output as a separate file | -
ONE_OF.SVG_INLINE |
-Rules for SVG, inlined into bundles as data URIs | -
ONE_OF.SVG_ASSETS |
-Rules for SVG, automatic choice between data URI and separate file | -
USE.XXX
can match a certain loader.
ID | -Description | -
---|---|
USE.LESS |
-correspond to less-loader |
-
USE.SASS |
-correspond to sass-loader |
-
USE.STYLUS |
-correspond to stylus-loader |
-
USE.VUE |
-correspond to vue-loader |
-
USE.TOML |
-correspond to toml-loader |
-
USE.YAML |
-correspond to yaml-loader |
-
USE.NODE |
-correspond to node-loader |
-
USE.SVGR |
-correspond to @svgr/webpack |
-
USE.POSTCSS |
-correspond to postcss-loader |
-
USE.RESOLVE_URL_LOADER_FOR_SASS |
-correspond to resolve-url-loader |
-
PLUGIN.XXX
can match a certain webpack plugin.
ID | -Description | -
---|---|
PLUGIN.HTML |
-correspond to HtmlPlugin , you need to splice the entry name when using: ${PLUGIN.HTML}-${entryName} |
-
PLUGIN.APP_ICON |
-correspond to AppIconPlugin |
-
PLUGIN.INLINE_HTML |
-correspond to InlineChunkHtmlPlugin |
-
PLUGIN.BUNDLE_ANALYZER |
-correspond to WebpackBundleAnalyzer |
-
PLUGIN.VUE_LOADER_PLUGIN |
-correspond to VueLoaderPlugin |
-
PLUGIN.AUTO_SET_ROOT_SIZE |
-correspond to automatically set root font size plugin in Builder | -
MINIMIZER.XXX
can match a certain minimizer.
ID | -Description | -
---|---|
MINIMIZER.JS |
-correspond to TerserWebpackPlugin or SwcJsMinimizerRspackPlugin |
-
MINIMIZER.CSS |
-correspond to CssMinimizerWebpackPlugin |
-
For usage examples, please refer to: WebpackChain usage examples.
+For more information, please refer to Rsbuild#tools.bundlerChain
;
Object | Function
only support webpack
The config of mini-css-extract-plugin can be modified through tools.cssExtract
.
The config of mini-css-extract-plugin can be modified through tools.cssExtract
.
When this value is an Object, it is merged with the default config via Object.assign. For example:
When the value a Function, the default config is passed in as the first parameter. You can modify the config object directly, or return an object as the final config. For example:
For more config details, please refer to mini-css-extract-plugin.
+}; +For more config details, please refer to mini-css-extract-plugin.
;
Object | Function
undefined
The config of css-loader can be modified through tools.cssLoader
. The default config is as follows:
The config of css-loader can be modified through tools.cssLoader
. The default config is as follows:
When using Rspack as the bundler, this configuration is only supported when set disableCssExtract is true.
-To modify CSS Modules configuration, it is recommended to use the output.cssModules configuration. +}
When using Rspack as the bundler, this configuration is only supported when set disableCssExtract is true.
+To modify CSS Modules configuration, it is recommended to use the output.cssModules configuration.
When this value is an Object, it is merged with the default config via deep merge. For example:
When the value is a Function, the default config is passed in as the first parameter. You can modify the config object directly, or return an object as the final config. For example:
;
Object
{}
The config of DevServer can be modified through tools.devServer
.
Modern.js does not directly use webpack-dev-server or @rspack/dev-server, but implement DevServer based on webpack-dev-middleware. +
Modern.js does not directly use webpack-dev-server or @rspack/dev-server, but implement DevServer based on webpack-dev-middleware.
webpack-dev-server
uses Express as the server-side framework. Modern.js does not use any framework, and the req
and res
in the above middleware are all native Node objects. Therefore, the Express middleware used in webpack-dev-server
may not be directly usable in Modern.js.
If you want to migrate the Express middleware used in webpack-dev-server
, you can use the following method to pass the Express app as middleware:
Array
The config of HMR client, which are usually used to set the WebSocket URL of HMR.
The config of devMiddleware. Current options is the subset of webpack-dev-middleware.
+} +The config of devMiddleware. Current options is the subset of webpack-dev-middleware.
Record<string, string>
boolean | ConnectHistoryApiFallbackOptions
For more options and information, see the connect-history-api-fallback documentation.
+}; +For more options and information, see the connect-history-api-fallback documentation.
boolean
true
Enable Hot Module Replacement feature.
+Enable Hot Module Replacement feature.
boolean | { key: string; cert: string }
boolean
undefined
It is possible to use some server api to meet special scenario requirements:
Record<string, string> | Record<string, ProxyDetail>
A request to /api/users will now proxy the request to http://localhost:3000/api/users.
+}; +A request to /api/users will now proxy the request to http://localhost:3000/api/users.
If you don't want /api to be passed along, we need to rewrite the path:
The DevServer Proxy makes use of the http-proxy-middleware package. Check out its documentation for more advanced usages.
+}; +The DevServer Proxy makes use of the http-proxy-middleware package. Check out its documentation for more advanced usages.
The full type definition of DevServer Proxy is:
In addition to the http-proxy-middleware option, we also support the bypass and context configuration:
boolean
mock/
, server/
, api/
.
;
false | Object | Function
The configs of html-webpack-plugin or @rspack/plugin-html can be modified through tools.htmlPlugin
.
The configs of html-webpack-plugin or @rspack/plugin-html can be modified through tools.htmlPlugin
.
When tools.htmlPlugin
is Object
type, the value will be merged with the default config via Object.assign
.
When tools.htmlPlugin
is a Function:
The built-in html-webpack-plugin
plugins can be disabled by set tools.htmlPlugin
to false
.
By default, Builder will compresses JavaScript/CSS code inside HTML during the production build to improve the page performance. This ability is often helpful when using custom templates or inserting custom scripts.
However, when output.enableInlineScripts
or output.enableInlineStyles
is turned on, inline JavaScript/CSS code will be repeatedly compressed, which will have a certain impact on build performance. You can modify the default minify behavior by modifying the tools.htmlPlugin.minify
configuration.
;
Object | Function
You can modify the config of less-loader via tools.less
.
You can modify the config of less-loader via tools.less
.
When tools.less
is configured as Object
type, it is merged with the default config through Object.assign in a shallow way. It should be noted that lessOptions
is merged through deepMerge in a deep way. For example:
When tools.less
is a Function, the default config is passed as the first parameter, which can be directly modified or returned as the final result. The second parameter provides some utility functions that can be called directly. For example:
In some scenarios, if you need to use a specific version of Less instead of the built-in Less v4 in Builder, you can install the desired Less version in your project and set it up using the implementation
option of the less-loader
.
(excludes: RegExp | RegExp[]) => void
;
Object | Function | undefined
When building for production, Builder will minimize the CSS code through css-minimizer-webpack-plugin. The config of css-minimizer-webpack-plugin can be modified via tools.minifyCss
.
When building for production, Builder will minimize the CSS code through css-minimizer-webpack-plugin. The config of css-minimizer-webpack-plugin can be modified via tools.minifyCss
.
When tools.minifyCss
is Object
type, it will be merged with the default config via Object.assign
.
For example, modify the preset
config of cssnano:
For example, modify the preset
config of cssnano:
When tools.minifyCss
is Function
type, the default config is passed in as the first parameter, the config object can be modified directly, or a value can be returned as the final result.
;
Object | Function
Builder integrates PostCSS by default, you can configure postcss-loader through tools.postcss
.
Builder integrates PostCSS by default, you can configure postcss-loader through tools.postcss
.
When the value is a Function, the internal default config is passed as the first parameter, and the config object can be modified directly without returning, or an object can be returned as the final result; the second parameter is a set of tool functions for modifying the postcss-loader config.
For example, you need to add a PostCSS plugin on the basis of the original plugin, and push a new plugin to the postcssOptions.plugins array:
When you need to pass parameters to the PostCSS plugin, you can pass them in by function parameters:
tools.postcss
can return a config object and completely replace the default config:
When this value is an Object, it is merged with the default config via Object.assign
. Note that Object.assign
is a shallow copy and will completely overwrite the built-in presets
or plugins
array, please use it with caution.
(plugins: PostCSSPlugin | PostCSSPlugin[]) => void
Builder uses the PostCSS v8 version. When you use third-party PostCSS plugins, please pay attention to whether the PostCSS version is compatible. Some legacy plugins may not work in PostCSS v8.
;
true | Object | Function | undefined
false
Configure the Pug template engine.
-Configure the Pug template engine.
+Pug template engine is not enabled by default, you can enable it by setting tools.pug
to true
.
When enabled, you can use index.pug
as the template file in html.template
config.
When tools.terser
is Object
type, you can passing the Pug options:
For detailed options, please refer to Pug API Reference.
-For detailed options, please refer to Pug API Reference.
+When tools.pug
is Function
type, the default configuration is passed in as the first parameter, the configuration object can be modified directly, or a value can be returned as the final result.
;
Object | Function
You can modify the config of sass-loader via tools.sass
.
You can modify the config of sass-loader via tools.sass
.
When tools.sass
is Object
type, it is merged with the default config through Object.assign. It should be noted that sassOptions
is merged through deepMerge in a deep way.
For example:
When tools.sass
is a Function, the default config is passed as the first parameter, which can be directly modified or returned as the final result. The second parameter provides some utility functions that can be called directly. For Example:
In some scenarios, if you need to use a specific version of Sass instead of the built-in Dart Sass v1 in Builder, you can install the desired Sass version in your project and set it up using the implementation
option of the sass-loader
.
(excludes: RegExp | RegExp[]) => void
;
Object | Function
{}
The config of style-loader can be set through tools.styleLoader
.
The config of style-loader can be set through tools.styleLoader
.
It is worth noting that Builder does not enable style-loader
by default. You can use output.disableCssExtract
config to enable it.
When this value is an Object, it is merged with the default config via Object.assign. For example:
When the value is a Function, the default config is passed in as the first parameter. You can modify the config object directly, or return an object as the final config. For example:
;
Object | Function
tools.styledComponents
config is corresponding to babel-plugin-styled-components, or @swc/plugin-styled-components when using SWC plugin.
tools.styledComponents
config is corresponding to babel-plugin-styled-components, or @swc/plugin-styled-components when using SWC plugin.
When the value is an Object, use the Object.assign function to merge with the default config. For example:
When the config is a Function, the first parameter is the default configuration, and the second parameter provides some utility functions that can be called directly:
The feature is enabled by default, and you can configure tools.styledComponents
to false
to disable this behavior, which can improve build performance:
;
Object | Function | undefined
only support webpack
When building for production, Builder will minimize the JavaScript code through terser-webpack-plugin. The config of terser-webpack-plugin can be modified via tools.terser
.
When building for production, Builder will minimize the JavaScript code through terser-webpack-plugin. The config of terser-webpack-plugin can be modified via tools.terser
.
When tools.terser
is Object
type, it will be merged with the default config via Object.assign
.
For example, to exclude some files from minification:
When tools.terser
is Function
type, the default config is passed in as the first parameter, the config object can be modified directly, or a value can be returned as the final result.
If you need to disable code minification, you can use the output.disableMinimize configuration. +};
If you need to disable code minification, you can use the output.disableMinimize configuration.
;
Object | Function | undefined
undefined
only support webpack
Using babel-loader or Rspack instead of ts-loader can significantly improve compilation speed and provide better extendability.
-ts-loader cannot be used with certain features such as source.transformImport and tools.styledComponents provided by Babel & SWC. +
Using babel-loader or Rspack instead of ts-loader can significantly improve compilation speed and provide better extendability.
+ts-loader cannot be used with certain features such as source.transformImport and tools.styledComponents provided by Babel & SWC.
ts-loader
is not enabled by default in the project. When tools.tsLoader
is not undefined, builder will use ts-loader instead of babel-loader to compile TypeScript code.
When this value is an Object, it is merged with the default configuration via Object.assign.
The default configuration is as follows:
You can override the default configuration via the tools.tsLoader
configuration option:
When this value is a Function, the default configuration is passed in as the first parameter, the configuration object can be modified directly, or an object can be returned as the final configuration.The second parameter is the util functions to modify the ts-loader
configuration. For example:
Deprecated, please use source.include instead, both have the same functionality.
-Deprecated, please use source.exclude instead, both have the same functionality.
+}; +Deprecated, please use source.include instead, both have the same functionality.
+Deprecated, please use source.exclude instead, both have the same functionality.
;
Object | Function
By default, the fork-ts-checker-webpack-plugin is enabled for type checking. You can use output.disableTsChecker
config to disable it.
By default, the fork-ts-checker-webpack-plugin is enabled for type checking. You can use output.disableTsChecker
config to disable it.
When the value of tsChecker
is of type Object, it will be deeply merged with the default configuration.
When the value of tsChecker
is of type Function, the default configuration will be passed as the first argument. You can directly modify the configuration object or return an object as the final configuration.
;
Object | Function | undefined
undefined
only support webpack
tools.webpack
is used to configure webpack.
tools.webpack
is used to configure webpack.
-
tools.bundlerChain
is also used to modify the webpack configuration, and the function is more powerful. It is recommended to usetools.bundlerChain
first.
tools.webpack
can be configured as an object to be deep merged with the built-in webpack configuration through webpack-merge.
tools.webpack
can be configured as an object to be deep merged with the built-in webpack configuration through webpack-merge.
For example, add resolve.alias
configuration:
tools.webpack
can be configured as a function. The first parameter of this function is the built-in webpack configuration object, you can modify this object, and then return it. For example:
The object returned by the tools.webpack
function is used directly as the final webpack configuration and is not merged with the built-in webpack configuration.
boolean
'web' | 'node' | 'modern-web' | 'web-worker'
boolean
boolean
typeof import('webpack')
typeof import('html-webpack-plugin')
(rules: RuleSetRule | RuleSetRule[]) => void
Add additional webpack rules.
+Add additional webpack rules.
For example:
(plugins: WebpackPluginInstance | WebpackPluginInstance[]) => void
(plugins: WebpackPluginInstance | WebpackPluginInstance[]) => void
(name: string) => void
Remove the internal webpack plugin, the parameter is the constructor.name
of the plugin.
For example, remove the internal fork-ts-checker-webpack-plugin:
+For example, remove the internal fork-ts-checker-webpack-plugin:
(...configs: WebpackConfig[]) => WebpackConfig
Used to merge multiple webpack configs, same as webpack-merge.
+Used to merge multiple webpack configs, same as webpack-merge.
(name: string) => string
Get the path to the builder built-in dependencies, same as webpackChain#getCompiledPath.
+Get the path to the builder built-in dependencies, same as webpackChain#getCompiledPath.
;
Function | undefined
undefined
tools.webpackChain
is executed earlier than tools.webpack and thus will be overridden by changes in tools.webpack
.
'development' | 'production' | 'test'
boolean
'web' | 'node' | 'modern-web' | 'web-worker'
boolean