{"id":38587,"date":"2023-03-07T16:52:25","date_gmt":"2023-07-01T04:24:38","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/webpack%e5%88%b6%e4%bd%9c%e7%9a%84%e6%80%bb%e7%bb%93\/"},"modified":"2024-04-29T17:48:43","modified_gmt":"2024-04-29T09:48:43","slug":"webpack%e5%88%b6%e4%bd%9c%e7%9a%84%e6%80%bb%e7%bb%93","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/webpack%e5%88%b6%e4%bd%9c%e7%9a%84%e6%80%bb%e7%bb%93\/","title":{"rendered":"webpack\u5236\u4f5c\u7684\u603b\u7ed3"},"content":{"rendered":"<h2>\u5305\u63cf\u8ff0\u6587\u4ef6\uff08package.json\uff09<\/h2>\n<pre class=\"post-pre\"><code>npm init\r\n<\/code><\/pre>\n<h3>\u4fee\u6539\u8be6\u60c5 (modification details)<\/h3>\n<pre class=\"post-pre\"><code><span class=\"nl\">\"license\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"UNLISENCED\"<\/span><span class=\"err\">,<\/span>\r\n<\/code><\/pre>\n<h2>\u53ef\u4ee5\u653e\u8fdb\u53bb\u7684\u4e1c\u897f\u3002<\/h2>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">pug(html\u30b3\u30f3\u30d1\u30a4\u30eb)<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">stylus(css\u30b3\u30f3\u30d1\u30a4\u30eb)\u203bSass\u4f7f\u3046\u5834\u5408\u306f\u5909\u3048\u308b<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">ES6(babel)<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">TypeScript\uff08js\u30b3\u30f3\u30d1\u30a4\u30eb\uff09<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u753b\u50cf\u5727\u7e2e<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\u30d6\u30e9\u30a6\u30b6\u30b7\u30f3\u30af<\/ul>\n<h3>\u786e\u8ba4\u6700\u65b0\u7248\u672c<\/h3>\n<pre class=\"post-pre\"><code>npm view \u3053\u3053\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u3082\u306e\r\n\r\n\u25bcex\r\nnpm view webpack\r\n\r\n\u25bc\u30d0\u30fc\u30b8\u30e7\u30f3\u6307\u5b9a\u3067\u5165\u308c\u308b\u5834\u5408\r\nnpm install --save-dev webpack@X.X.X\r\n<\/code><\/pre>\n<h3>\u5b89\u88dd\u5167\u5bb9<\/h3>\n<p>\u4e3a\u4e86\u5c06\u6b64\u6b21\u7248\u672c\u52a0\u5165\u5230devDependencies\u91cc\uff0c\u4f7f\u7528&#8211;save-dev\u9009\u9879\u8fdb\u884c\u5b89\u88c5\u3002<\/p>\n<pre class=\"post-pre\"><code>npm install --save-dev webpack\r\nnpm install --save-dev webpack-cli\r\nnpm install --save-dev css-loader\r\nnpm install --save-dev style-loader\r\nnpm install --save-dev mini-css-extract-plugin\r\nnpm install --save-dev stylus\r\nnpm install --save-dev stylus-loader\r\nnpm install --save-dev html-webpack-plugin\r\nnpm install --save-dev pug-html-loader\r\nnpm install --save-dev html-loader\r\nnpm install --save-dev clean-webpack-plugin\r\nnpm install --save-dev webpack-dev-server\r\nnpm install --save-dev babel-loader\r\nnpm install --save-dev @babel\/core\r\nnpm install --save-dev @babel\/preset-env\r\nnpm install --save-dev image-webpack-loader\r\nnpm install --save-dev react\r\nnpm install --save-dev react-dom\r\nnpm install --save-dev @types\/node\r\nnpm install --save-dev @babel\/preset-react\r\nnpm install --save-dev typescript\r\nnpm install --save-dev ts-loader\r\nnpm install --save-dev @types\/react\r\n<\/code><\/pre>\n<h3>\u4e00\u6b21\u6027\u653e\u8fdb\u53bb<\/h3>\n<pre class=\"post-pre\"><code>npm install --save-dev webpack webpack-cli css-loader style-loader mini-css-extract-plugin stylus stylus-loader html-webpack-plugin pug-html-loader html-loader clean-webpack-plugin webpack-dev-server babel-loader @babel\/core @babel\/preset-env image-webpack-loader react react-dom @types\/node @babel\/preset-react typescript ts-loader @types\/react\r\n<\/code><\/pre>\n<h2>\u76ee\u5f55\u7ed3\u6784<\/h2>\n<pre class=\"post-pre\"><code>webpack\r\n\u251c\u2500 node_modules\r\n\u251c\u2500 package.json\r\n\u251c\u2500 package-lock.json\r\n\u251c\u2500 webpack.config.js\r\n\u251c\u2500 tsconfig.json\r\n\u251c\u2500 src\r\n\u2502 \u251c\u2500 pug\r\n\u2502 \u2502 \u251c\u2500 about\r\n\u2502 \u2502 \u2502  \u2514\u2500 index.pug\r\n\u2502 \u2502 \u2514\u2500 index.pug\r\n\u2502 \u251c\u2500 style\r\n\u2502 \u251c\u2500 js\r\n\u2502 \u2514\u2500 images\r\n\u2514\u2500 dist\r\n  \u251c\u2500 css\r\n  \u251c\u2500 js\r\n  \u251c\u2500 images\r\n  \u251c\u2500 about\r\n  \u2502  \u2514\u2500 index.pug\r\n  \u2514\u2500 index.html\r\n<\/code><\/pre>\n<h2>\u6267\u884c\u6307\u4ee4<\/h2>\n<pre class=\"post-pre\"><code>npm run start \/\/\u958b\u767a\r\nnpm run build \/\/\u672c\u756a\r\n<\/code><\/pre>\n<h2>\u4f7f\u7528 webpack \u5199\u4ee3\u7801\u8981\u6ce8\u610f\u7684\u4e8b\u9879\u3002<\/h2>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">module\u5185\u306euse\u306e\u8aad\u307f\u8fbc\u307f\u306f\u4e0a\u304b\u3089\u3067\u306f\u306a\u304f\u4e0b\u304b\u3089\u4e0a\u306b\u8aad\u307f\u8fbc\u307f\u9032\u3093\u3067\u3044\u304f<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">vue\u3092\u5165\u308c\u308b\u5834\u5408\u306f\u30d0\u30fc\u30b8\u30e7\u30f3\u306b\u3088\u3063\u3066\u66f8\u304d\u65b9\u304c\u5909\u308f\u308b<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u5305\u63cf\u8ff0\u6587\u4ef6\uff08package.json\uff09 npm init \u4fee\u6539\u8be6\u60c5 (modification details [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38587","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>webpack\u5236\u4f5c\u7684\u603b\u7ed3 - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/webpack\u5236\u4f5c\u7684\u603b\u7ed3\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"webpack\u5236\u4f5c\u7684\u603b\u7ed3\" \/>\n<meta property=\"og:description\" content=\"\u5305\u63cf\u8ff0\u6587\u4ef6\uff08package.json\uff09 npm init \u4fee\u6539\u8be6\u60c5 (modification details [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/webpack\u5236\u4f5c\u7684\u603b\u7ed3\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-01T04:24:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T09:48:43+00:00\" \/>\n<meta name=\"author\" content=\"\u5b87, \u534e\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u5b87, \u534e\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/webpack%e5%88%b6%e4%bd%9c%e7%9a%84%e6%80%bb%e7%bb%93\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/webpack%e5%88%b6%e4%bd%9c%e7%9a%84%e6%80%bb%e7%bb%93\/\",\"name\":\"webpack\u5236\u4f5c\u7684\u603b\u7ed3 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-07-01T04:24:38+00:00\",\"dateModified\":\"2024-04-29T09:48:43+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/513018e4e121d3add1b7c5de8be21458\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/webpack%e5%88%b6%e4%bd%9c%e7%9a%84%e6%80%bb%e7%bb%93\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/webpack%e5%88%b6%e4%bd%9c%e7%9a%84%e6%80%bb%e7%bb%93\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/webpack%e5%88%b6%e4%bd%9c%e7%9a%84%e6%80%bb%e7%bb%93\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"webpack\u5236\u4f5c\u7684\u603b\u7ed3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/513018e4e121d3add1b7c5de8be21458\",\"name\":\"\u5b87, \u534e\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/63cd45cbc05a35fc4ff7637a163c83c4962ef58d27472726c3a3e0c9c5194f0f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/63cd45cbc05a35fc4ff7637a163c83c4962ef58d27472726c3a3e0c9c5194f0f?s=96&d=mm&r=g\",\"caption\":\"\u5b87, \u534e\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/yuhua\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/webpack%e5%88%b6%e4%bd%9c%e7%9a%84%e6%80%bb%e7%bb%93\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"webpack\u5236\u4f5c\u7684\u603b\u7ed3 - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/webpack\u5236\u4f5c\u7684\u603b\u7ed3\/","og_locale":"zh_CN","og_type":"article","og_title":"webpack\u5236\u4f5c\u7684\u603b\u7ed3","og_description":"\u5305\u63cf\u8ff0\u6587\u4ef6\uff08package.json\uff09 npm init \u4fee\u6539\u8be6\u60c5 (modification details [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/webpack\u5236\u4f5c\u7684\u603b\u7ed3\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-07-01T04:24:38+00:00","article_modified_time":"2024-04-29T09:48:43+00:00","author":"\u5b87, \u534e","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u5b87, \u534e","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"1 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/webpack%e5%88%b6%e4%bd%9c%e7%9a%84%e6%80%bb%e7%bb%93\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/webpack%e5%88%b6%e4%bd%9c%e7%9a%84%e6%80%bb%e7%bb%93\/","name":"webpack\u5236\u4f5c\u7684\u603b\u7ed3 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-07-01T04:24:38+00:00","dateModified":"2024-04-29T09:48:43+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/513018e4e121d3add1b7c5de8be21458"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/webpack%e5%88%b6%e4%bd%9c%e7%9a%84%e6%80%bb%e7%bb%93\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/webpack%e5%88%b6%e4%bd%9c%e7%9a%84%e6%80%bb%e7%bb%93\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/webpack%e5%88%b6%e4%bd%9c%e7%9a%84%e6%80%bb%e7%bb%93\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"webpack\u5236\u4f5c\u7684\u603b\u7ed3"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/513018e4e121d3add1b7c5de8be21458","name":"\u5b87, \u534e","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/63cd45cbc05a35fc4ff7637a163c83c4962ef58d27472726c3a3e0c9c5194f0f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/63cd45cbc05a35fc4ff7637a163c83c4962ef58d27472726c3a3e0c9c5194f0f?s=96&d=mm&r=g","caption":"\u5b87, \u534e"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/yuhua\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/webpack%e5%88%b6%e4%bd%9c%e7%9a%84%e6%80%bb%e7%bb%93\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38587"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38587\/revisions"}],"predecessor-version":[{"id":86728,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38587\/revisions\/86728"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}