{"id":6544,"date":"2022-11-18T05:42:13","date_gmt":"2022-11-17T21:42:13","guid":{"rendered":"https:\/\/www.lilichao.com\/?p=6544"},"modified":"2022-11-18T05:42:14","modified_gmt":"2022-11-17T21:42:14","slug":"%e6%89%93%e5%8c%85%e5%b7%a5%e5%85%b7","status":"publish","type":"post","link":"https:\/\/lilichao.com\/?p=6544","title":{"rendered":"\u6253\u5305\u5de5\u5177"},"content":{"rendered":"\n

Node.js\u7684\u51fa\u73b0\u4f7fjs\u5f97\u4ee5\u5728\u670d\u52a1\u5668\u4e2d\u8fd0\u884c\uff0c\u6a21\u5757\u5316\u7684\u5f15\u5165\u4f7fjs\u5728\u7f16\u5199\u5927\u578b\u5e94\u7528\u65f6\u66f4\u52a0\u7684\u5f97\u5fc3\u5e94\u624b\u3002\u4f46\u662f\u6211\u4eec\u6bd5\u7adf\u8fd8\u662f\u524d\u7aef\u5de5\u7a0b\u5e08\uff0c\u4e3b\u6218\u573a\u8fd8\u662f\u4f4d\u4e8e\u6d4f\u89c8\u5668\uff0c\u6362\u53e5\u8bdd\u8bf4\uff0c\u6211\u4eec\u8981\u56de\u6765\u5199\u7f51\u9875\u4e86\uff01<\/p>\n\n\n\n

\u4e60\u60ef\u4e86npm\u5305\u7ba1\u7406\u5668\uff0c\u6211\u4eec\u4fbf\u4e0d\u518d\u613f\u610f\u53bb\u56db\u5904\u5bfb\u627e\u4e0b\u8f7djs\u6587\u4ef6\u3002\u4e60\u60ef\u4e86\u6a21\u5757\u5316\uff0c\u6211\u4eec\u4e5f\u4e0d\u60f3\u5728\u4f7f\u7528script\u6807\u7b7e\u53bb\u5f15\u5165\u5916\u90e8\u811a\u672c\u3002\u6b63\u6240\u8c13\u66fe\u7ecf\u6ca7\u6d77\u96be\u4e3a\u6c34\uff01\u4f46\u662fnode\u662f\u7f16\u5199\u670d\u52a1\u5668\u4ee3\u7801\u7684\uff0cnpm\u4e5f\u662f\u4f5c\u4e3a\u5b83\u914d\u5957\u7684\u5305\u7ba1\u7406\u5668\u800c\u5b58\u5728\u7684\uff01\u8981\u600e\u4e48\u6837\u624d\u80fd\u5c06\u5b83\u7528\u5230\u524d\u7aef\u9879\u76ee\u4e2d\u5462\uff1f<\/p>\n\n\n\n

\u8981\u60f3\u8fbe\u5230\u8fd9\u4e2a\u76ee\u7684\uff0c\u6211\u4eec\u4fbf\u9700\u8981\u4e00\u4e2a\u65b0\u7684\u4e1c\u897f \u2014\u2014 \u6253\u5305\u5de5\u5177\u3002\u6253\u5305\u5de5\u5177\uff0c\u987e\u540d\u601d\u4e49\u5c31\u662f\u4e00\u4e2a\u7528\u6765\u5bf9\u4ee3\u7801\u6253\u5305\u7684\u5de5\u5177\u3002\u90a3\u4e48\u4e3a\u4ec0\u4e48\u8981\u5bf9\u4ee3\u7801\u8fdb\u884c\u6253\u5305\u5462\uff1f\u5728ES\u6a21\u5757\u5316\u6807\u51c6\u521a\u521a\u4ea7\u751f\u65f6\uff0c\u652f\u6301\u6807\u51c6\u7684\u6d4f\u89c8\u5668\u4e0d\u591f\u591a\uff0c\u5982\u679c\u4f7f\u7528ES\u6a21\u5757\u5316\u4f1a\u5bfc\u81f4\u9879\u76ee\u7684\u517c\u5bb9\u6027\u5947\u5dee\uff0c\u4f46\u662f\u6211\u4eec\u8fd9\u4e9b\u7a0b\u5e8f\u5458\u4f9d\u7136\u60f3\u8981\u4f7f\u7528ES\u7684\u6a21\u5757\u5316\u6807\u51c6\uff0c\u600e\u4e48\u529e\u5462\uff1f\u6253\u5305\u5de5\u5177\u5e2e\u52a9\u4f60\uff01\u6253\u5305\u5de5\u5177\u53ef\u4ee5\u5bf9\u4ee3\u7801\u8fdb\u884c\u7f16\u8bd1\uff0c\u5c06ES\u6a21\u5757\u5316\u7684\u8bed\u6cd5\u8f6c\u6362\u4e3a\u53ef\u4ee5\u5b9e\u73b0\u540c\u6837\u7684\u529f\u80fd\u7684\u65e7\u7248\u7684\u8bed\u6cd5\u3002\u6211\u4eec\u60f3\u5728\u524d\u7aef\u4f7f\u7528npm\u6765\u7ba1\u7406\u4f9d\u8d56\u600e\u4e48\u529e\uff1f\u6ca1\u5173\u7cfb\u76f4\u63a5\u4f7f\u7528\uff01\u6253\u5305\u5de5\u5177\u53ef\u4ee5\u5e2e\u52a9\u4f60\u5c06npm\u4e2d\u7684\u5305\u5bfc\u5165\u5230\u524d\u7aef\u9875\u9762\u4e2d\uff01\u603b\u7684\u6765\u8bf4\uff0c\u6253\u5305\u5de5\u5177\u53ef\u4ee5\u5e2e\u52a9\u6211\u4eec\u5bf9\u4ee3\u7801\u201c\u6253\u5305\u201d\uff0c\u6709\u4e86\u6253\u5305\u5de5\u5177\u540e\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u4ee5node\u5de5\u7a0b\u7684\u5f62\u5f0f\u53bb\u7ba1\u7406\u5e94\u7528\uff0c\u6253\u5305\u5de5\u5177\u4f1a\u81ea\u52a8\u5c06\u4f60\u7684\u4ee3\u7801\u6253\u5305\u4e3a\u53ef\u4ee5\u76f4\u63a5\u8fd0\u884c\u5728\u6d4f\u89c8\u5668\u4e2d\u7684\u9879\u76ee\uff01<\/p>\n\n\n\n

\u8bf4\u5230\u8fd9\u91cc\uff0c\u6709\u7684\u540c\u5b66\u53ef\u80fd\u4f1a\u4ea7\u751f\u7591\u95ee\u3002ES\u6a21\u5757\u521a\u521a\u4ea7\u751f\u65f6\u517c\u5bb9\u6027\u4e0d\u597d\uff0c\u4f46\u662f15\u5e74\u5230\u73b0\u5728\u5df2\u7ecf\u5f88\u4e45\u4e86\u554a\uff01\u73b0\u5728\u5e94\u8be5\u6ca1\u6709\u4ec0\u4e48\u592a\u5927\u7684\u517c\u5bb9\u95ee\u9898\u4e86\u5427\uff01\u786e\u5b9e\u5982\u6b64\uff01\u73b0\u5728\u6765\u8bb2\u6211\u4eec\u5b8c\u5168\u53ef\u4ee5\u76f4\u63a5\u5728\u6d4f\u89c8\u5668\u4e2d\u4f7f\u7528ES\u6a21\u5757\u5316\u53bb\u7f16\u5199\u524d\u7aef\u4ee3\u7801\uff01\u4f46\u662f\u524d\u7aef\u7684\u6a21\u5757\u5316\u5148\u5929\u5c31\u6709\u4e00\u4e2a\u7f3a\u9677\uff0c\u5c31\u662f\u6a21\u5757\u4e2d\u7684\u4ee3\u7801\u9700\u8981\u901a\u8fc7\u7f51\u7edc\u53bb\u52a0\u8f7d\uff0c\u8fd9\u6837\u5c31\u5e26\u6765\u4e00\u4e2a\u5f88\u4e25\u91cd\u7684\u95ee\u9898\uff0c\u524d\u7aef\u4e2d\u7684\u6bcf\u4e2a\u6a21\u5757\u90fd\u9700\u8981\u6d4f\u89c8\u5668\u53d1\u9001\u8bf7\u6c42\u6765\u52a0\u8f7d\u300210\u4e2a\u6a21\u5757\u5c31\u8981\u53d110\u6b21\u8bf7\u6c42\uff0c100\u4e2a\u6a21\u5757\u5c31\u8981\u53d1100\u6b21\u8bf7\u6c42\uff0c\u6240\u4ee5\u5373\u4f7f\u652f\u6301ES\u6a21\u5757\u89c4\u8303\uff0c\u6211\u4eec\u4f9d\u7136\u4e0d\u5efa\u8bae\u5728\u6d4f\u89c8\u5668\u4e2d\u76f4\u63a5\u4f7f\u7528\u3002<\/p>\n\n\n\n

\u4e0e\u76f4\u63a5\u4f7f\u7528\u6a21\u5757\u89c4\u8303\u4e0d\u540c\uff0c\u6253\u5305\u5de5\u5177\u5728\u6253\u5305\u4ee3\u7801\u65f6\uff0c\u4f1a\u5bf9\u6240\u6709\u4ee3\u7801\u8fdb\u884c\u89e3\u6790\u3002\u4f1a\u5c06\u6240\u6709\u7684\u4ee3\u7801\u7edf\u4e00\u6253\u5305\u4e3a\u4e00\u4e2a\uff08\u6216\u591a\u4e2a\uff09\u6587\u4ef6\uff0c\u5e76\u4e14\u6253\u5305\u65f6\u4f1a\u5bf9\u4ee3\u7801\u8fdb\u884c\u68c0\u67e5\uff0c\u53ea\u5c06\u4f7f\u7528\u5230\u7684\u6a21\u5757\u6253\u5305\u5230\u6700\u7ec8\u6587\u4ef6\u4e2d\u3002\u8fd9\u6837\u4e00\u6765\u51cf\u5c11\u4e86\u6587\u4ef6\u7684\u6570\u91cf\uff0c\u540c\u65f6\u4e5f\u51cf\u5c11\u4e86\u6587\u4ef6\u7684\u5927\u5c0f\uff0c\u4f7f\u4ee3\u7801\u7684\u52a0\u8f7d\u901f\u5ea6\u66f4\u5feb\uff0c\u7528\u6237\u4f53\u9a8c\u4e5f\u66f4\u597d\u3002<\/p>\n\n\n\n

Webpack<\/h2>\n\n\n\n

Webpack\u5c31\u662f\u8fd9\u6837\u4e00\u6b3e\u6253\u5305\u5de5\u5177\u3002\u5728\u5b83\u7684\u5b98\u7f51\u662f\u8fd9\u6837\u63cf\u8ff0\u7684\uff1a<\/p>\n\n\n\n

\u672c\u8d28\u4e0a\uff0cwebpack<\/strong>\u00a0\u662f\u4e00\u4e2a\u7528\u4e8e\u73b0\u4ee3 JavaScript \u5e94\u7528\u7a0b\u5e8f\u7684\u00a0\u9759\u6001\u6a21\u5757\u6253\u5305\u5de5\u5177<\/em>\u3002\u5f53 webpack \u5904\u7406\u5e94\u7528\u7a0b\u5e8f\u65f6\uff0c\u5b83\u4f1a\u5728\u5185\u90e8\u4ece\u4e00\u4e2a\u6216\u591a\u4e2a\u5165\u53e3\u70b9\u6784\u5efa\u4e00\u4e2a\u00a0\u4f9d\u8d56\u56fe(dependency graph)\uff0c\u7136\u540e\u5c06\u4f60\u9879\u76ee\u4e2d\u6240\u9700\u7684\u6bcf\u4e00\u4e2a\u6a21\u5757\u7ec4\u5408\u6210\u4e00\u4e2a\u6216\u591a\u4e2a\u00a0bundles<\/em>\uff0c\u5b83\u4eec\u5747\u4e3a\u9759\u6001\u8d44\u6e90\uff0c\u7528\u4e8e\u5c55\u793a\u4f60\u7684\u5185\u5bb9\u3002<\/p>\n\n\n\n

webpack\u662f\u9759\u6001\u6a21\u5757\u6253\u5305\u5de5\u5177\uff0c\u5b83\u53ef\u4ee5\u5c06\u4f7f\u7528ES\u6a21\u5757\u5316\u89c4\u8303\uff08\u52a8\u6001\u6a21\u5757\uff09\u7f16\u5199\u7684\u4ee3\u7801\u8f6c\u6362\u4e3a\u9759\u6001\u7684\u6a21\u5757\u4ee3\u7801\u3002webpack\u5728\u6253\u5305\u65f6\uff0c\u6839\u636e\u6307\u5b9a\u7684\u5165\u53e3\u6587\u4ef6\uff08\u4e00\u4e2a\u6216\u591a\u4e2a\uff09\u6784\u5efa\u4f9d\u8d56\u56fe\uff0c\u6240\u8c13\u7684\u4f9d\u8d56\u6307\u7684\u5c31\u662f\u5165\u53e3\u6587\u4ef6\u5728\u6267\u884c\u65f6\u6240\u9700\u8981\u7684\u8d44\u6e90\uff08js\u3001css\u3001\u56fe\u7247\u7b49\uff09\u3002\u4f9d\u8d56\u56fe\u751f\u6210\u540e\uff0cwebpack\u4f1a\u5c06\u56fe\u4e2d\u6240\u9700\u7684\u4f9d\u8d56\u6253\u5305\u5230\u4e00\u4e2a\u6587\u4ef6\u4e2d\u3002<\/p>\n\n\n\n

\u4f7f\u7528webpack<\/h2>\n\n\n\n

\u73b0\u5728\u6211\u4eec\u6765\u4f7f\u7528\u4e00\u4e2a\u7b80\u5355\u7684\u6848\u4f8b\u6765\u6f14\u793awebpack\u7684\u4f7f\u7528\uff0c\u521b\u5efa\u9879\u76ee\uff1a<\/p>\n\n\n\n

    \n
  1. \u521b\u5efamy-webpack\u76ee\u5f55<\/li>\n\n\n\n
  2. \u8c03\u7528npm init -y<\/code>\u6216yarn init -y<\/code>\u521d\u59cb\u5316\u9879\u76ee<\/li>\n\n\n\n
  3. \u5728\u76ee\u5f55\u4e0b\u521b\u5efa\u5b50\u76ee\u5f55src\u548cdist<\/li>\n\n\n\n
  4. \u5728\u9879\u76ee\u4e2d\u5b89\u88c5\u5f00\u53d1\u4f9d\u8d56webpack\u548cwebpack-cli\uff08yarn add webpack webpack-cli -D \u6216 npm i webpack webpack-cli -D\uff09<\/li>\n<\/ol>\n\n\n\n

    webpack\u76ee\u5f55\u4e0b\u5fc5\u987b\u8981\u5305\u542b\u4e24\u4e2a\u76ee\u5f55src\u548cdist\uff0csrc\u7528\u6765\u5b58\u653e\u6e90\u7801\uff0cdist\u7528\u6765\u5b58\u653e\u6253\u5305\u540e\u7684\u4ee3\u7801\u3002\u7f16\u5199\u9879\u76ee\u65f6\uff0c\u6240\u6709\u7684\u4ee3\u7801\u90fd\u8981\u7f16\u5199\u5230src\u76ee\u5f55\u4e0b\uff0c\u7f16\u7801\u5b8c\u6bd5\u540e\u4f7f\u7528webpack\u5bf9\u4ee3\u7801\u8fdb\u884c\u6253\u5305\uff0cwebpack\u4f1a\u5c06\u6253\u5305\u540e\u7684\u4ee3\u7801\u653e\u5165\u5230dist\u76ee\u5f55\u4e2d\u3002\u6362\u53e5\u8bdd\u8bf4\uff0c\u6700\u7ec8\u8981\u8fd0\u884c\u7684\u662f\u6253\u5305\u540e\u7684\u4e5f\u5c31\u662fdist\u76ee\u5f55\u4e2d\u7684\u4ee3\u7801\u3002<\/p>\n\n\n\n

    webpack-cli\u5305\u662fwebpack\u7684\u547d\u4ee4\u884c\u5de5\u5177\uff0c\u5b89\u88c5\u540e\u53ef\u4ee5\u5728\u547d\u4ee4\u884c\u4e2d\u8c03\u7528webpack\u7684\u6253\u5305\u6307\u4ee4\u3002webpack\u5305\u662fwebpack\u7684\u6838\u5fc3\u4ee3\u7801\uff0c\u6240\u6709\u6253\u5305\u7684\u903b\u8f91\u90fd\u5728\u6838\u5fc3\u4ee3\u7801\u4e2d\u7f16\u5199\u3002<\/p>\n\n\n\n

    \u7f16\u5199\u4ee3\u7801\uff1a<\/p>\n\n\n\n

      \n
    1. \u5b89\u88c5jQuery\uff08yarn add jquery \u6216 npm i jquery\uff09<\/li>\n\n\n\n
    2. \u5728src\u4e0b\u521b\u5efaindex.js<\/li>\n\n\n\n
    3. \u5728dist\u4e0b\u521b\u5efaindex.html<\/li>\n<\/ol>\n\n\n\n

      src\/index.js\uff1a<\/p>\n\n\n\n

      import $ from "jquery"\n\n$("body").append("<h1>\u4f60\u597d\uff01Webpack<\/h1>")<\/code><\/pre><\/div>\n\n\n\n
      dist\/index.html\uff1a<\/p>\n\n\n\n
      <!DOCTYPE html>\n<html lang="zh">\n<head>\n    <meta charset="UTF-8">\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Document<\/title>\n    <script defer src=".\/main.js"><\/script>\n<\/head>\n<body>\n    \n<\/body>\n<\/html><\/code><\/pre><\/div>\n\n\n\n
      webpack\u9ed8\u8ba4\u4f1a\u5c06src\u4e0b\u7684index.js\u6253\u5305\u5230dist\u76ee\u5f55\u4e0b\uff0c\u5e76\u91cd\u547d\u540d\u4e3amain.js\uff0c\u6240\u4ee5\u6211\u4eec\u5c06index.html\u76f4\u63a5\u5b9a\u4e49\u5230\u4e86dist\u76ee\u5f55\u4e2d\uff0c\u540c\u65f6\u901a\u8fc7src\u6807\u7b7e\u5f15\u5165\u4e86\u6253\u5305\u540e\u7684main.js\u6587\u4ef6\u3002<\/p>\n\n\n\n
      \u4ee3\u7801\u7f16\u5199\u5b8c\u6bd5\u540e\uff0c\u6267\u884c\u547d\u4ee4\u6765\u6253\u5305\u9879\u76ee\uff1a<\/p>\n\n\n\n
      yarn webpack<\/code><\/pre><\/div>\n\n\n\n
      \u6216<\/p>\n\n\n\n
      npx webpack<\/code><\/pre><\/div>\n\n\n\n
      \u4e5f\u53ef\u4ee5\u5c06webpack\u6dfb\u52a0\u5230package.json\u7684scripts\u4e2d\uff1a<\/p>\n\n\n\n
      "scripts": {\n  "build":"webpack"\n}<\/code><\/pre><\/div>\n\n\n\n
      \u8fd9\u6837\u5c31\u53ef\u4ee5\u901a\u8fc7yarn build<\/code>\u6216npm run build<\/code>\u6765\u6267\u884c\u6253\u5305\u3002<\/p>\n\n\n\n
      webpack.config.js<\/h2>\n\n\n\n
      \u9ed8\u8ba4\u914d\u7f6e\u4e0b\uff0cwebpack\u4ec5\u4ec5\u5c06src\u4e0b\u7684index.js\u6253\u5305\u4e3adist\u4e0b\u7684main.js\uff0c\u663e\u7136\u8fd9\u6837\u8fd8\u4e0d\u591f\u7075\u6d3b\u3002\u5728\u9879\u76ee\u4e2d\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2awebpack.config.js\u6765\u5b9a\u5236webpack\u7684\u6253\u5305\u884c\u4e3a\u3002\u8fd9\u4e2a\u6587\u4ef6\u5927\u6982\u957f\u6210\u8fd9\u4e2a\u6837\u5b50\uff1a<\/p>\n\n\n\n
      webpack.config.js<\/p>\n\n\n\n
      const path = require('path');\n\nmodule.exports = {\n  mode: ...,\n  entry: ...,\n  output: ...,\n  module: ...,\n  plugins: ...,\n\n};<\/code><\/pre><\/div>\n\n\n\n
      mode\uff0c\u6253\u5305\u6a21\u5f0f\uff0c\u53ef\u9009\u503c\uff08”production”\uff0c”development”\uff0c”none”\uff09<\/p>\n\n\n\n
      entry\uff0c\u6253\u5305\u7684\u5165\u53e3\u6587\u4ef6\uff0c\u914d\u7f6e\u65b9\u5f0f\uff1a<\/p>\n\n\n\n
      entry: '.\/path\/to\/my\/entry\/file.js'\n\nentry: {\n  main: '.\/path\/to\/my\/entry\/file.js',\n}\n\nentry: ['.\/src\/file_1.js', '.\/src\/file_2.js']\n\nentry: {\n  app: '.\/src\/app.js',\n  adminApp: '.\/src\/adminApp.js',\n}<\/code><\/pre><\/div>\n\n\n\n
      output\uff0c\u6253\u5305\u540e\u6587\u4ef6\u8f93\u51fa\u4f4d\u7f6e\uff0c\u914d\u7f6e\u65b9\u5f0f\uff1a<\/p>\n\n\n\n
      output: {\n  filename: 'bundle.js',\n}\n\noutput: {\n  filename: '[name].js',\n  path: __dirname + '\/dist',\n}<\/code><\/pre><\/div>\n\n\n\n
      module\uff0c\u914d\u7f6ewebpack\u7684loader\uff0c\u914d\u7f6e\u65b9\u5f0f\uff1a<\/p>\n\n\n\n
      module: {\n  rules: [\n    { test: \/\\.css$\/, use: 'css-loader' },\n    { test: \/\\.ts$\/, use: 'ts-loader' },\n  ],\n}\n\n\nmodule: {\n  rules: [\n    {\n      test: \/\\.css$\/,\n      use: [\n        { loader: 'style-loader' },\n        {\n          loader: 'css-loader',\n          options: {\n            modules: true,\n          },\n        },\n        { loader: 'sass-loader' },\n      ],\n    },\n  ],\n}<\/code><\/pre><\/div>\n\n\n\n
      plugins\uff0c\u914d\u7f6ewebpack\u7684plugin\uff08\u63d2\u4ef6\uff09\uff0c\u914d\u7f6e\u65b9\u5f0f\uff1a<\/p>\n\n\n\n
      plugins: [\n  new webpack.ProgressPlugin(),\n  new HtmlWebpackPlugin({ template: '.\/src\/index.html' }),\n]<\/code><\/pre><\/div>\n\n\n\n
      loader\uff08\u52a0\u8f7d\u5668\uff09<\/h2>\n\n\n\n
      webpack\u672c\u8eab\u4ec5\u4ec5\u80fd\u5904\u7406js\u6587\u4ef6\uff0c\u4f46\u662f\u5728\u5b9e\u9645\u5f00\u53d1\u4e2d\u9664\u4e86js\u6587\u4ef6\u5916\uff0c\u8fd8\u6709\u4e00\u4e9b\u5176\u4ed6\u7c7b\u578b\u7684\u6587\u4ef6\u6211\u4eec\u4e5f\u5e0c\u671b\u53ef\u4ee5\u4e00\u8d77\u6253\u5305\uff0c\u8fd9\u5c31\u9700\u8981\u4f7f\u7528\u5230loader\u3002\u901a\u8fc7loader\u53ef\u4ee5\u5bf9webpack\u8fdb\u884c\u6269\u5c55\u4f7f\u5176\u5177\u5907\u5904\u7406\u67d0\u79cd\u7c7b\u578b\u6587\u4ef6\u7684\u80fd\u529b\u3002<\/p>\n\n\n\n
      \u90e8\u5206loader<\/h3>\n\n\n\n
        \n
      • \u6837\u5f0f\u76f8\u5173\u7684\uff1a\n
          \n
        1. style-loader<\/li>\n\n\n\n
        2. css-loader<\/li>\n\n\n\n
        3. less-loader<\/li>\n\n\n\n
        4. sass-loader<\/li>\n\n\n\n
        5. postcss-loader<\/li>\n\n\n\n
        6. stylus-loader<\/li>\n<\/ol>\n<\/li>\n\n\n\n
        7. \u7f16\u8bd1\u76f8\u5173\u7684\uff1a\n
            \n
          1. babel-loader<\/li>\n\n\n\n
          2. ts-loader<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n
            \u793a\u4f8b\uff1a<\/h3>\n\n\n\n
            \u5904\u7406CSS\uff1a<\/strong><\/p>\n\n\n\n
            \u5b89\u88c5\uff1a<\/p>\n\n\n\n
            npm install style-loader css-loader -D<\/code><\/pre><\/div>\n\n\n\n
            \u914d\u7f6e\uff1a<\/p>\n\n\n\n
             module: {\n    rules: [\n      {\n        test: \/\\.css$\/i,\n        use: ["style-loader", "css-loader"],\n      },\n    ],\n  }<\/code><\/pre><\/div>\n\n\n\n
            \u52a0\u8f7d\u56fe\u7247\uff1a<\/strong><\/p>\n\n\n\n
            {\n    test: \/\\.(png|svg|jpg|jpeg|gif)$\/i,\n    type: "asset\/resource"\n}<\/code><\/pre><\/div>\n\n\n\n
            \u5904\u7406Less\uff1a<\/strong><\/p>\n\n\n\n
            \u5b89\u88c5\uff1a<\/p>\n\n\n\n
            npm install less less-loader -D<\/code><\/pre><\/div>\n\n\n\n
            \u914d\u7f6e\uff1a<\/p>\n\n\n\n
            module: {\n    rules: [\n      {\n        test: \/\\.less$\/i,\n        use: [\n          "style-loader",\n          "css-loader",\n          "less-loader",\n        ],\n      },\n    ],\n  }<\/code><\/pre><\/div>\n\n\n\n
            babel\uff1a<\/strong><\/p>\n\n\n\n
            \u5b89\u88c5\uff1a<\/p>\n\n\n\n
            npm install -D babel-loader @babel\/core @babel\/preset-env<\/code><\/pre><\/div>\n\n\n\n
            \u914d\u7f6e\uff1a<\/p>\n\n\n\n
            module: {\n  rules: [\n    {\n      test: \/\\.m?js$\/,\n      exclude: \/(node_modules|bower_components)\/,\n      use: {\n        loader: 'babel-loader',\n        options: {\n          presets: ['@babel\/preset-env']\n        }\n      }\n    }\n  ]\n}<\/code><\/pre><\/div>\n\n\n\n
            plugin\uff08\u63d2\u4ef6\uff09<\/h2>\n\n\n\n
            \u63d2\u4ef6\u540c\u6837\u53ef\u4ee5\u6269\u5c55webpack\u7684\u529f\u80fd\uff0c\u5b83\u53ef\u4ee5\u5904\u7406\u4e00\u4e0bloader\u65e0\u6cd5\u5b8c\u6210\u7684\u5de5\u4f5c\u3002<\/p>\n\n\n\n
            HtmlWebpackPlugin<\/strong>\uff1a<\/p>\n\n\n\n
            \u5b89\u88c5\uff1a<\/p>\n\n\n\n
            npm install html-webpack-plugin -D<\/code><\/pre><\/div>\n\n\n\n
            \u914d\u7f6e\uff1a<\/p>\n\n\n\n
            plugins: [\n    new HtmlWebpackPlugin({\n        title: "Output Management"\n    })\n]<\/code><\/pre><\/div>\n\n\n\n
            \u5f00\u53d1\u670d\u52a1\u5668<\/h2>\n\n\n\n
            \u5b89\u88c5\uff1a<\/p>\n\n\n\n
            npm install --save-dev webpack-dev-server<\/code><\/pre><\/div>\n\n\n\n
            \u914d\u7f6e\uff1a<\/p>\n\n\n\n
            devServer: {\n    static: '.\/dist',\n}<\/code><\/pre><\/div>\n\n\n\n
            \u542f\u52a8\uff1a<\/p>\n\n\n\n
            npx webpack serve --open<\/code><\/pre><\/div>\n\n\n\n
            Vite<\/h2>\n\n\n\n
            \u9664\u4e86Webpack\u5916\uff0c\u8fd8\u6709\u4e00\u4e9b\u5176\u4ed6\u7684\u6253\u5305\u5de5\u5177\uff0c\u5728\u4f17\u591a\u7684\u6253\u5305\u5de5\u5177\u4e2dVite\u662fWebpack\u7684\u6709\u529b\u7ade\u4e89\u8005\u3002\u6253\u5305\u5de5\u5177\u7684\u5de6\u53f3\u90fd\u662f\u76f8\u540c\u7684\uff0c\u4e0d\u540c\u70b9\u5c31\u5728\u4e8e\u6253\u5305\u7684\u6027\u80fd\u3002Webpack\u7684\u6253\u5305\u5de5\u4f5c\u6bd4\u8f83\u7b80\u5355\uff0c\u5728\u5f00\u53d1\u73af\u5883\u548c\u751f\u6210\u73af\u5883\u4e2d\u90fd\u4f1a\u7b80\u5355\u7684\u76f4\u63a5\u5c06\u6240\u6709\u6a21\u5757\u76f4\u63a5\u6253\u5305\u3002\u76f4\u63a5\u6253\u5305\u901f\u5ea6\u6bd4\u8f83\u6162\uff0c\u5bfc\u81f4\u5f00\u53d1\u5927\u578b\u9879\u76ee\u65f6\u6bcf\u6b21\u91cd\u6784\u90fd\u9700\u8981\u7b49\u5f85\u5f88\u957f\u7684\u65f6\u95f4\u3002<\/p>\n\n\n\n
            Vite\u53e6\u8f9f\u8e4a\u5f84\uff0c\u5728\u5f00\u53d1\u73af\u5883\u4e2d\u4e0d\u518d\u4f7f\u7528\u4f20\u7edf\u7684\u6a21\u5f0f\u5bf9\u9879\u76ee\u8fdb\u884c\u6253\u5305\uff0c\u800c\u662f\u91c7\u7528ES\u6a21\u5757\u5316\u6765\u5f15\u5165\u6a21\u5757\uff0c\u8fd9\u6837\u4fbf\u5927\u5927\u7684\u52a0\u5feb\u4e86\u5f00\u53d1\u65f6\u7684\u91cd\u6784\u901f\u5ea6\u3002\u800c\u5728\u751f\u6210\u73af\u5883\u4e2d\uff0c\u4e3a\u4e86\u63d0\u9ad8\u8bbf\u95ee\u901f\u5ea6\u4f9d\u7136\u4f1a\u6b63\u5e38\u7684\u5bf9\u9879\u76ee\u8fdb\u884c\u8fdb\u884c\u6253\u5305\u5de5\u4f5c\u3002<\/p>\n\n\n\n
            \u521b\u5efa\u9879\u76ee<\/h2>\n\n\n\n
            npm create vite@latest<\/code><\/pre><\/div>\n\n\n\n
            yarn create vite<\/code><\/pre><\/div>\n\n\n\n
            pnpm create vite<\/code><\/pre><\/div>\n\n\n\n
            \u8fd9\u884c\u547d\u4ee4\u540e\uff0c\u6839\u636e\u63d0\u793a\u6765\u9009\u62e9\u9879\u76ee\u7684\u914d\u7f6e\uff0c\u5e76\u5728\u9879\u76ee\u4e2d\u5b89\u88c5\u4f9d\u8d56\u3002\u4f9d\u8d56\u5b89\u88c5\u540e\u53ef\u4ee5\u901a\u8fc7yarn dev<\/code>\u6765\u542f\u52a8\u5f00\u53d1\u670d\u52a1\u5668\u3002\u5f00\u53d1\u5b8c\u6bd5\u4f7f\u7528yarn build<\/code>\u6765\u5bf9\u9879\u76ee\u8fdb\u884c\u6253\u5305\u3002<\/p>\n\n\n\n
            \u76f8\u8f83\u4e8eWebpack\uff0cVite\u66f4\u6613\u4e8e\u4f7f\u7528\uff0c\u5728Vite\u4e2d\u76f4\u63a5\u5f00\u542f\u4e86\u5404\u79cd\u5e38\u7528\u529f\u80fd\uff0c\u5982CSS\u3001CSS\u9884\u5904\u7406\u5668\u3001\u8d44\u6e90\u52a0\u8f7d\u5668\u7b49\u90fd\u5df2\u7ecf\u9ed8\u8ba4\u652f\u6301\uff0c\u6211\u4eec\u9700\u8981\u5728\u505a\u5355\u72ec\u914d\u7f6e\uff0c\u53ea\u9700\u6839\u636e\u9700\u8981\u5b89\u88c5\u4f9d\u8d56\u5373\u53ef\u3002\u540c\u65f6\uff0cvite\u4e5f\u53ef\u4ee5\u901a\u8fc7\u914d\u7f6e\u6587\u4ef6\u6765\u505a\u4e00\u4e9b\u7279\u6b8a\u7684\u914d\u7f6e\u6216\u5f15\u5165\u63d2\u4ef6\u7b49\uff0c\u4f46\u662f\u672c\u8bfe\u91cd\u70b9\u4e3b\u8981\u5728\u4e8e\u6253\u5305\u5de5\u5177\u7684\u4ecb\u7ecd\uff0c\u6545\u800c\u4e0d\u518d\u5bf9\u6253\u5305\u5de5\u5177\u505a\u66f4\u591a\u7684\u4ecb\u7ecd\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
            Node.js\u7684\u51fa\u73b0\u4f7fjs\u5f97\u4ee5\u5728\u670d\u52a1\u5668\u4e2d\u8fd0\u884c\uff0c\u6a21\u5757\u5316\u7684\u5f15\u5165\u4f7fjs\u5728\u7f16\u5199\u5927\u578b\u5e94\u7528\u65f6\u66f4\u52a0\u7684\u5f97\u5fc3\u5e94\u624b\u3002\u4f46\u662f\u6211\u4eec\u6bd5\u7adf\u8fd8 […]<\/p>\n","protected":false},"author":1,"featured_media":6287,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[275],"tags":[],"_links":{"self":[{"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/posts\/6544"}],"collection":[{"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lilichao.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6544"}],"version-history":[{"count":6,"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/posts\/6544\/revisions"}],"predecessor-version":[{"id":6551,"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/posts\/6544\/revisions\/6551"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/media\/6287"}],"wp:attachment":[{"href":"https:\/\/lilichao.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lilichao.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lilichao.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}