\u770b\u5b8c\u672c\u7bc7\u4f60\u5c06\u57fa\u672c\u4e86\u89e3webpack！！！<\/p>\n
\u76ee\u5f55<\/p>\n
\u4e00\u3001Webpack \u7684\u4f5c\u7528<\/p>\n
\u00a0\u00a01\u3001\u57fa\u672c\u914d\u7f6e\u7ed3\u6784<\/p>\n
2\u3001\u914d\u7f6e\u9879\u8be6\u89e3<\/p>\n
1. entry \u2014\u2014 \u6784\u5efa\u5165\u53e3<\/p>\n
2. output \u2014\u2014 \u8f93\u51fa\u914d\u7f6e<\/p>\n
3. mode：\u6a21\u5f0f\u8bbe\u7f6e<\/p>\n
\u00a04. module：\u6a21\u5757\u89c4\u5219<\/p>\n
\u00a0\u00a05. plugins：\u63d2\u4ef6\u673a\u5236<\/p>\n
\u00a06. resolve：\u6a21\u5757\u89e3\u6790\u914d\u7f6e（\u53ef\u9009）<\/p>\n
\u00a07. devServer：\u5f00\u53d1\u670d\u52a1\u5668（\u53ef\u9009）<\/p>\n
8. devtool：\u8c03\u8bd5\u5de5\u5177（\u53ef\u9009）<\/p>\n
\u00a09. target：\u76ee\u6807\u5e73\u53f0（\u53ef\u9009）<\/p>\n
\u4e8c\u3001\u6784\u5efa\u6d41\u7a0b<\/p>\n
1. \u521d\u59cb\u5316（Initialization）<\/p>\n
1. \u8bfb\u53d6\u914d\u7f6e\u6587\u4ef6<\/p>\n
2. \u521d\u59cb\u5316 Compiler \u5bf9\u8c61<\/p>\n
\u00a03. \u6ce8\u518c\u6240\u6709\u63d2\u4ef6（Plugin \u6ce8\u518c\u9636\u6bb5）<\/p>\n
\u00a02. \u6784\u5efa\u6a21\u5757\u56fe（Build Dependency Graph）<\/p>\n
\u00a03. \u6a21\u5757\u8f6c\u6362\u4e0e\u89e3\u6790<\/p>\n
\u793a\u4f8b 1：JS \u6587\u4ef6（\u53ef\u80fd\u542b ES6\u3001TS）<\/p>\n
\u793a\u4f8b 2：CSS \u6587\u4ef6<\/p>\n
\u793a\u4f8b 3：\u56fe\u7247\u6587\u4ef6<\/p>\n
\u00a04. \u751f\u6210\u4ee3\u7801\u5757（Chunk）\u4e0e\u6587\u4ef6（Asset）<\/p>\n
1\u3001 Chunk（\u4ee3\u7801\u5757）<\/p>\n
\u5e38\u89c1\u7684 Chunk \u7c7b\u578b：<\/p>\n
\u00a0🔁 \u4e3e\u4e2a\u4f8b\u5b50<\/p>\n
\u4e3a\u4ec0\u4e48\u8981\u628a\u4ee3\u7801\u5206\u6210\u591a\u4e2a chunk？<\/p>\n
1. \u6027\u80fd\u4f18\u5316：<\/p>\n
2. \u7f13\u5b58\u4f18\u5316：<\/p>\n
\u00a02\u3001Asset（\u6700\u7ec8\u4ea7\u51fa\u8d44\u6e90\u6587\u4ef6）<\/p>\n
3. Chunk \u8f6c\u6362\u4e3a Asset（\u00a0 bundle）<\/p>\n
4. \u8f93\u51fa Asset \u5230 output.path<\/p>\n
5. \u8f93\u51fa\u9636\u6bb5（Emit）<\/p>\n
\u4e09\u3001\u63d2\u4ef6\u673a\u5236<\/p>\n
1\u3001\u63d2\u4ef6\u201c\u6ce8\u518c\u201d\u53d1\u751f\u5728 \u2014\u2014 \u2705 \u521d\u59cb\u5316\u9636\u6bb5（Initialization）<\/p>\n
2\u3001\u63d2\u4ef6\u201c\u6267\u884c\u201d\u53d1\u751f\u5728 \u2014\u2014 \u2705 \u6784\u5efa\u8fc7\u7a0b\u7684\u6bcf\u4e00\u4e2a\u9636\u6bb5（Build Lifecycle）<\/p>\n
3\u3001compilation<\/p>\n
1. \u6a21\u5757\u7684\u7ba1\u7406<\/p>\n
2. \u6784\u5efa Chunk<\/p>\n
3. \u751f\u6210 Asset（\u8f93\u51fa\u8d44\u6e90）<\/p>\n
4. Plugin \u7684\u751f\u547d\u5468\u671f\u94a9\u5b50<\/p>\n
\u56db\u3001\u914d\u7f6e\u9879\u4e4b\u95f4\u7684\u76f8\u4e92\u5173\u7cfb<\/p>\n
1. entry \u4e0e module.rules<\/p>\n
2. entry \u4e0e output<\/p>\n
3. module.rules \u4e0e plugins<\/p>\n
4. mode \u4e0e\u5176\u4ed6\u6240\u6709\u914d\u7f6e\u9879<\/p>\n
5. devServer \u4e0e output<\/p>\n
6. plugins \u4e0e output<\/p>\n
\u4e94\u3001 Loader<\/p>\n
1\u3001\u4ec0\u4e48\u662f Loader？<\/p>\n
2\u3001\u4e3a\u4ec0\u4e48\u9700\u8981 Loader？<\/p>\n
3\u3001\u5e38\u89c1 Loader \u7c7b\u578b<\/p>\n
1\u3001 \u4ec0\u4e48\u662f babel-loader？<\/p>\n
2\u3001\u4f60\u4e3a\u4ec0\u4e48\u9700\u8981 babel-loader？<\/p>\n
3\u3001\u6838\u5fc3\u6982\u5ff5\u8bf4\u660e<\/p>\n
4\u3001\u5e38\u89c1\u7528\u9014<\/p>\n
4\u3001Webpack \u5982\u4f55\u8c03\u7528 Loader？<\/p>\n
\u00a0\u516d\u3001\u6784\u5efa\u4f18\u5316\u4e0e\u9ad8\u7ea7\u529f\u80fd<\/p>\n
1. \u4ee3\u7801\u5206\u5272（Code Splitting）<\/p>\n
2. Tree Shaking<\/p>\n
Tree Shaking \u7684\u57fa\u672c\u539f\u7406<\/p>\n
3. \u61d2\u52a0\u8f7d（Lazy Loading）\u4e0e\u9884\u52a0\u8f7d<\/p>\n
1\u3001\u4ec0\u4e48\u662f\u61d2\u52a0\u8f7d（Lazy Loading）？<\/p>\n
Webpack \u5982\u4f55\u5b9e\u73b0\u61d2\u52a0\u8f7d？<\/p>\n
2\u3001\u4ec0\u4e48\u662f\u9884\u52a0\u8f7d（Preload）\u548c\u9884\u53d6（Prefetch）？<\/p>\n
1. webpackPrefetch: true \u2192 \u6d4f\u89c8\u5668\u7a7a\u95f2\u65f6\u52a0\u8f7d\u00a0<\/p>\n
2. webpackPreload: true \u2192 \u5f53\u524d\u5e27\u5c31\u52a0\u8f7d\u00a0<\/p>\n
Webpack \u7684\u4e3b\u8981\u4f5c\u7528\u662f：<\/p>\n
\u6a21\u5757\u6253\u5305：\u5c06\u591a\u4e2a\u6a21\u5757（JS\u3001CSS\u3001\u56fe\u7247\u7b49）\u6253\u5305\u6210\u4e00\u4e2a\u6216\u591a\u4e2a\u6587\u4ef6\u3002<\/p>\n<\/li>\n
\u4ee3\u7801\u62c6\u5206（Code Splitting）：\u6839\u636e\u9700\u8981\u62c6\u5206\u4ee3\u7801，\u63d0\u9ad8\u9996\u5c4f\u52a0\u8f7d\u901f\u5ea6\u3002<\/p>\n<\/li>\n
\u8d44\u6e90\u5904\u7406：\u5904\u7406 JS \u4e4b\u5916\u7684\u8d44\u6e90，\u5982 CSS\u3001LESS\u3001SASS\u3001\u56fe\u7247\u3001\u5b57\u4f53\u7b49\u3002<\/p>\n<\/li>\n
\u5f00\u53d1\u5de5\u5177\u652f\u6301：\u63d0\u4f9b\u5f00\u53d1\u670d\u52a1\u5668\u3001\u70ed\u66f4\u65b0（HMR）\u3001\u8c03\u8bd5\u7b49\u529f\u80fd\u3002<\/p>\n<\/li>\n
\u4f18\u5316\u6027\u80fd：\u538b\u7f29\u4ee3\u7801\u3001Tree Shaking（\u53bb\u9664\u65e0\u7528\u4ee3\u7801）\u3001\u61d2\u52a0\u8f7d\u7b49\u3002<\/p>\n<\/li>\n<\/ul>\n
\/\/ webpack.config.js
\nconst path = require('path');<\/p>\n
module.exports = {
\n entry: '.\/src\/index.js', \/\/ \u5165\u53e3
\n output: { \/\/ \u8f93\u51fa
\n filename: 'bundle.js', \/\/ \u8f93\u51fa\u6587\u4ef6\u540d
\n path: path.resolve(__dirname, 'dist') \/\/ \u8f93\u51fa\u76ee\u5f55（\u5fc5\u987b\u662f\u7edd\u5bf9\u8def\u5f84）
\n },
\n module: { \/\/ \u6a21\u5757\u5904\u7406\u89c4\u5219
\n rules: [
\n {
\n test: \/\\\\.css$\/, \/\/ \u6b63\u5219\u5339\u914d .css \u6587\u4ef6
\n use: ['style-loader', 'css-loader'] \/\/ \u4f7f\u7528\u7684 loader，\u4ece\u53f3\u5411\u5de6\u6267\u884c
\n }
\n ]
\n },
\n plugins: [], \/\/ \u63d2\u4ef6\u5217\u8868
\n mode: 'development' \/\/ \u6784\u5efa\u6a21\u5f0f：development | production
\n};<\/p>\n
\u5728\u4e86\u89e3 Webpack \u539f\u7406\u524d，\u6211\u4eec\u9700\u8981\u5148\u4e86\u89e3\u51e0\u4e2a\u6838\u5fc3\u540d\u8bcd\u7684\u6982\u5ff5：<\/p>\n
\u5165\u53e3（Entry）：\u6784\u5efa\u7684\u8d77\u70b9\u3002Webpack \u4ece\u8fd9\u91cc\u5f00\u59cb\u6267\u884c\u6784\u5efa\u3002\u901a\u8fc7 Entry \u914d\u7f6e\u80fd\u591f\u786e\u5b9a\u54ea\u4e2a\u6587\u4ef6\u4f5c\u4e3a\u6784\u5efa\u8fc7\u7a0b\u7684\u5f00\u59cb，\u8fdb\u800c\u8bc6\u522b\u51fa\u5e94\u7528\u7a0b\u5e8f\u7684\u4f9d\u8d56\u56fe\u8c31\u3002<\/p>\n<\/li>\n
\u6a21\u5757（Module）：\u6784\u6210\u5e94\u7528\u7684\u5355\u5143\u3002\u5728 Webpack \u7684\u89c6\u89d2\u4e2d，\u4e00\u5207\u6587\u4ef6\u7686\u53ef\u89c6\u4e3a\u6a21\u5757，\u5305\u62ec JavaScript\u3001CSS\u3001\u56fe\u7247\u6216\u8005\u662f\u5176\u4ed6\u7c7b\u578b\u7684\u6587\u4ef6\u3002Webpack \u4ece Entry \u51fa\u53d1，\u9012\u5f52\u5730\u6784\u5efa\u51fa\u4e00\u4e2a\u5305\u542b\u6240\u6709\u4f9d\u8d56\u6587\u4ef6\u7684\u6a21\u5757\u7f51\u7edc\u3002<\/p>\n<\/li>\n
\u4ee3\u7801\u5757（Chunk）：\u4ee3\u7801\u7684\u96c6\u5408\u4f53\u3002Chunk \u7531\u6a21\u5757\u5408\u5e76\u800c\u6210，\u88ab\u7528\u6765\u4f18\u5316\u8f93\u51fa\u6587\u4ef6\u7684\u7ed3\u6784\u3002Chunk \u4f7f\u5f97 Webpack \u80fd\u591f\u66f4\u7075\u6d3b\u5730\u7ec4\u7ec7\u548c\u5206\u5272\u4ee3\u7801，\u652f\u6301\u4ee3\u7801\u7684\u61d2\u52a0\u8f7d\u3001\u62c6\u5206\u7b49\u9ad8\u7ea7\u529f\u80fd\u3002<\/p>\n<\/li>\n
\u52a0\u8f7d\u5668（Loader）：\u6a21\u5757\u7684\u8f6c\u6362\u5668\u3002Loader \u8ba9 Webpack \u6709\u80fd\u529b\u53bb\u5904\u7406\u90a3\u4e9b\u975e JavaScript \u6587\u4ef6（Webpack \u672c\u8eab\u53ea\u7406\u89e3 JavaScript）\u3002\u901a\u8fc7 Loader，\u5404\u79cd\u8d44\u6e90\u6587\u4ef6\u53ef\u4ee5\u88ab\u8f6c\u6362\u4e3a Webpack \u80fd\u591f\u5904\u7406\u7684\u6a21\u5757，\u5982\u5c06 CSS \u8f6c\u6362\u4e3a JS \u6a21\u5757，\u6216\u8005\u5c06\u9ad8\u7248\u672c\u7684 JavaScript \u8f6c\u6362\u4e3a\u517c\u5bb9\u6027\u66f4\u597d\u7684\u5f62\u5f0f（\u964d\u7ea7）\u3002<\/p>\n<\/li>\n
\u63d2\u4ef6（Plugin）：\u6784\u5efa\u6d41\u7a0b\u7684\u53c2\u4e0e\u8005\u3002Webpack \u7684\u6784\u5efa\u6d41\u7a0b\u4e2d\u5b58\u5728\u4f17\u591a\u7684\u4e8b\u4ef6\u94a9\u5b50（hooks），Plugin \u53ef\u4ee5\u76d1\u542c\u8fd9\u4e9b\u4e8b\u4ef6\u7684\u89e6\u53d1，\u5728\u89e6\u53d1\u65f6\u52a0\u5165\u81ea\u5b9a\u4e49\u7684\u6784\u5efa\u884c\u4e3a，\u5982\u81ea\u52a8\u538b\u7f29\u6253\u5305\u540e\u7684\u6587\u4ef6\u3001\u751f\u6210\u5e94\u7528\u6240\u9700\u7684 HTML \u6587\u4ef6\u7b49\u3002<\/p>\n<\/li>\n<\/ul>\n
\u6307\u5b9a Webpack \u6784\u5efa\u7684\u8d77\u70b9，\u652f\u6301\u591a\u5165\u53e3\u914d\u7f6e\u3002<\/p>\n
\u00a0entry: '.\/src\/index.js'<\/p>\n
\u4f5c\u7528：\u6307\u5b9a Webpack \u6784\u5efa\u7684\u8d77\u70b9\u6587\u4ef6，\u4ece\u8fd9\u4e2a\u6587\u4ef6\u51fa\u53d1\u9012\u5f52\u5206\u6790\u6240\u6709\u4f9d\u8d56\u3002<\/p>\n
\u9ed8\u8ba4\u503c\u662f '.\/src\/index.js'\u3002<\/p>\n<\/li>\n
\u652f\u6301\u5355\u5165\u53e3（\u5b57\u7b26\u4e32）\u548c\u591a\u5165\u53e3（\u5bf9\u8c61\u5f62\u5f0f）\u3002<\/p>\n<\/li>\n<\/ul>\n
\u591a\u5165\u53e3\u793a\u4f8b：<\/p>\n
entry: { \u00a0 app: '.\/src\/app.js', \u00a0 admin: '.\/src\/admin.js' }<\/p>\n
🔁 Webpack \u4f1a\u4e3a\u6bcf\u4e2a\u5165\u53e3\u5206\u522b\u6253\u5305\u751f\u6210\u8f93\u51fa\u6587\u4ef6\u3002\u00a0<\/p>\n
\u63a7\u5236\u6253\u5305\u540e\u7684\u6587\u4ef6\u540d\u79f0\u548c\u8def\u5f84\u3002<\/p>\n
\u4f5c\u7528：\u6307\u5b9a\u6253\u5305\u540e\u6587\u4ef6\u7684\u5b58\u50a8\u4f4d\u7f6e\u548c\u547d\u540d\u89c4\u5219\u3002<\/p>\n
filename：\u8f93\u51fa\u6587\u4ef6\u540d，\u53ef\u5305\u542b\u5360\u4f4d\u7b26（\u5982 [name], [contenthash]）<\/p>\n<\/li>\n
path：\u8f93\u51fa\u76ee\u5f55，\u5fc5\u987b\u662f\u7edd\u5bf9\u8def\u5f84<\/p>\n<\/li>\n<\/ul>\n
output: { \u00a0 filename: 'bundle.js', \/\/ \u8f93\u51fa\u7684\u6587\u4ef6\u540d \u00a0 path: path.resolve(__dirname, 'dist') \/\/ \u7edd\u5bf9\u8def\u5f84 } \u00a0\u52a8\u6001\u547d\u540d（\u7528\u4e8e\u591a\u5165\u53e3）：filename: '[name].[contenthash].js'<\/p>\n
\u00a0mode: 'development' \/\/ \u6216 'production'<\/p>\n
\u4f5c\u7528：\u6307\u5b9a\u6253\u5305\u6a21\u5f0f，Webpack \u4f1a\u81ea\u52a8\u542f\u7528\u5bf9\u5e94\u7684\u4f18\u5316\u3002<\/p>\n
development：<\/p>\n
\u5f00\u542f\u8c03\u8bd5（source map）<\/p>\n<\/li>\n
\u4e0d\u538b\u7f29\u4ee3\u7801<\/p>\n<\/li>\n
\u63d0\u9ad8\u6784\u5efa\u901f\u5ea6<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
production：<\/p>\n
\u81ea\u52a8\u538b\u7f29 JavaScript\/CSS<\/p>\n<\/li>\n
\u542f\u7528 Tree Shaking（\u79fb\u9664\u672a\u4f7f\u7528\u4ee3\u7801）<\/p>\n<\/li>\n
\u66f4\u5c0f\u4f53\u79ef\u3001\u9002\u5408\u4e0a\u7ebf<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\u00a0module: { \u00a0 rules: […] }<\/p>\n
\u4f5c\u7528：\u5b9a\u4e49\u5bf9\u4e0d\u540c\u6a21\u5757（\u5982 CSS\u3001JS\u3001\u56fe\u7247\u7b49）\u7684\u5904\u7406\u89c4\u5219，\u6838\u5fc3\u7531 rules \u6570\u7ec4\u7ec4\u6210\u3002<\/p>\n
\u6bcf\u6761\u89c4\u5219\u683c\u5f0f\u5982\u4e0b：<\/p>\n
{ \u00a0 test: \/\\\\.css$\/, \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ \u6b63\u5219\u5339\u914d\u9700\u8981\u5904\u7406\u7684\u6587\u4ef6\u7c7b\u578b \u00a0 use: ['style-loader', 'css-loader'] \u00a0\/\/ \u4f7f\u7528\u7684 loader（\u4ece\u53f3\u5230\u5de6\u6267\u884c） }<\/p>\n
📌 \u5e38\u89c1 Loader：<\/p>\n
| JS<\/td>\n | babel-loader<\/td>\n<\/tr>\n | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| CSS<\/td>\n | css-loader\u3001style-loader<\/td>\n<\/tr>\n | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| \u56fe\u7247<\/td>\n | file-loader\u3001url-loader<\/td>\n<\/tr>\n | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| \u5b57\u4f53<\/td>\n | file-loader<\/td>\n<\/tr>\n | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Vue<\/td>\n | vue-loader<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\u00a0\u00a05. plugins：\u63d2\u4ef6\u673a\u5236<\/h4>\nplugins: [ \u00a0\u4f5c\u7528：\u6269\u5c55 Webpack \u7684\u529f\u80fd，\u7528\u4e8e\u6267\u884c\u66f4\u590d\u6742\u7684\u6784\u5efa\u4efb\u52a1\u3002<\/p>\n 📌 \u5e38\u7528\u63d2\u4ef6\u53ca\u4f5c\u7528：<\/p>\n
|