CINXE.COM

<!DOCTYPE html><html lang="zh-cmn-Hans"><head><title data-rh="true">webpack</title><meta data-rh="true" charset="utf-8"/><meta data-rh="true" name="theme-color" content="#2B3A42"/><meta data-rh="true" name="viewport" content="width=device-width, initial-scale=1"/><meta data-rh="true" name="description" content="webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换、打包或包裹任何资源。"/><meta data-rh="true" property="og:site_name" content="webpack"/><meta data-rh="true" property="og:type" content="website"/><meta data-rh="true" property="og:title" content="webpack"/><meta data-rh="true" property="og:description" name="description" content="webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换、打包或包裹任何资源。"/><meta data-rh="true" property="og:image" content="https://webpack.js.org/icon-pwa-512x512.d3dae4189855b3a72ff9.png"/><meta data-rh="true" property="twitter:card" content="summary"/><meta data-rh="true" property="twitter:site" content="@webpack"/><meta data-rh="true" property="twitter:creator" content="@webpack"/><meta data-rh="true" property="twitter:domain" content="https://webpack.js.org/"/><meta data-rh="true" name="keywords" content="webpack5, webpack, webpack 中文文档, webpack 官方中文, webpack 5 官方中文, 印记中文, docschina, docschina.org, webpack.docschina.org, doc.react-china.org, nodejs.cn, vue.docschina.org, babel.docschina.org, parceljs.docschina.org, rollup.docschina.org, koajs.docschina.org"/><meta data-rh="true" name="mobile-web-app-capable" content="yes"/><meta data-rh="true" name="apple-mobile-web-app-capable" content="yes"/><meta data-rh="true" name="apple-mobile-web-app-status-bar-style" content="black"/><meta data-rh="true" name="apple-mobile-web-app-title" content="webpack"/><meta data-rh="true" name="msapplication-TileImage" content="/icon_150x150.png"/><meta data-rh="true" name="msapplication-TileColor" content="#465e69"/><link data-rh="true" rel="icon" type="image/x-icon" href="/favicon.f326220248556af65f41.ico"/><link data-rh="true" rel="manifest" href="/manifest.json"/><link data-rh="true" rel="canonical" href="https://webpack.docschina.org/"/><link data-rh="true" rel="icon" sizes="192x192" href="/icon_192x192.png"/><link data-rh="true" rel="icon" sizes="512x512" href="/icon_512x512.png"/><link data-rh="true" rel="apple-touch-icon" href="/icon_180x180.png"/><link data-rh="true" rel="mask-icon" href="/logo-on-white-bg.47eff95f9c01c5972f6f.svg" color="#465e69"/><link rel="stylesheet" href=/index.c114afea0778b47a418a.css /><link rel="stylesheet" href=/9517.acfe42251eae743e4e22.css /></head><body><div id="root"><div class="site"><div class="site__header"><header class="bg-blue-800 dark:bg-gray-900"><div class="flex items-center py-10 px-[16px] justify-between md:px-[24px] md:max-w-[1024px] md:mx-auto md:justify-start"><button class="bg-transparent border-none md:hidden"><svg viewBox="-62 138 25 25" width="20" height="20" class="fill-current text-white"><path fill="currentColor" d="M-60.2 140.2h20.9c1 0 1.8.8 1.8 1.8s-.8 1.8-1.8 1.8h-20.9c-1 0-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8M-60.2 148.7h20.9c1 0 1.8.8 1.8 1.8s-.8 1.8-1.8 1.8h-20.9c-1 0-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8M-60.2 157.2h20.9c1 0 1.8.8 1.8 1.8s-.8 1.8-1.8 1.8h-20.9c-1 0-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8"></path></svg></button><a class="md:mr-auto" href="/"><img class="logo" src="/site-logo.1fcab817090e78435061.svg" alt="webpack logo" width="122" height="35"/></a><nav class="hidden md:inline-grid md:grid-flow-col md:gap-x-[18px]"><a class="text-gray-100 dark:text-gray-100 text-sm font-light uppercase hover:text-blue-200" href="/concepts/">中文文档</a><a class="text-gray-100 dark:text-gray-100 text-sm font-light uppercase hover:text-blue-200" href="/contribute/">参与贡献</a><a class="text-gray-100 dark:text-gray-100 text-sm font-light uppercase hover:text-blue-200" href="/blog/">博客</a><a href="https://docschina.org" target="_blank" rel="noopener noreferrer" class="text-gray-100 dark:text-gray-100 text-sm font-light uppercase hover:text-blue-200">印记中文</a><a href="https://github.com/webpack/webpack" target="_blank" rel="noopener noreferrer" class="inline-flex items-center text-gray-100 dark:text-gray-200 hover:text-blue-200" title="webpack on GitHub"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" width="16"><path d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 6.8 9.5c.5 0 .7-.2.7-.5v-1.7C6.7 20 6.1 18 6.1 18c-.4-1.2-1-1.5-1-1.5-1-.6 0-.6 0-.6 1 0 1.5 1 1.5 1 .9 1.6 2.4 1.1 3 .9 0-.7.3-1.1.6-1.4-2.2-.2-4.6-1-4.6-4.9 0-1.1.4-2 1-2.7 0-.3-.4-1.3.2-2.7 0 0 .8-.2 2.7 1a9.4 9.4 0 0 1 5 0c2-1.2 2.8-1 2.8-1 .5 1.4.1 2.4 0 2.7.7.7 1 1.6 1 2.7 0 3.8-2.3 4.7-4.5 5 .4.2.7.8.7 1.8V21c0 .3.2.6.7.5 4-1.3 6.8-5 6.8-9.5A10 10 0 0 0 12 2"></path></svg></a><a href="https://twitter.com/webpack" target="_blank" rel="noopener noreferrer" class="inline-flex items-center text-gray-100 dark:text-gray-200 hover:text-blue-200" title="webpack on Twitter"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" aria-hidden="true" fill="currentColor" width="16"><path d="M28 6.937c-.957.425-1.985.711-3.064.84a5.343 5.343 0 0 0 2.345-2.951 10.696 10.696 0 0 1-3.388 1.295 5.334 5.334 0 0 0-9.089 4.864A15.143 15.143 0 0 1 3.809 5.411a5.321 5.321 0 0 0-.721 2.683 5.33 5.33 0 0 0 2.372 4.439 5.323 5.323 0 0 1-2.416-.667v.067a5.335 5.335 0 0 0 4.279 5.23 5.336 5.336 0 0 1-2.409.092 5.34 5.34 0 0 0 4.983 3.705 10.699 10.699 0 0 1-6.625 2.284c-.43 0-.855-.025-1.273-.075a15.102 15.102 0 0 0 8.177 2.396c9.812 0 15.176-8.128 15.176-15.177 0-.231-.005-.461-.015-.69A10.855 10.855 0 0 0 28 6.937z"></path></svg></a><a href="https://stackoverflow.com/questions/tagged/webpack" target="_blank" rel="noopener noreferrer" class="inline-flex items-center text-gray-100 dark:text-gray-200 hover:text-blue-200" title="webpack on StackOverflow"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" width="16"><path d="M17.4 20.2v-5.4h1.8V22H3v-7.2h1.8v5.4zM6.8 14.3l.3-1.7 8.8 1.8-.3 1.8zm1.1-4.2.8-1.6 8.1 3.8-.7 1.6zm2.3-4 1.1-1.4 7 5.8-1.2 1.4L10 6m4.7-4L20 9l-1.4 1-5.4-7 1.4-1m-8 16.5v-1.8h9v1.8z"></path></svg></a><nav class="dropdown "><button aria-haspopup="true" aria-expanded="false" aria-label="Select language"><svg viewBox="0 0 610 560" xmlns="http://www.w3.org/2000/svg" class="dropdown__language text-gray-100 hover:text-blue-200 transition-colors duration-200"><path d="m304.8 99.2-162.5-57.3v353.6l162.5-52.6z"></path><path d="m300.9 99 168.7-57.3v353.6l-168.7-52.5zm-200.7 358.4 200.7-66.9v-291.5l-200.7 66.9z" fill="currentColor"></path><path d="m392.4 461.8 28.4 46.8 15-43.5zm-223.9-262.3c-1.1-1 1.4 8.6 4.8 12 6.1 6.1 10.8 6.9 13.3 7 5.6.2 12.5-1.4 16.5-3.1s10.9-5.2 13.5-10.4c.6-1.1 2.1-3 1.1-7.5-.7-3.5-3-4.8-5.7-4.6s-11 2.4-15 3.6-12.2 3.7-15.8 4.5-11.5-.3-12.7-1.5zm101.2 114.8c-1.6-.6-34.3-14.1-38.9-16.4a368 368 0 0 0 -17.5-7.5c12.3-19 20.1-33.4 21.2-35.6 1.9-4 15-29.5 15.3-31.1s.7-7.5.4-8.9-5.1 1.3-11.6 3.5-18.9 10.2-23.7 11.2-20.1 6.8-28 9.4c-7.8 2.6-22.7 7.1-28.8 8.8-6.1 1.6-11.4 1.8-14.9 2.8 0 0 .5 4.8 1.4 6.2s4.1 5 7.9 5.9c3.8 1 10 .6 12.8-.1s7.7-3.1 8.4-4.1c.7-1.1-.3-4.3.8-5.3s16.1-4.5 21.7-6.2 27.2-9.2 30.1-8.8a916 916 0 0 1 -23.9 47.7 821 821 0 0 1 -45 63.3c-5.3 6-18 21.5-22.4 25 1.1.3 9-.4 10.4-1.3 8.9-5.5 23.8-24.1 28.6-29.7a489.1 489.1 0 0 0 36.7-49.4c1.9.8 17.6 13.6 21.7 16.4a293 293 0 0 0 23.7 13.3c3.5 1.5 16.9 7.7 17.5 5.6.7-1.8-2.3-14.1-3.9-14.7z"></path><path clip-rule="evenodd" d="m194.1 484.7a204.9 204.9 0 0 0 30.7 14.5 233.6 233.6 0 0 0 46.4 12c.5 0 16 1.9 19.2 1.9h15.7c6.1-.5 11.8-.9 17.9-1.7 4.9-.7 10.3-1.6 15.5-2.8 3.8-.9 7.8-1.7 11.7-3 3.7-1 7.8-2.4 11.8-3.8l8.2-3.1c2.3-1 5.1-2.3 7.7-3.3a243 243 0 0 0 19.2-10c2.3-1.2 7.5-5.2 10.3-5.2 3.1 0 5.2 2.8 5.2 5.2 0 5.1-6.8 6.6-9.9 8.9-3.3 2.3-7.3 4-10.8 5.9-7 3.7-14.1 6.8-20.9 9.4a251 251 0 0 1 -27.3 8.5c-3.3.7-6.6 1.6-9.9 2.1-1.7.3-19.9 3.1-24.9 3.1h-23a293.9 293.9 0 0 1 -35.1-5.2 196 196 0 0 1 -33.1-10.3c-12-4.5-24.6-10.5-36.4-18.3-2.1-1.4-2.3-2.8-2.3-4.4a5 5 0 0 1 5.1-5.1c2.4.1 8 4.2 9 4.7zm101.4-98.1-189.9 63.2v-280.1l189.9-63.2zm10.6-288.3v292.7a6 6 0 0 1 -1.2 2.6c-.3.5-1 1.2-1.6 1.4a14621 14621 0 0 1 -203.1 67.6c-2.1 0-4-1.4-5.1-3.7 0-.2-.2-.3-.2-.7v-292.8c.3-.9.5-2.1 1.2-2.8 1.4-1.9 3.8-2.3 5.4-2.8 3-1 196.1-65.8 198.9-65.8 1.9 0 5.7 1.2 5.7 4.3z" fill-rule="evenodd"></path><path clip-rule="evenodd" d="m464.3 388-158-49.1v-236l158-53.7zm10.6-345.8v352.4c-.2 4-3 5.7-5.6 5.7-2.3 0-18.6-5.6-21.4-6.4l-65.8-20.4-14.6-4.7-12.9-4c-18.6-5.7-37.6-11.5-56.3-17.8-.7-.2-2.4-2.6-2.4-3.1v-246.1c.3-.9.7-1.9 1.6-2.6 1.4-1.6 61.1-21.4 84.7-29.3 6.3-2.3 84.8-29.3 87.3-29.3 3 .1 5.4 2.3 5.4 5.6z" fill-rule="evenodd"></path><path d="m515 461.8-211.1-67.3.9-292.8 210.2 66.9z"></path><path clip-rule="evenodd" d="m408.6 232.5-20.7 50.1 38.1 11.5zm-12.4-47.2 27.2 8.2 49.5 178.6-27.9-8.5-10-36.7-57.7-17.5-12.4 29.9-27.9-8.5z" fill="currentColor" fill-rule="evenodd"></path></svg><i aria-hidden="true" class="dropdown__arrow"></i></button><div class="dropdown__list "><ul><li><a href="https://webpack.js.org/" class="px-5 block"><span>English</span></a></li><li><a href="https://webpack.docschina.org/" class="px-5 block"><span lang="zh">中文</span></a></li><li><a href="https://webpack.kr/" class="px-5 block"><span lang="ko">한국어</span></a></li></ul></div></nav></nav><div class="inline-flex items-center ml-[18px]"><button aria-label="Switch to dark theme" class="bg-transparent border-none cursor-pointer text-[16px] p-0 inline-flex items-center text-gray-100 hover:text-blue-200 transition-colors duration-200" data-testid="hello-darkness"><svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 18.1406C11.6016 18.1406 11.2782 18.464 11.2782 18.8624V21.0281C11.2782 21.4265 11.6016 21.7499 12 21.7499C12.3985 21.7499 12.7219 21.4265 12.7219 21.0281V18.8624C12.7219 18.464 12.3985 18.1406 12 18.1406V18.1406Z" fill="currentColor"></path><path d="M12 2.25006C11.6016 2.25006 11.2782 2.5735 11.2782 2.97194V5.13756C11.2782 5.536 11.6016 5.85944 12 5.85944C12.3985 5.85944 12.7219 5.536 12.7219 5.13756V2.97194C12.7219 2.5735 12.3985 2.25006 12 2.25006V2.25006Z" fill="currentColor"></path><path d="M5.85936 12C5.85936 11.6015 5.53592 11.2781 5.13749 11.2781H2.97186C2.57342 11.2781 2.24999 11.6015 2.24999 12C2.24999 12.3984 2.57342 12.7218 2.97186 12.7218H5.13749C5.53592 12.7218 5.85936 12.3984 5.85936 12V12Z" fill="currentColor"></path><path d="M21.0281 11.2781H18.8625C18.4641 11.2781 18.1406 11.6015 18.1406 12C18.1406 12.3984 18.4641 12.7218 18.8625 12.7218H21.0281C21.4266 12.7218 21.75 12.3984 21.75 12C21.75 11.6015 21.4266 11.2781 21.0281 11.2781V11.2781Z" fill="currentColor"></path><path d="M7.14841 16.1298C6.95622 16.1298 6.77341 16.2048 6.63747 16.3407L5.10466 17.8735C4.96872 18.0094 4.89372 18.1923 4.89372 18.3844C4.89372 18.5766 4.96872 18.7594 5.10466 18.8954C5.2406 19.0313 5.42341 19.1063 5.6156 19.1063C5.80779 19.1063 5.9906 19.0313 6.12654 18.8954L7.65935 17.3626C7.9406 17.0813 7.9406 16.6219 7.65935 16.3407C7.52341 16.2048 7.3406 16.1298 7.14841 16.1298V16.1298Z" fill="currentColor"></path><path d="M16.8516 7.87036C17.0437 7.87036 17.2266 7.79536 17.3625 7.65942L18.8953 6.12661C19.0312 5.99067 19.1062 5.80786 19.1062 5.61567C19.1062 5.42349 19.0312 5.24067 18.8953 5.10474C18.7594 4.9688 18.5766 4.8938 18.3844 4.8938C18.1922 4.8938 18.0094 4.9688 17.8734 5.10474L16.3406 6.63755C16.2047 6.77349 16.1297 6.9563 16.1297 7.14849C16.1297 7.34067 16.2047 7.52349 16.3406 7.65942C16.4766 7.79536 16.6594 7.87036 16.8516 7.87036V7.87036Z" fill="currentColor"></path><path d="M6.12654 5.10474C5.9906 4.9688 5.80779 4.8938 5.6156 4.8938C5.42341 4.8938 5.2406 4.9688 5.10466 5.10474C4.96872 5.24067 4.89372 5.42349 4.89372 5.61567C4.89372 5.80786 4.96872 5.99067 5.10466 6.12661L6.63747 7.65942C6.77341 7.79536 6.95622 7.87036 7.14841 7.87036C7.3406 7.87036 7.52341 7.79536 7.65935 7.65942C7.79529 7.52349 7.87029 7.34067 7.87029 7.14849C7.87029 6.9563 7.79529 6.77349 7.65935 6.63755L6.12654 5.10474V5.10474Z" fill="currentColor"></path><path d="M17.3625 16.3407C17.2266 16.2048 17.0437 16.1298 16.8516 16.1298C16.6594 16.1298 16.4766 16.2048 16.3406 16.3407C16.0594 16.6219 16.0594 17.0813 16.3406 17.3626L17.8734 18.8954C18.0094 19.0313 18.1922 19.1063 18.3844 19.1063C18.5766 19.1063 18.7594 19.0313 18.8953 18.8954C19.0312 18.7594 19.1062 18.5766 19.1062 18.3844C19.1062 18.1923 19.0312 18.0094 18.8953 17.8735L17.3625 16.3407V16.3407Z" fill="currentColor"></path><path d="M12 7.5C9.52031 7.5 7.5 9.52031 7.5 12C7.5 14.4797 9.52031 16.5 12 16.5C14.4797 16.5 16.5 14.4797 16.5 12C16.5 9.52031 14.4797 7.5 12 7.5Z" fill="currentColor"></path></svg></button><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></header></div><div class="splash"><section class="splash-viz dark:bg-gray-900"><h1 class="splash-viz__heading"><span> 构建你的</span><div class="text-rotater"><div class="text-rotater__wrap" style="height:0;width:110px"><span> assets </span><span> scripts </span></div></div></h1><div class="splash-viz__modules"> <svg viewBox="0 0 1088 615" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke-width="1" fill="none" fill-rule="evenodd"> <text font-family="'Source Sans Pro', sans-serif" font-size="18" font-weight="600" fill="#86A5BA"> <tspan x="933.778" y="459">静态资源</tspan> </text> <g transform="translate(1002, 326)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-1"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="84" height="84" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="18.891" y="46.7096774">.png</tspan> </text> </g> <g transform="translate(1002, 214)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-2"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="84" height="84" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="22.532" y="46.7096774">.css</tspan> </text> </g> <g transform="translate(894, 326)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-3"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="84" height="84" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="21.817" y="46.7096774">.jpg</tspan> </text> </g> <g transform="translate(894, 214)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-4"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="84" height="84" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="29" y="46.7096774">.js</tspan> </text> </g> <g transform="translate(342, 225)" stroke="#7E8C94" stroke-width="4"> <path d="M499.558824,86.52 C499.558824,86.52 484.852941,81.02 439.908088,109.436667 C394.963235,137.853333 380.992647,164.436667 380.992647,164.436667" stroke-dasharray="7"></path> <path d="M499.558824,86.0616667 C499.558824,86.0616667 484.852941,91.5616667 439.908088,63.145 C394.963235,34.7283333 380.992647,8.145 380.992647,8.145" stroke-dasharray="7"></path> <path d="M0.477941176,170.395 C0.477941176,170.395 169.382939,98.895 447.847936,98.895" stroke-dasharray="6"></path> <path d="M0.477941176,72.395 C0.477941176,72.395 169.382939,0.895 447.847936,0.895" stroke-dasharray="6" transform="translate(224.162939, 36.645000) scale(1, -1) translate(-224.162939, -36.645000) "></path> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="18" font-weight="600" fill="#86A5BA"> <tspan x="24.934" y="562">模块依赖</tspan> </text> <g transform="translate(228, 335)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-5"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="12.817" y="38">.jpg</tspan> </text> </g> <g transform="translate(228, 223)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-6"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="9.891" y="38">.png</tspan> </text> </g> <g transform="translate(302, 414.500000) scale(1, -1) translate(-302, -414.500000) translate(182, 404)"> <rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect> <rect fill="#BBDBEC" x="76" y="6" width="2" height="12"></rect> <rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect> <rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect> <polyline stroke="#BBDBEC" stroke-width="2" points="80 12 77 20.8000002 74 12"></polyline> </g> <g transform="translate(116, 391)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-7"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="8.076" y="38">.sass</tspan> </text> </g> <g transform="translate(116, 279)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-8"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="8.076" y="38">.sass</tspan> </text> </g> <g transform="translate(182, 201)"> <rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect> <rect fill="#BBDBEC" x="76" y="113" width="2" height="12"></rect> <rect fill="#BBDBEC" transform="translate(75.304690, 111.704683) rotate(-45) translate(-75.304690, -111.704683) " x="74.3046896" y="108.879683" width="2" height="5.6500001"></rect> <rect fill="#BBDBEC" x="26" y="109" width="48" height="2"></rect> <rect fill="#BBDBEC" transform="translate(24.704683, 108.304690) rotate(-45) translate(-24.704683, -108.304690) " x="23.7046835" y="105.47969" width="2" height="5.6500001"></rect> <rect fill="#BBDBEC" x="22" y="6" width="2" height="101"></rect> <rect fill="#BBDBEC" transform="translate(21.304690, 4.704683) rotate(-45) translate(-21.304690, -4.704683) " x="20.3046896" y="1.87968342" width="2" height="5.6500001"></rect> <rect fill="#BBDBEC" x="2" y="2" width="18" height="2"></rect> <polyline stroke="#BBDBEC" stroke-width="2" points="80 118 77 126.8 74 118"></polyline> </g> <g transform="translate(182, 189)"> <rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect> <rect fill="#BBDBEC" x="76" y="6" width="2" height="19"></rect> <rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect> <rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect> <polyline stroke="#BBDBEC" stroke-width="2" points="80 18 77 26.8000002 74 18"></polyline> </g> <g transform="translate(116, 167)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-9"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="20" y="38">.js</tspan> </text> </g> <g transform="translate(110, 470.500000) scale(1, -1) translate(-190, -470.500000) translate(150, 460)"> <rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect> <rect fill="#BBDBEC" x="76" y="6" width="2" height="12"></rect> <rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect> <rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect> <polyline stroke="#BBDBEC" stroke-width="2" points="80 12 77 20.8000002 74 12"></polyline> </g> <g transform="translate(4, 447)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-10"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="8.076" y="38">.sass</tspan> </text> </g> <g transform="translate(70, 363)"> <rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect> <rect fill="#BBDBEC" x="76" y="6" width="2" height="12"></rect> <rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect> <rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect> <polyline stroke="#BBDBEC" stroke-width="2" points="80 12 77 20.8000002 74 12"></polyline> </g> <g transform="translate(4, 335)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-11"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="15.38" y="38">.cjs</tspan> </text> </g> <g transform="translate(38, 307)"> <rect fill="#BBDBEC" x="0" y="22" width="6" height="2"></rect> <rect fill="#BBDBEC" x="2" y="6" width="2" height="16"></rect> <rect fill="#BBDBEC" transform="translate(4.704683, 4.704683) rotate(45) translate(-4.704683, -4.704683) " x="3.70468347" y="1.87968342" width="2" height="5.6500001"></rect> <rect fill="#BBDBEC" x="6" y="2" width="62" height="2"></rect> <polyline stroke="#BBDBEC" stroke-width="2" transform="translate(66.400000, 3) rotate(270) translate(-66.400000, -3) " points="69.4000001 -1.4000001 66.4000001 7.4000001 63.4000001 -1.4000001"></polyline> </g> <g transform="translate(26, 289)"> <polyline stroke="#BBDBEC" stroke-width="2" points="6 30 3 38.8000002 0 30"></polyline> <rect fill="#BBDBEC" x="2" y="0" width="2" height="39"></rect> <rect fill="#BBDBEC" x="0" y="0" width="6" height="2"></rect> </g> <g transform="translate(110, 246.500000) scale(1, -1) translate(-190, -246.500000) translate(150, 236)"> <rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect> <rect fill="#BBDBEC" x="76" y="6" width="2" height="12"></rect> <rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect> <rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect> <polyline stroke="#BBDBEC" stroke-width="2" points="80 12 77 20.8000002 74 12"></polyline> </g> <g transform="translate(4, 223)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-12"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="10.947" y="38">.hbs</tspan> </text> </g> <g transform="translate(32, 177)"> <polyline stroke="#BBDBEC" stroke-width="2" points="6 30 3 38.8000002 0 30"></polyline> <rect fill="#BBDBEC" x="2" y="0" width="2" height="39"></rect> <rect fill="#BBDBEC" x="0" y="0" width="6" height="2"></rect> </g> <g transform="translate(4, 111)"> <g> <use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-13"></use> <rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect> </g> <text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF"> <tspan x="20" y="38">.js</tspan> </text> </g> </g> </svg></div><div class="cube__container splash-viz__cube" style="width:180px;height:180px;padding-left:70.58823529411765px"><span class="cube cube--dark" style="width:120px;padding-bottom:60px"><figure class="cube__outer" style="width:120px;height:120px;transform:translateX(-50%) scale3d(1,1,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg)"><section class="cube__face" style="transform:rotateX(0deg) translateZ(60px);border-top-width:1px;border-right-width:6px;border-bottom-width:6px;border-left-width:1px"></section><section class="cube__face" style="transform:rotateX(-90deg) translateZ(60px);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px"></section><section class="cube__face" style="transform:rotateX(90deg) translateZ(60px);border-top-width:6px;border-right-width:6px;border-bottom-width:1px;border-left-width:1px"></section><section class="cube__face" style="transform:rotateY(-90deg) translateZ(60px);border-top-width:1px;border-right-width:1px;border-bottom-width:6px;border-left-width:6px"></section><section class="cube__face" style="transform:rotateY(90deg) translateZ(60px);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px"></section><section class="cube__face" style="transform:rotateY(180deg) translateZ(60px);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px"></section></figure><figure class="cube__inner" style="width:120px;height:120px;transform:translateX(-50%) scale3d(0.5,0.5,0.5) rotateX(0deg) rotateY(0deg) rotateZ(0deg)"><section class="cube__face" style="transform:rotateX(0deg) translateZ(60px)"></section><section class="cube__face" style="transform:rotateX(-90deg) translateZ(60px)"></section><section class="cube__face" style="transform:rotateX(90deg) translateZ(60px)"></section><section class="cube__face" style="transform:rotateY(-90deg) translateZ(60px)"></section><section class="cube__face" style="transform:rotateY(90deg) translateZ(60px)"></section><section class="cube__face" style="transform:rotateY(180deg) translateZ(60px)"></section></figure></span></div></section><div class="splash__section splash__section--dark page__content"><div class="container "><div class="markdown"><h2><span id="write-your-code"></span>编写代码<a href="#write-your-code" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2><div class="splash__wrap"><div class="splash__left"><p><strong>src/index.js</strong></p><pre><code class="hljs language-js"><span class="token keyword">import</span> bar <span class="token keyword">from</span> <span class="token string">'./bar.js'</span><span class="token punctuation">;</span> <span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="splash__right"><p><strong>src/bar.js</strong></p><pre><code class="hljs language-js"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//</span> <span class="token punctuation">}</span></code></pre></div></div><h2><span id="bundle-it"></span>构建<a href="#bundle-it" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2><div class="splash__wrap"><div class="splash__left"><p><strong><a href="https://youtu.be/3Nv9muOkb6k?t=21293">不使用配置</a></strong> 或提供自定义的 <strong>webpack.config.js</strong></p><pre><code class="hljs language-js"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span> entry<span class="token operator">:</span> <span class="token string">'./src/index.js'</span><span class="token punctuation">,</span> output<span class="token operator">:</span> <span class="token punctuation">{</span> path<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'dist'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> filename<span class="token operator">:</span> <span class="token string">'bundle.js'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div><div class="splash__right"><p><strong>page.html</strong></p><pre><code class="hljs language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dist/bundle.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre></div></div><p>在控制台运行 <code>webpack</code> 命令，生成 <code>bundle.js</code>。</p><h2><span id="awesome-isnt-it-lets-dive-in"></span>深入学习<a href="#awesome-isnt-it-lets-dive-in" aria-hidden="true" tabindex="-1"><span class="header-link"></span></a></h2><p><strong><a href="/guides/getting-started">快速开始</a><strong>部分在</strong>指南</strong>章节，如果有兴趣深入学习，可以查阅 <strong><a href="/concepts">概念</a></strong> 章节，以了解 webpack 的核心概念以及底层实现。</p></div></div></div></div><footer class="footer"><div class="container footer__inner"><section class="footer__left"><a class="footer__link" href="/guides/getting-started/">快速开始</a><a class="footer__link" href="/comparison/">对比</a><a href="https://privacy-policy.openjsf.org/" target="_blank" rel="noopener noreferrer" class="footer__link">Privacy Policy</a></section><section class="footer__middle"><a class="footer__icon" href="/"><img src="/icon-square-small.85ba630cf0c5f29ae3e3.svg" alt="webpack icon" width="35" height="35"/></a></section><section class="footer__right"><a href="https://webpack.threadless.com/" target="_blank" rel="noopener noreferrer" class="footer__link">周边</a><a class="footer__link" href="/awesome-webpack/">Awesome webpack</a><a class="footer__link" href="/glossary/">术语</a><a class="footer__link" href="/branding/">品牌</a><a href="https://gitter.im/webpack/webpack" target="_blank" rel="noopener noreferrer" class="footer__link">Gitter</a><a href="https://github.com/webpack/webpack/releases" target="_blank" rel="noopener noreferrer" class="footer__link">更新日志</a><a class="footer__link footer__license" href="/license"><img alt="Creative Commons License" src="/cc.ab77d813bf219c6e34ff.svg" width="25" height="25"/><img alt="Creative Commons License" src="/by.1360bb2e6d1fc28cdd9e.svg" width="25" height="25"/></a></section></div></footer></div></div><script src="/vendor.e63a9c1308a47f528841.js"></script><script src="/index.306a0c994f8a828b2a9d.js"></script><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f92e0e48311f635665d2de225751a349"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script></body>