https://zxuqian.cn/assets/js/47058879.7472ac5b.js

1"use strict";(self.webpackChunkzxuqian_cn=self.webpackChunkzxuqian_cn||[]).push([["11894"],{69680(e,t,n){n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>l,default:()=>u,frontMatter:()=>r,metadata:()=>i,toc:()=>s});var i=n(82416),a=n(74848),c=n(28453);let r={slug:"difference-between-vite-and-webpack",title:"Vite \u548C Webpack \u7684\u6BD4\u8F83\u4E0E\u533A\u522B",description:"Vite \u548C Webpack \u90FD\u662F\u73B0\u4EE3\u524D\u7AEF\u5F00\u53D1\u4E2D\u5E38\u7528\u7684\u6253\u5305\u5DE5\u5177\uFF0C\u4F46\u5728\u8BBE\u8BA1\u548C\u4F7F\u7528\u4E0A\u5B58\u5728\u5F88\u5927\u7684\u533A\u522B\u3002\u672C\u6587\u5C06\u8BE6\u7EC6\u4ECB\u7ECD Vite \u548C Webpack \u7684\u6BD4\u8F83\u4E0E\u533A\u522B\uFF0C\u5E2E\u52A9\u4F60\u9009\u62E9\u9002\u5408\u81EA\u5DF1\u9879\u76EE\u7684\u6253\u5305\u5DE5\u5177\u3002",authors:"zxuqian",tags:["\u524D\u7AEF","Vite","Webpack"]},l,p={authorsImageUrls:[void 0]},s=[{value:"\u524D\u8A00",id:"\u524D\u8A00",level:2},{value:"\u4EC0\u4E48\u662F Vite\uFF1F",id:"\u4EC0\u4E48\u662F-vite",level:2},{value:"\u4EC0\u4E48\u662F Webpack\uFF1F",id:"\u4EC0\u4E48\u662F-webpack",level:2}];function o(e){let t={h2:"h2",p:"p",...(0,c.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.h2,{id:"\u524D\u8A00",children:"\u524D\u8A00"}),"\n",(0,a.jsx)(t.p,{children:"\u5728\u73B0\u4EE3\u524D\u7AEF\u5F00\u53D1\u4E2D\uFF0C\u6253\u5305\u5DE5\u5177\u5DF2\u7ECF\u6210\u4E3A\u4E0D\u53EF\u6216\u7F3A\u7684\u4E00\u90E8\u5206\u3002\u5B83\u4EEC\u53EF\u4EE5\u5C06\u591A\u4E2A\u6587\u4EF6\u5408\u5E76\u4E3A\u4E00\u4E2A\u6216\u591A\u4E2A\u6587\u4EF6\uFF0C\u4F7F\u524D\u7AEF\u5E94\u7528\u7684\u52A0\u8F7D\u548C\u8FD0\u884C\u901F\u5EA6\u66F4\u5FEB\u3002\u76EE\u524D\uFF0CVite \u548C Webpack \u662F\u6700\u53D7\u6B22\u8FCE\u7684\u6253\u5305\u5DE5\u5177\u4E4B\u4E00\u3002\u672C\u6587\u5C06\u4ECB\u7ECD\u5B83\u4EEC\u4E4B\u95F4\u7684\u6BD4\u8F83\u548C\u533A\u522B\uFF0C\u4EE5\u5E2E\u52A9\u4F60\u9009\u62E9\u9002\u5408\u81EA\u5DF1\u9879\u76EE\u7684\u5DE5\u5177\u3002"}),"\n",(0,a.jsx)(t.h2,{id:"\u4EC0\u4E48\u662F-vite",children:"\u4EC0\u4E48\u662F Vite\uFF1F"}),"\n",(0,a.jsx)(t.p,{children:"Vite \u662F\u4E00\u79CD\u65B0\u578B\u7684\u524D\u7AEF\u6784\u5EFA\u5DE5\u5177\uFF0C\u65E8\u5728\u63D0\u9AD8\u5F00\u53D1\u8FC7\u7A0B\u4E2D\u7684\u5F00\u53D1\u4F53\u9A8C\u548C\u6784\u5EFA\u901F\u5EA6\u3002\u5B83\u652F\u6301\u6240\u6709\u7684\u73B0\u4EE3\u524D\u7AEF\u6846\u67B6\uFF0C\u5982 Vue\u3001React\u3001Angular\u7B49\uFF0C\u4EE5\u53CA\u539F\u751F\u7684 HTML/CSS/JS \u5E94\u7528\u3002"}),"\n",(0,a.jsx)(t.p,{children:"Vite \u7684\u6838\u5FC3\u7406\u5FF5\u662F\u201C\u5FEB\u901F\u5F00\u53D1\u201D\u3002\u5B83\u91C7\u7528\u4E86\u4E00\u79CD\u65B0\u7684\u5F00\u53D1\u65B9\u5F0F\uFF0C\u5373\u5728\u5F00\u53D1\u8FC7\u7A0B\u4E2D\u4E0D\u9700\u8981\u4E8B\u5148\u6253\u5305\u5E94\u7528\u7A0B\u5E8F\uFF0C\u800C\u662F\u5728\u5E94\u7528\u7A0B\u5E8F\u8FD0\u884C\u65F6\u5373\u65F6\u7F16\u8BD1\u548C\u6784\u5EFA\u3002\u8FD9\u79CD\u65B9\u5F0F\u4F7F\u5F97\u5F00\u53D1\u8005\u53EF\u4EE5\u66F4\u5FEB\u5730\u7F16\u5199\u4EE3\u7801\uFF0C\u800C\u65E0\u9700\u7B49\u5F85\u957F\u65F6\u95F4\u7684\u7F16\u8BD1\u548C\u6784\u5EFA\u8FC7\u7A0B\u3002"}),"\n",(0,a.jsx)(t.h2,{id:"\u4EC0\u4E48\u662F-webpack",children:"\u4EC0\u4E48\u662F Webpack\uFF1F"}

1),"\n",(0,a.jsx)(t.p,{children:"Webpack \u662F\u4E00\u4E2A\u5E7F\u6CDB\u4F7F\u7528\u7684\u6253\u5305\u5DE5\u5177\uFF0C\u4E3A\u73B0\u4EE3 Web \u5E94\u7528\u7A0B\u5E8F\u63D0\u4F9B\u4E86\u5F3A\u5927\u7684\u9759\u6001\u8D44\u6E90\u7BA1\u7406\u529F\u80FD\u3002Webpack \u53EF\u4EE5\u5C06\u591A\u4E2A\u6587\u4EF6\u6253\u5305\u6210\u4E00\u4E2A\u6216\u591A\u4E2A\u6587\u4EF6\uFF0C\u5E76\u4F7F\u5B83\u4EEC\u5728\u6D4F\u89C8\u5668\u4E2D\u5FEB\u901F\u52A0\u8F7D\u3002Webpack \u662F\u4E00\u4E2A\u9AD8\u5EA6\u53EF\u914D\u7F6E\u7684\u5DE5\u5177\uFF0C\u56E0\u6B64\u53EF\u4EE5\u6839\u636E\u9879\u76EE\u7684\u9700\u8981\u8FDB\u884C\u5B9A\u5236\u3002"}),"\n",(0,a.jsx)(t.p,{children:"Webpack \u7684\u6838\u5FC3\u7406\u5FF5\u662F\u201C\u6A21\u5757\u5316\u201D\u3002\u5B83\u652F\u6301\u4F7F\u7528\u5404\u79CD\u8BED\u8A00\u548C\u6846\u67B6\u7F16\u5199\u6A21\u5757\uFF0C\u5E76\u5C06\u5B83\u4EEC\u6253\u5305\u6210\u53EF\u5728\u6D4F\u89C8\u5668\u4E2D\u4F7F\u7528\u7684 JavaScript \u6587\u4EF6\u3002Webpack \u8FD8\u63D0\u4F9B\u4E86\u5F3A\u5927\u7684\u63D2\u4EF6\u7CFB\u7EDF\uFF0C\u53EF\u4EE5\u6269\u5C55\u5176\u529F\u80FD\u3002"})]})}function u(e={}){let{wrapper:t}={...(0,c.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(o,{...e})}):o(e)}},28453(e,t,n){n.d(t,{R:()=>r,x:()=>l});var i=n(96540);let a={},c=i.createContext(a);function r(e){let t=i.useContext(c);return i.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:r(e.components),i.createElement(c.Provider,{value:t},e.children)}},82416(e){e.exports=JSON.parse('{"permalink":"/blog/difference-between-vite-and-webpack","source":"@site/blog/2023/05/21/how-vite-compare-to-webpack/index.md","title":"Vite \u548C Webpack \u7684\u6BD4\u8F83\u4E0E\u533A\u522B","description":"Vite \u548C Webpack \u90FD\u662F\u73B0\u4EE3\u524D\u7AEF\u5F00\u53D1\u4E2D\u5E38\u7528\u7684\u6253\u5305\u5DE5\u5177\uFF0C\u4F46\u5728\u8BBE\u8BA1\u548C\u4F7F\u7528\u4E0A\u5B58\u5728\u5F88\u5927\u7684\u533A\u522B\u3002\u672C\u6587\u5C06\u8BE6\u7EC6\u4ECB\u7ECD Vite \u548C Webpack \u7684\u6BD4\u8F83\u4E0E\u533A\u522B\uFF0C\u5E2E\u52A9\u4F60\u9009\u62E9\u9002\u5408\u81EA\u5DF1\u9879\u76EE\u7684\u6253\u5305\u5DE5\u5177\u3002","date":"2023-05-21T00:00:00.000Z","tags":[{"inline":true,"label":"\u524D\u7AEF","permalink":"/blog/tags/\u524D\u7AEF"},{"inline":true,"label":"Vite","permalink":"/blog/tags/vite"},{"inline":true,"label":"Webpack","permalink":"/blog/tags/webpack"}],"readingTime":5,"hasTruncateMarker":true,"authors":[{"name":"\u5CF0\u534E\u524D\u7AEF\u5DE5\u7A0B\u5E08","title":"\u8F6F\u4EF6\u5DE5\u7A0B\u5E08 / B\u7AD9UP\u4E3B","url":"https://github.com/zxuqian","imageURL":"https://zxuqian.cn/img/logo.webp","key":"zxuqian","page":null}],"frontMatter":{"slug":"difference-between-vite-and-webpack","title":"Vite \u548C Webpack \u7684\u6BD4\u8F83\u4E0E\u533A\u522B","description":"Vite \u548C Webpack \u90FD\u662F\u73B0\u4EE3\u524D\u7AEF\u5F00\u53D1\u4E2D\u5E38\u7528\u7684\u6253\u5305\u5DE5\u5177\uFF0C\u4F46\u5728\u8BBE\u8BA1\u548C\u4F7F\u7528\u4E0A\u5B58\u5728\u5F88\u5927\u7684\u533A\u522B\u3002\u672C\u6587\u5C06\u8BE6\u7EC6\u4ECB\u7ECD Vite \u548C Webpack \u7684\u6BD4\u8F83\u4E0E\u533A\u522B\uFF0C\u5E2E\u52A9\u4F60\u9009\u62E9\u9002\u5408\u81EA\u5DF1\u9879\u76EE\u7684\u6253\u5305\u5DE5\u5177\u3002","authors":"zxuqian","tags":["\u524D\u7AEF","Vite","Webpack"]},"unlisted":false,"prevItem":{"title":"12\u4E2A JavaScript \u4E00\u884C\u4EE3\u7801\u6280\u5DE7","permalink":"/blog/javascript-one-liners"},"nextItem":{"title":"\u5982\u4F55\u4F7F\u7528 JSX \u7F16\u5199 React \u7EC4\u4EF6","permalink":"/blog/how-to-write-components-using-jsx-in-react"}}')}}]);