{"id":2822,"date":"2017-09-11T16:19:35","date_gmt":"2017-09-11T08:19:35","guid":{"rendered":"http:\/\/www.daliane.com\/?p=2822"},"modified":"2017-09-11T16:24:37","modified_gmt":"2017-09-11T08:24:37","slug":"30_fen_zhong_ru_men_webpack","status":"publish","type":"post","link":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/30_fen_zhong_ru_men_webpack\/","title":{"rendered":"30\u5206\u949f\u5165\u95e8webpack"},"content":{"rendered":"
\n
\n
\n

\n\t\t\t\tWebpack \u5165\u95e8\u6559\u7a0b
\n\t\t\t<\/h2>\n

\n\t\t\t\t
\n\t\t\t<\/h3>\n<\/p><\/div>\n
\n
\n

\n\t\t\t\t\tWebpack \u662f\u4e00\u4e2a\u524d\u7aef\u8d44\u6e90\u52a0\u8f7d\/\u6253\u5305\u5de5\u5177\u3002\u5b83\u5c06\u6839\u636e\u6a21\u5757\u7684\u4f9d\u8d56\u5173\u7cfb\u8fdb\u884c\u9759\u6001\u5206\u6790\uff0c\u7136\u540e\u5c06\u8fd9\u4e9b\u6a21\u5757\u6309\u7167\u6307\u5b9a\u7684\u89c4\u5219\u751f\u6210\u5bf9\u5e94\u7684\u9759\u6001\u8d44\u6e90\u3002\n\t\t\t\t<\/p>\n

\n

\n\t\t\t\t\t\t\u672c\u7ae0\u8282\u57fa\u4e8e Webpack3.0 \u6d4b\u8bd5\u901a\u8fc7\u3002\n\t\t\t\t\t<\/p>\n<\/blockquote>\n

\n\t\t\t\t\t\"what-is-webpack\"<\/a>\n\t\t\t\t<\/p>\n

\n\t\t\t\t\t\u4ece\u56fe\u4e2d\u6211\u4eec\u53ef\u4ee5\u770b\u51fa\uff0cWebpack \u53ef\u4ee5\u5c06\u591a\u79cd\u9759\u6001\u8d44\u6e90 js\u3001css\u3001less \u8f6c\u6362\u6210\u4e00\u4e2a\u9759\u6001\u6587\u4ef6\uff0c\u51cf\u5c11\u4e86\u9875\u9762\u7684\u8bf7\u6c42\u3002\n\t\t\t\t<\/p>\n

\n\t\t\t\t\t\u63a5\u4e0b\u6765\u6211\u4eec\u7b80\u5355\u4e3a\u5927\u5bb6\u4ecb\u7ecd Webpack \u7684\u5b89\u88c5\u4e0e\u4f7f\u7528\u3002\n\t\t\t\t<\/p>\n

\n\t\t\t\t\t\u5b89\u88c5 Webpack
\n\t\t\t\t<\/h3>\n

\n\t\t\t\t\t\u5728\u5b89\u88c5 Webpack \u524d\uff0c\u4f60\u672c\u5730\u73af\u5883\u9700\u8981\u652f\u6301 node.js<\/a>\u3002\n\t\t\t\t<\/p>\n

\n\t\t\t\t\t\u7531\u4e8e npm \u5b89\u88c5\u901f\u5ea6\u6162\uff0c\u672c\u6559\u7a0b\u4f7f\u7528\u4e86\u6dd8\u5b9d\u7684\u955c\u50cf\u53ca\u5176\u547d\u4ee4 cnpm\uff0c\u5b89\u88c5\u4f7f\u7528\u4ecb\u7ecd\u53c2\u7167\uff1a\u4f7f\u7528\u6dd8\u5b9d NPM \u955c\u50cf<\/a>\u3002\n\t\t\t\t<\/p>\n

\n\t\t\t\t\t\u4f7f\u7528 cnpm \u5b89\u88c5 webpack\uff1a\n\t\t\t\t<\/p>\n

\n
\n
\n\t\t\t\t\t\t\tcnpm<\/span> <\/span>install<\/span> <\/span>webpack<\/span> –<\/span>g<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n

\n\t\t\t\t\t\u521b\u5efa\u9879\u76ee
\n\t\t\t\t<\/h3>\n

\n\t\t\t\t\t\u63a5\u4e0b\u6765\u6211\u4eec\u521b\u5efa\u4e00\u4e2a\u76ee\u5f55 app\uff1a\n\t\t\t\t<\/p>\n

\n
\n
\n\t\t\t\t\t\t\tmkdir<\/span> <\/span>app<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n

\n\t\t\t\t\t\u5728 app \u76ee\u5f55\u4e0b\u6dfb\u52a0 runoob1.js \u6587\u4ef6\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a\n\t\t\t\t<\/p>\n

\n

\n\t\t\t\t\t\tapp\/runoob1.js \u6587\u4ef6
\n\t\t\t\t\t<\/h2>\n
\n
\n\t\t\t\t\t\t\tdocument<\/span>.<\/span>write<\/span>(<\/span>“<\/span>It works.<\/span>“<\/span>)<\/span>;<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n

\n\t\t\t\t\t\u5728 app \u76ee\u5f55\u4e0b\u6dfb\u52a0 index.html \u6587\u4ef6\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a\n\t\t\t\t<\/p>\n

\n

\n\t\t\t\t\t\tapp\/index.html \u6587\u4ef6
\n\t\t\t\t\t<\/h2>\n
\n
\n\t\t\t\t\t\t\t<<\/span>html<\/span>><\/span> <\/span><<\/span>head<\/span>><\/span> <\/span><<\/span>meta<\/span> <\/span>charset<\/span>=<\/span>“<\/span>utf-8<\/span>“<\/span>><\/span> <\/span><\/<\/span>head<\/span>><\/span> <\/span><<\/span>body<\/span>><\/span> <\/span><<\/span>script<\/span> <\/span>type<\/span>=<\/span>“<\/span>text\/javascript<\/span>“<\/span> <\/span>src<\/span>=<\/span>“<\/span>bundle.js<\/span>“<\/span> <\/span>charset<\/span>=<\/span>“<\/span>utf-8<\/span>“<\/span>><\/span><\/<\/span>script<\/span>><\/span> <\/span><\/<\/span>body<\/span>><\/span> <\/span><\/<\/span>html<\/span>><\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n

\n\t\t\t\t\t\u63a5\u4e0b\u6765\u6211\u4eec\u4f7f\u7528 webpack \u547d\u4ee4\u6765\u6253\u5305\uff1a\n\t\t\t\t<\/p>\n

\n
\n
\n\t\t\t\t\t\t\twebpack<\/span> <\/span>runoob1<\/span>.<\/span>js<\/span> <\/span>bundle<\/span>.<\/span>js<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n

\n\t\t\t\t\t\u6267\u884c\u4ee5\u4e0a\u547d\u4ee4\u4f1a\u7f16\u8bd1 runoob1.js \u6587\u4ef6\u5e76\u751f\u6210bundle.js \u6587\u4ef6\uff0c\u6210\u529f\u540e\u8f93\u51fa\u4fe1\u606f\u5982\u4e0b\u6240\u793a\uff1a\n\t\t\t\t<\/p>\n

Hash<\/span>:<\/span> a41c6217554e666594cb <\/span>Version<\/span>:<\/span> webpack <\/span>1.12<\/span>.<\/span>13<\/span> <\/span>Time<\/span>:<\/span> <\/span>50ms<\/span> <\/span>Asset<\/span> <\/span>Size<\/span> <\/span>Chunks<\/span> <\/span>Chunk<\/span> <\/span>Names<\/span> bundle<\/span>.<\/span>js <\/span>1.42<\/span> kB <\/span>0<\/span> <\/span>[<\/span>emitted<\/span>]<\/span> main <\/span>[<\/span>0<\/span>]<\/span> <\/span>.\/<\/span>runoob1<\/span>.<\/span>js <\/span>29<\/span> bytes <\/span>{<\/span>0<\/span>}<\/span> <\/span>[<\/span>built<\/span>]<\/span><\/pre>\n
\n\t\t\t\t\t\u5728\u6d4f\u89c8\u5668\u4e2d\u6253\u5f00 index.html\uff0c\u8f93\u51fa\u7ed3\u679c\u5982\u4e0b\uff1a\n\t\t\t\t<\/p>\n
\n\t\t\t\t\t\"08C6036B-1B89-444A-94D7-4A920105E21B\"<\/a>\n\t\t\t\t<\/p>\n
\n\t\t\t\t\t\u521b\u5efa\u7b2c\u4e8c\u4e2a JS \u6587\u4ef6
\n\t\t\t\t<\/h3>\n
\n\t\t\t\t\t\u63a5\u4e0b\u6765\u6211\u4eec\u521b\u5efa\u53e6\u5916\u4e00\u4e2a js \u6587\u4ef6 runoob2.js\uff0c\u4ee3\u7801\u5982\u4e0b\u6240\u793a\uff1a\n\t\t\t\t<\/p>\n
\n
\n\t\t\t\t\t\tapp\/runoob2.js \u6587\u4ef6
\n\t\t\t\t\t<\/h2>\n
\n
\n\t\t\t\t\t\t\tmodule<\/span>.<\/span>exports<\/span> = <\/span>“<\/span>It works from runoob2.js.<\/span>“<\/span>;<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n\t\t\t\t\t\u66f4\u65b0 runoob1.js \u6587\u4ef6\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a\n\t\t\t\t<\/p>\n
\n
\n\t\t\t\t\t\tapp\/runoob1.js \u6587\u4ef6
\n\t\t\t\t\t<\/h2>\n
\n
\n\t\t\t\t\t\t\tdocument<\/span>.<\/span>write<\/span>(<\/span>require<\/span>(<\/span>“<\/span>.\/runoob2.js<\/span>“<\/span>)<\/span>)<\/span>;<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n\t\t\t\t\t\u63a5\u4e0b\u6765\u6211\u4eec\u4f7f\u7528 webpack \u547d\u4ee4\u6765\u6253\u5305\uff1a\n\t\t\t\t<\/p>\n
\n
\n
\n\t\t\t\t\t\t\twebpack<\/span> <\/span>runoob1<\/span>.<\/span>js<\/span> <\/span>bundle<\/span>.<\/span>js<\/span> <\/span>Hash<\/span>: <\/span>dcf55acff639ebfe1677<\/span> <\/span>Version<\/span>: <\/span>webpack<\/span> <\/span>1.12<\/span>.13<\/span> <\/span>Time<\/span>: <\/span>52<\/span>ms<\/span> <\/span>Asset<\/span> <\/span>Size<\/span> <\/span>Chunks<\/span> <\/span>Chunk<\/span> <\/span>Names<\/span> <\/span>bundle<\/span>.<\/span>js<\/span> <\/span>1.55<\/span> <\/span>kB<\/span> <\/span>0<\/span> <\/span>[<\/span>emitted<\/span>]<\/span> <\/span>main<\/span> <\/span>[<\/span>0<\/span>]<\/span> .\/<\/span>runoob1<\/span>.<\/span>js<\/span> <\/span>41<\/span> <\/span>bytes<\/span> <\/span>{<\/span>0<\/span>}<\/span> <\/span>[<\/span>built<\/span>]<\/span> <\/span>[<\/span>1<\/span>]<\/span> .\/<\/span>runoob2<\/span>.<\/span>js<\/span> <\/span>46<\/span> <\/span>bytes<\/span> <\/span>{<\/span>0<\/span>}<\/span> <\/span>[<\/span>built<\/span>]<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n\t\t\t\t\t\u5728\u6d4f\u89c8\u5668\u8bbf\u95ee\uff0c\u8f93\u51fa\u7ed3\u679c\u5982\u4e0b\u6240\u793a\uff1a\n\t\t\t\t<\/p>\n
\n\t\t\t\t\t\"40F7221F-417F-493B-BD47-1C5D03D39370\"<\/a>\n\t\t\t\t<\/p>\n
\n\t\t\t\t\twebpack \u6839\u636e\u6a21\u5757\u7684\u4f9d\u8d56\u5173\u7cfb\u8fdb\u884c\u9759\u6001\u5206\u6790\uff0c\u8fd9\u4e9b\u6587\u4ef6(\u6a21\u5757)\u4f1a\u88ab\u5305\u542b\u5230 bundle.js \u6587\u4ef6\u4e2d\u3002Webpack \u4f1a\u7ed9\u6bcf\u4e2a\u6a21\u5757\u5206\u914d\u4e00\u4e2a\u552f\u4e00\u7684 id \u5e76\u901a\u8fc7\u8fd9\u4e2a id \u7d22\u5f15\u548c\u8bbf\u95ee\u6a21\u5757\u3002
\n\u5728\u9875\u9762\u542f\u52a8\u65f6\uff0c\u4f1a\u5148\u6267\u884c runoob1.js \u4e2d\u7684\u4ee3\u7801\uff0c\u5176\u5b83\u6a21\u5757\u4f1a\u5728\u8fd0\u884c require \u7684\u65f6\u5019\u518d\u6267\u884c\u3002\n\t\t\t\t<\/p>\n
\n
\n\t\t\t\t\tLOADER
\n\t\t\t\t<\/h2>\n
\n\t\t\t\t\tWebpack \u672c\u8eab\u53ea\u80fd\u5904\u7406 JavaScript \u6a21\u5757\uff0c\u5982\u679c\u8981\u5904\u7406\u5176\u4ed6\u7c7b\u578b\u7684\u6587\u4ef6\uff0c\u5c31\u9700\u8981\u4f7f\u7528 loader \u8fdb\u884c\u8f6c\u6362\u3002\n\t\t\t\t<\/p>\n
\n\t\t\t\t\t\u6240\u4ee5\u5982\u679c\u6211\u4eec\u9700\u8981\u5728\u5e94\u7528\u4e2d\u6dfb\u52a0 css \u6587\u4ef6\uff0c\u5c31\u9700\u8981\u4f7f\u7528\u5230 css-loader \u548c style-loader\uff0c\u4ed6\u4eec\u505a\u4e24\u4ef6\u4e0d\u540c\u7684\u4e8b\u60c5\uff0ccss-loader \u4f1a\u904d\u5386 CSS \u6587\u4ef6\uff0c\u7136\u540e\u627e\u5230 url() \u8868\u8fbe\u5f0f\u7136\u540e\u5904\u7406\u4ed6\u4eec\uff0cstyle-loader \u4f1a\u628a\u539f\u6765\u7684 CSS \u4ee3\u7801\u63d2\u5165\u9875\u9762\u4e2d\u7684\u4e00\u4e2a style \u6807\u7b7e\u4e2d\u3002\n\t\t\t\t<\/p>\n
\n\t\t\t\t\t\u63a5\u4e0b\u6765\u6211\u4eec\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u6765\u5b89\u88c5  css-loader \u548c style-loader(\u5168\u5c40\u5b89\u88c5\u9700\u8981\u53c2\u6570 -g)\u3002\n\t\t\t\t<\/p>\n
\n
\n
\n\t\t\t\t\t\t\tcnpm<\/span> <\/span>install<\/span> <\/span>css-loader<\/span> <\/span>style-loader<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n\t\t\t\t\t\u6267\u884c\u4ee5\u4e0a\u547d\u4ee4\u540e\uff0c\u4f1a\u518d\u5f53\u524d\u76ee\u5f55\u751f\u6210 node_modules \u76ee\u5f55\uff0c\u5b83\u5c31\u662f css-loader \u548c style-loader \u7684\u5b89\u88c5\u76ee\u5f55\u3002\n\t\t\t\t<\/p>\n
\n\t\t\t\t\t\u63a5\u4e0b\u6765\u521b\u5efa\u4e00\u4e2a style.css \u6587\u4ef6\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a\n\t\t\t\t<\/p>\n
\n
\n\t\t\t\t\t\tapp\/style.css \u6587\u4ef6
\n\t\t\t\t\t<\/h2>\n
\n
\n\t\t\t\t\t\t\tbody<\/span> <\/span>{<\/span> <\/span>background:<\/span> <\/span>yellow<\/span><\/span>; <\/span>}<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n\t\t\t\t\t\u4fee\u6539 runoob1.js \u6587\u4ef6\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a\n\t\t\t\t<\/p>\n
\n
\n\t\t\t\t\t\tapp\/runoob1.js \u6587\u4ef6
\n\t\t\t\t\t<\/h2>\n
\n
\n\t\t\t\t\t\t\trequire<\/span>(“!<\/span>style-loader<\/span>!<\/span>css-loader<\/span>!.\/<\/span>style<\/span>.css<\/span>“); <\/span>document<\/span>.write<\/span>(<\/span>require<\/span>(“.\/<\/span>runoob2<\/span>.js<\/span>“));<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n\t\t\t\t\t\u63a5\u4e0b\u6765\u6211\u4eec\u4f7f\u7528 webpack \u547d\u4ee4\u6765\u6253\u5305\uff1a\n\t\t\t\t<\/p>\n
\n
\n
\n\t\t\t\t\t\t\twebpack<\/span> <\/span>runoob1<\/span>.<\/span>js<\/span> <\/span>bundle<\/span>.<\/span>js<\/span> <\/span>Hash<\/span>: <\/span>a9ef45165f81c89a4363<\/span> <\/span>Version<\/span>: <\/span>webpack<\/span> <\/span>1.12<\/span>.13<\/span> <\/span>Time<\/span>: <\/span>619<\/span>ms<\/span> <\/span>Asset<\/span> <\/span>Size<\/span> <\/span>Chunks<\/span> <\/span>Chunk<\/span> <\/span>Names<\/span> <\/span>bundle<\/span>.<\/span>js<\/span> <\/span>11.8<\/span> <\/span>kB<\/span> <\/span>0<\/span> <\/span>[<\/span>emitted<\/span>]<\/span> <\/span>main<\/span> <\/span>[<\/span>0<\/span>]<\/span> .\/<\/span>runoob1<\/span>.<\/span>js<\/span> <\/span>76<\/span> <\/span>bytes<\/span> <\/span>{<\/span>0<\/span>}<\/span> <\/span>[<\/span>built<\/span>]<\/span> <\/span>[<\/span>5<\/span>]<\/span> .\/<\/span>runoob2<\/span>.<\/span>js<\/span> <\/span>46<\/span> <\/span>bytes<\/span> <\/span>{<\/span>0<\/span>}<\/span> <\/span>[<\/span>built<\/span>]<\/span> + <\/span>4<\/span> <\/span>hidden<\/span> <\/span>modules<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n\t\t\t\t\t\u5728\u6d4f\u89c8\u5668\u8bbf\u95ee\uff0c\u8f93\u51fa\u7ed3\u679c\u5982\u4e0b\u6240\u793a\uff1a\n\t\t\t\t<\/p>\n
\n\t\t\t\t\t\"9ABEBA1F-DF8C-4019-BC6A-5B8D2A3A7BA4<\/a>\n\t\t\t\t<\/p>\n
\n\t\t\t\t\trequire CSS \u6587\u4ef6\u7684\u65f6\u5019\u90fd\u8981\u5199 loader \u524d\u7f00 !style-loader!css-loader!<\/b>\uff0c\u5f53\u7136\u6211\u4eec\u53ef\u4ee5\u6839\u636e\u6a21\u5757\u7c7b\u578b\uff08\u6269\u5c55\u540d\uff09\u6765\u81ea\u52a8\u7ed1\u5b9a\u9700\u8981\u7684 loader\u3002 \u5c06 runoob1.js \u4e2d\u7684 require(“!style-loader!css-loader!.\/style.css”)<\/b> \u4fee\u6539\u4e3a require(“.\/style.css”)<\/b> \uff1a\n\t\t\t\t<\/p>\n
\n
\n\t\t\t\t\t\tapp\/runoob1.js \u6587\u4ef6
\n\t\t\t\t\t<\/h2>\n
\n
\n\t\t\t\t\t\t\trequire<\/span>(<\/span>“<\/span>.\/style.css<\/span>“<\/span>)<\/span>; <\/span>document<\/span>.<\/span>write<\/span>(<\/span>require<\/span>(<\/span>“<\/span>.\/runoob2.js<\/span>“<\/span>)<\/span>)<\/span>;<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n\t\t\t\t\t\u7136\u540e\u6267\u884c\uff1a\n\t\t\t\t<\/p>\n
\n
\n
\n\t\t\t\t\t\t\twebpack<\/span> <\/span>runoob1<\/span>.<\/span>js<\/span> <\/span>bundle<\/span>.<\/span>js<\/span> —<\/span>module<\/span>–<\/span>bind<\/span> <\/span>‘<\/span>css=style-loader!css-loader<\/span>‘<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n\t\t\t\t\t\u5728\u6d4f\u89c8\u5668\u8bbf\u95ee\uff0c\u8f93\u51fa\u7ed3\u679c\u5982\u4e0b\u6240\u793a\uff1a\n\t\t\t\t<\/p>\n
\n\t\t\t\t\t\"9ABEBA1F-DF8C-4019-BC6A-5B8D2A3A7BA4<\/a>\n\t\t\t\t<\/p>\n
\n\t\t\t\t\t\u663e\u7136\uff0c\u8fd9\u4e24\u79cd\u4f7f\u7528 loader \u7684\u65b9\u5f0f\uff0c\u6548\u679c\u662f\u4e00\u6837\u7684\u3002\n\t\t\t\t<\/p>\n
\n
\n\t\t\t\t\t\u914d\u7f6e\u6587\u4ef6
\n\t\t\t\t<\/h2>\n
\n\t\t\t\t\t\u6211\u4eec\u53ef\u4ee5\u5c06\u4e00\u4e9b\u7f16\u8bd1\u9009\u9879\u653e\u5728\u914d\u7f6e\u6587\u4ef6\u4e2d\uff0c\u4ee5\u4fbf\u4e8e\u7edf\u4e00\u7ba1\u7406\uff1a\n\t\t\t\t<\/p>\n
\n\t\t\t\t\t\u521b\u5efa webpack.config.js \u6587\u4ef6\uff0c\u4ee3\u7801\u5982\u4e0b\u6240\u793a\uff1a\n\t\t\t\t<\/p>\n
\n
\n\t\t\t\t\t\tapp\/webpack.config.js \u6587\u4ef6
\n\t\t\t\t\t<\/h2>\n
\n
\n\t\t\t\t\t\t\tmodule<\/span>.<\/span>exports<\/span> = <\/span>{<\/span> <\/span>entry<\/span>: <\/span>“<\/span>.\/runoob1.js<\/span>“<\/span>, <\/span>output<\/span>: <\/span>{<\/span> <\/span>path<\/span>: <\/span>__dirname<\/span>, <\/span>filename<\/span>: <\/span>“<\/span>bundle.js<\/span>“<\/span> <\/span>}<\/span>, <\/span>module<\/span>: <\/span>{<\/span> <\/span>loaders<\/span>: <\/span>[<\/span> <\/span>{<\/span> <\/span>test<\/span>: \/.<\/span>css<\/span>$\/, <\/span>loader<\/span>: <\/span>“<\/span>style-loader!css-loader<\/span>“<\/span> <\/span>}<\/span> <\/span>]<\/span> <\/span>}<\/span> <\/span>}<\/span>;<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n\t\t\t\t\t\u63a5\u4e0b\u6765\u6211\u4eec\u53ea\u9700\u8981\u6267\u884c webpack \u547d\u4ee4\u5373\u53ef\u751f\u6210 bundle.js \u6587\u4ef6\uff1a\n\t\t\t\t<\/p>\n
\n
\n
\n\t\t\t\t\t\t\twebpack<\/span> <\/span>Hash<\/span>: <\/span>4<\/span>fdefac099a5f36ff74b<\/span> <\/span>Version<\/span>: <\/span>webpack<\/span> <\/span>1.12<\/span>.13<\/span> <\/span>Time<\/span>: <\/span>576<\/span>ms<\/span> <\/span>Asset<\/span> <\/span>Size<\/span> <\/span>Chunks<\/span> <\/span>Chunk<\/span> <\/span>Names<\/span> <\/span>bundle<\/span>.<\/span>js<\/span> <\/span>11.8<\/span> <\/span>kB<\/span> <\/span>0<\/span> <\/span>[<\/span>emitted<\/span>]<\/span> <\/span>main<\/span> <\/span>[<\/span>0<\/span>]<\/span> .\/<\/span>runoob1<\/span>.<\/span>js<\/span> <\/span>65<\/span> <\/span>bytes<\/span> <\/span>{<\/span>0<\/span>}<\/span> <\/span>[<\/span>built<\/span>]<\/span> <\/span>[<\/span>5<\/span>]<\/span> .\/<\/span>runoob2<\/span>.<\/span>js<\/span> <\/span>46<\/span> <\/span>bytes<\/span> <\/span>{<\/span>0<\/span>}<\/span> <\/span>[<\/span>built<\/span>]<\/span> + <\/span>4<\/span> <\/span>hidden<\/span> <\/span>modules<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n\t\t\t\t\twebpack \u547d\u4ee4\u6267\u884c\u540e\uff0c\u4f1a\u9ed8\u8ba4\u8f7d\u5165\u5f53\u524d\u76ee\u5f55\u7684 webpack.config.js \u6587\u4ef6\u3002\n\t\t\t\t<\/p>\n
\n
\n\t\t\t\t\t\u63d2\u4ef6
\n\t\t\t\t<\/h2>\n
\n\t\t\t\t\t\u63d2\u4ef6\u5728 webpack \u7684\u914d\u7f6e\u4fe1\u606f plugins \u9009\u9879\u4e2d\u6307\u5b9a\uff0c\u7528\u4e8e\u5b8c\u6210\u4e00\u4e9b loader \u4e0d\u80fd\u5b8c\u6210\u7684\u5de5\u3002\n\t\t\t\t<\/p>\n
\n\t\t\t\t\twebpack \u81ea\u5e26\u4e00\u4e9b\u63d2\u4ef6\uff0c\u4f60\u53ef\u4ee5\u53ef\u4ee5\u901a\u8fc7 cnpm \u5b89\u88c5\u4e00\u4e9b\u63d2\u4ef6\u3002\n\t\t\t\t<\/p>\n
\n\t\t\t\t\t\u4f7f\u7528\u5185\u7f6e\u63d2\u4ef6\u9700\u8981\u901a\u8fc7\u4ee5\u4e0b\u547d\u4ee4\u6765\u5b89\u88c5\uff1a\n\t\t\t\t<\/p>\n
\n
\n
\n\t\t\t\t\t\t\tcnpm<\/span> <\/span>install<\/span> <\/span>webpack<\/span> —<\/span>save<\/span>–<\/span>dev<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n\t\t\t\t\t\u6bd4\u5982\u6211\u4eec\u53ef\u4ee5\u5b89\u88c5\u5185\u7f6e\u7684 BannerPlugin \u63d2\u4ef6\uff0c\u7528\u4e8e\u5728\u6587\u4ef6\u5934\u90e8\u8f93\u51fa\u4e00\u4e9b\u6ce8\u91ca\u4fe1\u606f\u3002\n\t\t\t\t<\/p>\n
\n\t\t\t\t\t\u4fee\u6539 webpack.config.js\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a\n\t\t\t\t<\/p>\n
\n
\n\t\t\t\t\t\tapp\/webpack.config.js \u6587\u4ef6
\n\t\t\t\t\t<\/h2>\n
\n
\n\t\t\t\t\t\t\tvar<\/span> <\/span>webpack<\/span>=<\/span>require<\/span>(<\/span>‘<\/span>webpack<\/span>‘<\/span>)<\/span>; <\/span>module<\/span>.<\/span>exports<\/span> = <\/span>{<\/span> <\/span>entry<\/span>: <\/span>“<\/span>.\/runoob1.js<\/span>“<\/span>, <\/span>output<\/span>: <\/span>{<\/span> <\/span>path<\/span>: <\/span>__dirname<\/span>, <\/span>filename<\/span>: <\/span>“<\/span>bundle.js<\/span>“<\/span> <\/span>}<\/span>, <\/span>module<\/span>: <\/span>{<\/span> <\/span>loaders<\/span>: <\/span>[<\/span> <\/span>{<\/span> <\/span>test<\/span>: \/.<\/span>css<\/span>$\/, <\/span>loader<\/span>: <\/span>“<\/span>style-loader!css-loader<\/span>“<\/span> <\/span>}<\/span> <\/span>]<\/span> <\/span>}<\/span>, <\/span>plugins<\/span>:<\/span>[<\/span> <\/span>new<\/span> <\/span>webpack<\/span>.<\/span>BannerPlugin<\/span>(<\/span>‘<\/span>\u83dc\u9e1f\u6559\u7a0b webpack \u5b9e\u4f8b<\/span>‘<\/span>)<\/span> <\/span>]<\/span> <\/span>}<\/span>;<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n\t\t\t\t\t\u7136\u540e\u8fd0\u884c:\n\t\t\t\t<\/p>\n
webpack<\/span><\/pre>\n
\n\t\t\t\t\t\u6253\u5f00 bundle.js\uff0c\u53ef\u4ee5\u770b\u5230\u6587\u4ef6\u5934\u90e8\u51fa\u73b0\u4e86\u6211\u4eec\u6307\u5b9a\u7684\u6ce8\u91ca\u4fe1\u606f\u3002\n\t\t\t\t<\/p>\n
\n
\n\t\t\t\t\t\u5f00\u53d1\u73af\u5883
\n\t\t\t\t<\/h2>\n
\n\t\t\t\t\t\u5f53\u9879\u76ee\u9010\u6e10\u53d8\u5927\uff0cwebpack \u7684\u7f16\u8bd1\u65f6\u95f4\u4f1a\u53d8\u957f\uff0c\u53ef\u4ee5\u901a\u8fc7\u53c2\u6570\u8ba9\u7f16\u8bd1\u7684\u8f93\u51fa\u5185\u5bb9\u5e26\u6709\u8fdb\u5ea6\u548c\u989c\u8272\u3002\n\t\t\t\t<\/p>\n
\n
\n
\n\t\t\t\t\t\t\twebpack<\/span> —<\/span>progress<\/span> —<\/span>colors<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n\t\t\t\t\t\u5982\u679c\u4e0d\u60f3\u6bcf\u6b21\u4fee\u6539\u6a21\u5757\u540e\u90fd\u91cd\u65b0\u7f16\u8bd1\uff0c\u90a3\u4e48\u53ef\u4ee5\u542f\u52a8\u76d1\u542c\u6a21\u5f0f\u3002\u5f00\u542f\u76d1\u542c\u6a21\u5f0f\u540e\uff0c\u6ca1\u6709\u53d8\u5316\u7684\u6a21\u5757\u4f1a\u5728\u7f16\u8bd1\u540e\u7f13\u5b58\u5230\u5185\u5b58\u4e2d\uff0c\u800c\u4e0d\u4f1a\u6bcf\u6b21\u90fd\u88ab\u91cd\u65b0\u7f16\u8bd1\uff0c\u6240\u4ee5\u76d1\u542c\u6a21\u5f0f\u7684\u6574\u4f53\u901f\u5ea6\u662f\u5f88\u5feb\u7684\u3002\n\t\t\t\t<\/p>\n
\n
\n
\n\t\t\t\t\t\t\twebpack<\/span> —<\/span>progress<\/span> —<\/span>colors<\/span> —<\/span>watch<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n\t\t\t\t\t\u5f53\u7136\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528 webpack-dev-server \u5f00\u53d1\u670d\u52a1\uff0c\u8fd9\u6837\u6211\u4eec\u5c31\u80fd\u901a\u8fc7 localhost:8080 \u542f\u52a8\u4e00\u4e2a express \u9759\u6001\u8d44\u6e90 web \u670d\u52a1\u5668\uff0c\u5e76\u4e14\u4f1a\u4ee5\u76d1\u542c\u6a21\u5f0f\u81ea\u52a8\u8fd0\u884c webpack\uff0c\u5728\u6d4f\u89c8\u5668\u6253\u5f00 http:\/\/localhost:8080\/ \u6216 http:\/\/localhost:8080\/webpack-dev-server\/ \u53ef\u4ee5\u6d4f\u89c8\u9879\u76ee\u4e2d\u7684\u9875\u9762\u548c\u7f16\u8bd1\u540e\u7684\u8d44\u6e90\u8f93\u51fa\uff0c\u5e76\u4e14\u901a\u8fc7\u4e00\u4e2a socket.io \u670d\u52a1\u5b9e\u65f6\u76d1\u542c\u5b83\u4eec\u7684\u53d8\u5316\u5e76\u81ea\u52a8\u5237\u65b0\u9875\u9762\u3002\n\t\t\t\t<\/p>\n
\n
\n
\n\t\t\t\t\t\t\t# \u5b89\u88c5<\/span> <\/span>cnpm<\/span> <\/span>install<\/span> <\/span>webpack<\/span>–<\/span>dev<\/span>–<\/span>server<\/span> –<\/span>g<\/span> <\/span># \u8fd0\u884c<\/span> <\/span>webpack<\/span>–<\/span>dev<\/span>–<\/span>server<\/span> —<\/span>progress<\/span> —<\/span>colors<\/span>\n\t\t\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n\t\t\t\t\t\u5728\u6d4f\u89c8\u5668\u6253\u5f00 http:\/\/localhost:8080\/ \u8f93\u51fa\u7ed3\u679c\u5982\u4e0b\uff1a\n\t\t\t\t<\/p>\n
<\/p>\n
\n\t\t\t\t\t\"47B0234F-E1F0-43FF-8F80-050514A1A25C\"<\/a>\n\t\t\t\t<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Webpack \u5165\u95e8\u6559\u7a0b Webpack \u662f\u4e00\u4e2a\u524d\u7aef\u8d44\u6e90\u52a0\u8f7d\/\u6253\u5305\u5de5\u5177\u3002\u5b83\u5c06\u6839\u636e\u6a21\u5757\u7684\u4f9d\u8d56\u5173\u7cfb\u8fdb\u884c\u9759\u6001\u5206\u6790\uff0c\u7136…<\/p>\n","protected":false},"author":2,"featured_media":2829,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[10,38],"tags":[169],"_links":{"self":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/2822"}],"collection":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/comments?post=2822"}],"version-history":[{"count":3,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/2822\/revisions"}],"predecessor-version":[{"id":2835,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/2822\/revisions\/2835"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/media\/2829"}],"wp:attachment":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/media?parent=2822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/categories?post=2822"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/tags?post=2822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}