var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var g=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),b=(a,n)=>{for(var s in n)l(a,s,{get:n[s],enumerable:!0})},i=(a,n,s,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of u(n))!N.call(a,t)&&t!==s&&l(a,t,{get:()=>n[t],enumerable:!(c=m(n,t))||c.enumerable});return a};var w=(a,n,s)=>(s=a!=null?h(k(a)):{},i(n||!a||!a.__esModule?l(s,"default",{value:a,enumerable:!0}):s,a)),j=a=>i(l({},"__esModule",{value:!0}),a);var o=g((_,r)=>{r.exports=_jsx_runtime});var x={};b(x,{default:()=>v,frontmatter:()=>f});var e=w(o()),f={title:"[\u524D\u7AEF\u7B46\u8A18]\u5982\u4F55\u5FEB\u901F\u4E0A\u624B webpack \u{1F4E6}",date:"2022-5-22",draft:!1,category:"coding",imgSrc:"/static/images/webpack-part-one/p1.jpeg",description:"\u7531\u65BC HTML\u3001JavaScript \u53CA CSS \u9019\u4E9B\u57FA\u790E\u5BEB\u6CD5\u5C0D\u65BC\u756B\u9762\u6216\u662F\u958B\u767C\u4E0A\u7684\u9700\u6C42\u5DF2\u7D93\u4E0D\u5408\u6642\u5B9C\uFF0C\u52A0\u4E0A\u524D\u7AEF\u7684\u5DE5\u5177\u65E5\u65B0\u6708\u7570\uFF0C\u700F\u89BD\u5668\u7684\u652F\u63F4\u8DDF\u4E0D\u4E0A\u65B0\u8A9E\u6CD5( \u8A9E\u6CD5\u7CD6 )\u548C\u65B0\u7684\u6846\u67B6\uFF0C\u56E0\u6B64\u900F\u904E\u6253\u5305\u81EA\u52D5\u5316\u53BB\u505A\u7DE8\u8B6F\u548C\u6574\u5408\u6A94\u6848\u3002",tags:["webpack"]};function p(a){let n=Object.assign({p:"p",ul:"ul",li:"li",h2:"h2",blockquote:"blockquote",a:"a",ol:"ol",code:"code",div:"div",pre:"pre",span:"span",h3:"h3"},a.components),{PostImage:s,TOCInline:c}=n;return s||d("PostImage",!0),c||d("TOCInline",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(s,{source:"/static/images/webpack-part-one/p1.jpeg",description:'Photo by Bench Accounting on Unsplash'}),` `,(0,e.jsx)(n.p,{children:"\u6B64\u7B46\u8A18\u7684\u8D77\u6E90\uFF1A"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"\u7576\u521D\u5B78 React \u70BA\u6C42\u5FEB\uFF0C\u5E38\u5E38\u76F4\u63A5\u4E0B npx create-react-app my-app \u5C31\u958B\u59CB\u5BEB React \u4E86\uFF0C\u6839\u672C\u4E0D\u66C9\u5F97\u9019\u500B\u6307\u4EE4\u4E2D\u9593\u767C\u751F\u4EC0\u9EBC\u4E8B\u60C5"}),` `,(0,e.jsx)(n.li,{children:"\u7531\u65BC\u6C42\u8077\u7DB2\u7AD9\u5F88\u5E38\u770B\u5230 webpack \u7684\u6280\u80FD\u9700\u6C42\uFF0C\u6240\u4EE5\u4E0D\u5F97\u4E0D\u4F86\u4E86\u89E3\u4E00\u4E0B XD"}),` `]}),` `,(0,e.jsx)(n.p,{children:"webpack \u8981\u4E86\u89E3\u7684\u6DF1\u4E5F\u4E0D\u662F\u4E00\u5169\u5929\u5C31\u53EF\u4EE5\u5168\u90E8\u4E86\u89E3\u7684\uFF0C\u53EF\u4EE5\u770B\u770B\u6709\u4EBA\u5BEB\u6210\u4E00\u672C\u66F8\u5C31\u77E5\u9053\uFF0C\u4E0D\u8A2A\u5148\u5F9E\u5E7E\u500B\u5927\u554F\u984C\u4F86\u8457\u624B\uFF1A"}),` `,(0,e.jsx)(c,{toc:a.toc,exclude:"Overview",toHeading:2}),` `,(0,e.jsx)(n.h2,{id:"webpack-\u662F\u4EC0\u9EBC",children:"Webpack \u662F\u4EC0\u9EBC\uFF1F"}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsx)(n.p,{children:"Webpack \u662F\u4E00\u500B\u300C\u6A21\u7D44\u5316\u7684\u6253\u5305\u5DE5\u5177\u300D(module bundler)"}),` `]}),` `,(0,e.jsx)(n.p,{children:"\u4F86\u62C6\u89E3\u4E00\u4E0B\u9019\u53E5\u8A71\uFF1A"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsxs)(n.li,{children:["\u6A21\u7D44\u5316\uFF1A\u5728\u525B\u5B78\u7FD2\u958B\u767C\u6642\u6703\u628A\u6240\u6709\u7684\u529F\u80FD\u548C\u908F\u8F2F\u90FD\u5BEB\u5728\u540C\u4E00\u500B\u6A94\u6848\uFF0C\u5C0D\u65BC\u5C0F\u578B\u7684 project \u4F86\u8AAA\u4E0D\u6703\u6709\u592A\u5927\u7684\u554F\u984C\uFF0C\u4F46\u5728\u5927\u578B\u7684 project \u4E0B\u82E5\u8B8A\u6210",(0,e.jsx)(n.a,{href:"https://zh.wikipedia.org/zh-tw/%E9%9D%A2%E6%9D%A1%E5%BC%8F%E4%BB%A3%E7%A0%81",children:"Spaghetti code"})," \uFF0C\u5F8C\u7E8C\u7684\u7DAD\u8B77\u5247\u6703\u975E\u5E38\u75DB\u82E6\uFF0C\u56E0\u6B64\u7576\u4F60\u5C07\u5404\u500B\u529F\u80FD\u548C\u908F\u8F2F\u62C6\u5206\u6210\u4E00\u500B\u500B\u4E0D\u540C\u7684\u6A94\u6848\uFF08\u6A21\u7D44\uFF09\uFF0C\u518D\u7528\u5F15\u5165 \uFF08import/require\uFF09\u6A94\u6848\u4F86\u65B9\u4FBF\u7BA1\u7406\u4EE5\u53CA\u7DAD\u8B77\u3002"]}),` `,(0,e.jsx)(n.li,{children:"\u6253\u5305\uFF1A\u9019\u968E\u6BB5 webpack \u505A\u4E86\u5169\u4EF6\u4E8B\uFF0C1. \u5C07\u4E0D\u540C\u7684\u6A94\u6848\uFF08\u6A21\u7D44\uFF09\u548C\u8CC7\u6E90\u505A\u7DE8\u8B6F\u4E26\u4E14\u505A\u6574\u5408\uFF0C\u6253\u5305\u6210\u5E7E\u500B bundle \u7684\u6A94\u6848\uFF0C2. \u5C07\u65B0\u8A9E\u6CD5\u505A\u8F49\u63DB\uFF0C\u8B93\u700F\u89BD\u5668\u770B\u5F97\u61C2\u3002"}),` `]}),` `,(0,e.jsx)(s,{source:"/static/images/webpack-part-one/p2.png",description:'Photo by webpack.js.org'}),` `,(0,e.jsx)(n.h2,{id:"\u70BA\u4EC0\u9EBC\u8981\u7528-webpack",children:"\u70BA\u4EC0\u9EBC\u8981\u7528 Webpack\uFF1F"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"\u7531\u65BC HTML\u3001JavaScript \u53CA CSS \u9019\u4E9B\u57FA\u790E\u5BEB\u6CD5\u5C0D\u65BC\u756B\u9762\u6216\u662F\u958B\u767C\u4E0A\u7684\u9700\u6C42\u5DF2\u7D93\u4E0D\u5408\u6642\u5B9C\uFF0C\u52A0\u4E0A\u524D\u7AEF\u7684\u5DE5\u5177\u65E5\u65B0\u6708\u7570\uFF0C\u700F\u89BD\u5668\u7684\u652F\u63F4\u8DDF\u4E0D\u4E0A\u65B0\u8A9E\u6CD5( \u8A9E\u6CD5\u7CD6 )\u548C\u65B0\u7684\u6846\u67B6\uFF0C\u56E0\u6B64\u900F\u904E\u6253\u5305\u81EA\u52D5\u5316\u53BB\u505A\u7DE8\u8B6F\u548C\u6574\u5408\u6A94\u6848\uFF0C\u8B93\u700F\u89BD\u5668\u80FD\u770B\u61C2\u3001\u9806\u5229\u57F7\u884C\u3002\u4F8B\u5982\u5C07\u5716\u7247\u505A\u58D3\u7E2E\u3001\u7A0B\u5F0F\u78BC\u505A\u58D3\u7E2E\u3001\u505A SASS \u9810\u8655\u7406\u5DE5\u5177\u7684\u5DE5\u4F5C\u6216\u662F\u8F49\u63DB ES6 \u8A9E\u6CD5\u3002\u50CF\u662F\u82E5\u6211\u5011\u4F7F\u7528 ES6 \u7684\u7BAD\u982D\u51FD\u5F0F\uFF0Cwebpack \u53EF\u4EE5\u5728\u6253\u5305\u7684\u904E\u7A0B\u5E6B\u4F60\u8F49\u8B8A\u6210\u4E00\u822C function \u7684\u5BEB\u6CD5\u3002"}),` `,(0,e.jsx)(n.li,{children:"\u518D\u4F86\uFF0C\u7576\u4F60 JavaScript \u65B0\u8A9E\u6CD5\u8981\u505A\u8F49\u63DB\uFF0CCSS \u9810\u8655\u7406\u8981\u505A\u8F49\u63DB\uFF0C\u5176\u4ED6\u7B49\u7B49\u7684\u8CC7\u6E90\u8981\u505A\u8F49\u63DB\u6642\uFF0C\u4F60\u4E0D\u80FD\u5728\u90E8\u7F72\u524D\u4E00\u500B\u500B\u53BB\u501F\u52A9\u5DE5\u5177\u505A\u8F49\u63DB\uFF0C\u592A\u6C92\u6548\u7387\uFF0C\u56E0\u6B64\u6211\u5011\u5229\u7528 webpack \u7684\u8A2D\u5B9A\uFF0C\u8B93\u9019\u4E9B\u9700\u8981\u88AB\u8F49\u63DB\u7684\u6A94\u6848\u80FD\u4E00\u540C\u88AB\u8655\u7406\u3002"}),` `,(0,e.jsx)(n.li,{children:"\u82E5\u4F60\u81EA\u5DF1\u958B\u767C\u4E86\u597D\u7528\u7684\u5DE5\u5177\u5305\uFF0C\u50CF\u662F JQuery library \u7684\u51FD\u5F0F\u5305\u3001\u6216\u662F\u4E32\u4E86\u67D0\u67D0\u5E73\u53F0\u7684 api \u7684 code\uFF0C\u4F60\u4E5F\u80FD\u900F\u904E\u6253\u5305\u597D\u7D66\u5225\u4EBA\u5F15\u5165\u505A\u4F7F\u7528"}),` `]}),` `,(0,e.jsx)(n.h2,{id:"webpack-\u600E\u9EBC\u7528",children:"Webpack \u600E\u9EBC\u7528\uFF1F"}),` `,(0,e.jsx)(n.p,{children:"\u592A\u591A\u7406\u8AD6\u5BB9\u6613\u6C96\u660F\u982D\uFF0C\u90A3\u4F86\u4E00\u6B65\u6B65\u7684\u611F\u53D7\u4E00\u4E0B webpack \u600E\u9EBC\u505A\u4E8B\u7684"}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsxs)(n.li,{children:["\u5275\u4E00\u500B\u8CC7\u6599\u593E\uFF0C\u5728 terminal \u6253\u4E0A ",(0,e.jsx)(n.code,{children:"npm init -y"})," \u5EFA\u7ACB\u4E00\u500B npm \u7684\u5C08\u6848\uFF0C\u8CC7\u6599\u593E\u6703\u6709 ",(0,e.jsx)(n.code,{children:"package.json"})," \u4F60\u6574\u500B\u5C08\u6848\u7684\u8A2D\u5B9A\u6A94 ( \u975E webpack \u7684 )"]}),` `,(0,e.jsxs)(n.li,{children:["terminal \u6253\u4E0A ",(0,e.jsx)(n.code,{children:"npm install webpack webpack-cli --save-dev"})," \u5B89\u88DD webpack\uFF0C\u900F\u904E ",(0,e.jsx)(n.code,{children:"npx webpack --version"}),"\u78BA\u8A8D\u662F\u5426\u6709\u7248\u672C\u865F"]}),` `,(0,e.jsxs)(n.li,{children:["terminal \u6253\u4E0A ",(0,e.jsx)(n.code,{children:"mkdir src"})," \u958B\u4E00\u500B\u8CC7\u6599\u593E src \uFF0C\u7D04\u5B9A\u4FD7\u6210\u7684\u6703\u628A source code \u5BEB\u5728 src \uFF0C\u800C\u4E0D\u6703\u76F4\u63A5\u5BEB\u5728\u6839\u76EE\u9304\u5E95\u4E0B\uFF0C\u7136\u5F8C\u65B0\u589E index.js \u4EE5\u53CA utils.js \u6A94\u6848\uFF0C\u6253\u958B VS code \u4E26\u5206\u5225\u52A0\u4E0A\u4EE5\u4E0B code\uFF0C\u9019\u908A\u5C31\u662F\u4F60\u5C08\u6848\u60F3\u6253\u5305\u7684\u6771\u897F"]}),` `]}),` `,(0,e.jsx)(n.div,{className:"remark-code-title",children:"utils.js"}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"first"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"str"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," str",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsx)(n.div,{className:"remark-code-title",children:"index.js"}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," utils ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"require"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'./utils'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"utils",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"first"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'abc'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,e.jsxs)(n.ol,{start:"4",children:[` `,(0,e.jsx)(n.li,{children:"\u958B\u4E00 index.html \u6A94\u6848\uFF0C\u4E26\u52A0\u5165\u4EE5\u4E0B code\uFF0C\u6CE8\u610F\u6B64\u6642\u6211\u5011\u7684 script \u662F\u5F15\u5165 src/index.js\uFF0C\u56E0\u70BA\u7B49\u6703\u6253\u5305\u5F8C\u5C31\u662F\u8981\u5F15\u5165\u6253\u5305\u5B8C\u7684\u6A94\u6848"}),` `]}),` `,(0,e.jsx)(n.div,{className:"remark-code-title",children:"index.html"}),` `,(0,e.jsx)(n.pre,{className:"language-html",children:(0,e.jsxs)(n.code,{className:"language-html code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token doctype",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"html"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"lang"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"en",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"head"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"charset"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"UTF-8",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"http-equiv"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"X-UA-Compatible",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"content"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"IE=edge",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"viewport",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"content"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"width=device-width, initial-scale=1.0",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"title"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Document",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"src/index.js",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token script"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"body"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})]})}),` `,(0,e.jsx)(s,{source:"/static/images/webpack-part-one/p3.png",description:"\u73FE\u5728\u6703\u9577\u9019\u6A23"}),` `,(0,e.jsxs)(n.ol,{start:"5",children:[` `,(0,e.jsx)(n.li,{children:"\u9019\u6642\u4F60\u5C07\u6B64 html \u5728\u700F\u89BD\u5668\u6253\u958B\uFF0C\u5728 devtool \u6703\u767C\u73FE\u4E0B\u9762\u5716\u7247\u932F\u8AA4\uFF0C\u56E0\u70BA\u700F\u89BD\u5668\u7684\u57F7\u884C\u74B0\u5883\u4E26\u6C92\u6709\u300C\u6A21\u7D44\u5316\u300D\u7684\u6982\u5FF5\uFF0C\u56E0\u6B64\u700F\u89BD\u5668\u770B\u4E0D\u61C2 require/import \uFF0C\u6703\u767C\u751F\u932F\u8AA4"}),` `]}),` `,(0,e.jsx)(s,{source:"/static/images/webpack-part-one/p4.png",description:""}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsx)(n.p,{children:'\u4E0D\u904E\u8FD1\u5E7E\u5E74\u700F\u89BD\u5668\u6709\u539F\u751F\u652F\u63F4\u4E86\u4E00\u500B\u898F\u7BC4\u53EB\u505A ES module\uFF0C\u4F46\u662F\u8981\u642D\u914D\u958B\u4E00\u500B server \u3001\u5F15\u5165\u7528 import\uFF0Cindex.html \u6A94\u6848\u8981\u5728 script \u5C6C\u6027\u52A0\u4E0Atype="module"\u624D\u53EF\u4EE5\uFF0C\u9019\u500B\u5C31\u4E0D\u7D30\u8AC7\uFF0C\u7E3D\u4E4B\uFF0C webpack \u4E5F\u662F\u5728\u5E6B\u6211\u5011\u8655\u7406\u9019\u6A23\u554F\u984C\u7684\u5DE5\u5177\uFF0C\u8B93\u700F\u89BD\u5668\u53BB\u5403\u6253\u5305\u5F8C\u7684\u6A94\u6848\u3002'}),` `]}),` `,(0,e.jsxs)(n.ol,{start:"6",children:[` `,(0,e.jsx)(n.li,{children:"terminal \u6253\u4E0A npx webpack \u53BB\u6253\u5305\uFF0C\u5B83\u6703\u628A src \u5E95\u4E0B\u7684 index.js \u7576\u4F5C\u7A0B\u5F0F\u7684\u5165\u53E3\u9EDE\uFF0C\u628A\u6253\u5305\u5F8C\u7684\u6771\u897F\u653E\u5230 dist \u8CC7\u6599\u593E\u7684 main.js\uFF0C\u9019\u5C31\u662F\u6253\u5305\u5F8C\u7684\u6771\u897F\uFF0C\u88E1\u9762\u7684 code \u770B\u4E0D\u61C2\u4E5F\u6C92\u95DC\u4FC2\uFF0C\u700F\u89BD\u5668\u770B\u61C2\u5C31\u597D"}),` `]}),` `,(0,e.jsx)(s,{source:"/static/images/webpack-part-one/p5.png",description:""}),` `,(0,e.jsxs)(n.ol,{start:"7",children:[` `,(0,e.jsx)(n.li,{children:"\u5C07 index.html \u6A94\u6848\u7684 script \u63DB\u6210\u5F15\u5165dist/main.js\uFF0C\u5728\u700F\u89BD\u5668\u66F4\u65B0\u6A94\u6848\u5C31\u767C\u73FE\u662F\u6211\u5011\u8981\u7684\u7D50\u679C\uFF0C \u6240\u4EE5\u6211\u5011\u7684 require \u8A9E\u6CD5\u5C31\u80FD\u5728\u700F\u89BD\u5668\u57F7\u884C\u4E86\uFF01"}),` `]}),` `,(0,e.jsx)(n.div,{className:"remark-code-title",children:"index.html"}),` `,(0,e.jsx)(n.pre,{className:"language-html",children:(0,e.jsx)(n.code,{className:"language-html code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"dist/main.js",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token script"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]})})}),` `,(0,e.jsx)(s,{source:"/static/images/webpack-part-one/p6.png",description:""}),` `,(0,e.jsx)(n.p,{children:"\u76EE\u524D\u7B97\u662F\u6210\u529F\u7684\u4F7F\u7528 webpack\uFF0C\u4F46\u662F\u82E5\u4ECA\u5929 js \u6A94\u6848\u7684\u5165\u53E3\u9EDE\u662F\u53EB src/app.js\uFF0C\u4E0D\u904E webpack \u9810\u8A2D\u6703\u6293 src/index.js \u4F86\u6253\u5305\uFF0C\u9019\u6642\u5C31\u6703\u51FA\u932F\uFF0C\u56E0\u6B64\u6211\u5011\u9700\u8981\u8A2D\u7F6E webpack \u7684\u8A2D\u5B9A\u6A94"}),` `,(0,e.jsx)(n.h3,{id:"webpackconfigjs",children:"webpack.config.js"}),` `,(0,e.jsx)(n.p,{children:"\u5275\u4E00 webpack.config.js \u6A94\u6848 (\u4E0D\u80FD\u4E82\u53D6)\uFF0C\u52A0\u5165\u4EE5\u4E0B code\uFF0C\u6211\u5011\u80FD\u5C07 src/index.js \u6539\u6210 src/app.js\uFF0C\u5C31\u53EF\u6210\u529F\u57F7\u884C webpack\uFF0C\u4F46\u7576\u4F60\u7684\u6A94\u6848\u5C31\u662F index.js \u5C31\u4E0D\u7528\u505A\u9019\u4E00\u6B65\uFF0C\u7576\u7136\uFF0C\u9084\u6709\u5176\u4ED6\u7684\u8A2D\u5B9A\uFF0C\u5982 mode\u3001output \u7B49\u7B49\u7684"}),` `,(0,e.jsx)(n.div,{className:"remark-code-title",children:"webpack.config.js"}),` `,(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," path ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"require"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'path'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:["module",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"exports"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"mode"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'production'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token comment",children:"// production \u662F\u9810\u8A2D\uFF0C'development' \u5247\u4E0D\u6703\u5E6B\u5FD9\u505A\u58D3\u7E2E\uFF0C\u6BD4\u8F03\u770B\u5F97\u61C2"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"entry"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'./src/index.js'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token comment",children:"//\u7A0B\u5F0F\u7684\u5165\u53E3\u9EDE"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"output"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"filename"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'main.js'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token comment",children:"//\u8F38\u51FA\u6210\u6B64\u6A94\u6848"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token literal-property property",children:"path"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," path",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"resolve"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"__dirname",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:"'dist'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token comment",children:"//\u6A94\u6848\u540D\u7A31"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsx)(n.h3,{id:"\u5B8C\u6210-",children:"\u5B8C\u6210 \u{1F64C}\uFF1A"}),` `,(0,e.jsx)(n.p,{children:'\u6B64\u5916\uFF0C\u4F60\u53EF\u4EE5\u5728 package.json \u6A94\u6848\u7684 scripts \u52A0\u4E0A "build": "npx webpack" \uFF0C\u4F60\u5C31\u80FD\u5728 terminal \u6253\u4E0Anpm run build \u4F86\u5FEB\u901F\u57F7\u884C webpack\uFF0C\u4E0B\u7BC7\u518D\u4F86\u8655\u7406\u5176\u4ED6\u8CC7\u6E90\u7684\u8F49\u63DB\uFF0C\u5982\u52A0\u5165 babel \u5C07 ES6 \u8A9E\u6CD5\u8F49\u6210 ES5\uFF0C\u7528 scss-loader \u8F49\u63DB \u6210 CSS\u3002'}),` `,(0,e.jsx)(n.h3,{id:"\u53C3\u8003\u8CC7\u6599",children:"\u53C3\u8003\u8CC7\u6599\uFF1A"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://lidemy.com/",children:"Lidemy"})}),` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://ithelp.ithome.com.tw/articles/10239696",children:"\u5C0B\u8993 webpack \u2014 04 \u2014 \u8A8D\u8B58 webpack \u2014 \u4ECB\u7D39 webpack"})}),` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#common_cross_browser_problems",children:"Common cross browser problems"})}),` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://ithelp.ithome.com.tw/articles/10200329",children:"[\u7B46\u8A18][React]\u5F9E\u96F6\u5230\u4E00\u7684webpack\u958B\u767C\u74B0\u5883(1)-\u5B89\u88DD\u57F7\u884C\u7BC7"})}),` `]})]})}function y(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(p,a)})):p(a)}var v=y;function d(a,n){throw new Error("Expected "+(n?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return j(x);})(); ;return Component;

Tag: webpack

[前端筆記]如何快速上手 webpack 📦