{"id":5189,"date":"2016-07-27T17:00:35","date_gmt":"2016-07-27T09:00:35","guid":{"rendered":"https:\/\/sdeno.com\/?p=5189"},"modified":"2016-12-20T16:24:17","modified_gmt":"2016-12-20T08:24:17","slug":"webpack%e6%95%99%e7%a8%8b","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=5189","title":{"rendered":"webpack\u6559\u7a0b"},"content":{"rendered":"

webpack\u5c31\u662f\u4e00\u4e2a\u6253\u5305\u5de5\u5177\uff0c\u53ef\u4ee5\u5c06\u591a\u4e2ajs\u3001css\u3001\u56fe\u7247\u3001coffeescript\u3001less\u7b49\u5408\u5e76\u5728\u4e00\u8d77\uff0c\u5728\u8c03\u7528\u65f6\u5c31\u52a0\u8f7d\u4e00\u6761js\u6587\u4ef6\u5c31\u884c\u3002<\/p>\n

\u63a8\u8350\u540c\u65f6\u5168\uff0c\u5c40\u90e8\u5b89\u88c5<\/p>\n

npm install -g webpack\r\nnpm install webpack<\/pre>\n
 <\/p>\n
\u5b89\u88c5\u5b8c\u6210\u540e<\/p>\n
webpack -h \/\/\u6709\u63d0\u793a\u8bf4\u660e\u5b89\u88c5\u5b8c\u6210<\/pre>\n
 <\/p>\n
\u5047\u5982\u7f51\u7ad9\u7684\u76ee\u5f55\u7ed3\u6784\u662f\u8fd9\u6837\uff1a<\/p>\n
<\/div>
<\/div><\/div><\/div>\"webpack1\"<\/figure><\/a>\n
 <\/p>\n
\u5728\u6839\u76ee\u5f55\u624b\u52a8\u521b\u5efawebpack.config.js<\/p>\n
var webpack = require('webpack'); \/\/ \u52a0\u8f7dwebpack\u6a21\u5757\u662f\u4e3a\u4e86\u80fd\u4f7f\u7528\uff0c\u5176\u5185\u7f6e\u7684\u63d2\u4ef6\u5982BannerPlugin\r\nvar CommonsChunkPlugin = require(\"webpack\/lib\/optimize\/CommonsChunkPlugin\");  \/\/\u5c06\u516c\u5171\u90e8\u5206JS\u63d0\u53d6\u51fa\u6765\u72ec\u7acb\u4e3a\u4e00\u4e2aJS\r\nvar autoprefixer = require('autoprefixer'); \/\/\u81ea\u52a8\u6dfb\u52a0css\u524d\u7f00 npm install autoprefixer\r\n\r\nmodule.exports = {\r\n   entry: '.\/entry.js', \/\/\u6587\u4ef6\u5165\u53e3\uff0c\u6240\u6709\u7684css\u3001js\u3001\u56fe\u7247\u548c\u6a21\u5757\u90fd\u7edf\u4e00\u52a0\u8f7d\u5728\u6b64\u6587\u4ef6\u3002\r\n   output: {\r\n      path: __dirname+'\/out\/', \/\/\u538b\u7f29\u5408\u5e76\u8f93\u51fa\u540e\u5b58\u653e\u7684\u76ee\u5f55\r\n      filename: 'bundle.js', \/\/\u6587\u4ef6\u51fa\u53e3\uff0c\u538b\u7f29\u5408\u5e76\u540e\u6587\u4ef6\u7684\u540d\u5b57\r\n      libraryTarget: 'amd' \/\/ \u8f93\u51fa\u540e\u7684\u6587\u4ef6bundle.js\u53d8\u6210amd\u6a21\u5757\uff0c\u5c31\u53ef\u4ee5\u5728requirejs\u63d2\u4ef6\u4e2d\u76f4\u63a5\u5f15\u5165\u4f7f\u7528\u4e86\r\n   },\r\n   module: { \/\/\u538b\u7f29\u5408\u5e76js\u4ee5\u5916\u7684\u5185\u5bb9\uff0c\u5982css\u3001\u56fe\u7247\u3001coffeescript\u3001less\u7b49\u5bf9\u5e94\u7684\u8fd8\u8981\u5b89\u88c5\u76f8\u5e94\u7684\u6a21\u5757\r\n     loaders: [\r\n       \/\/\u5982\u679c\u5e0c\u671bcss\u548c\u8ddfjs\u4e00\u6837\u7edf\u4e00\u538b\u7f29\u5230\u4e00\u8d77\u5c31\u9700\u8981\u989d\u5916\u5b89\u88c5 npm install css-loader style-loader postcss-loader\r\n       {test: \/\\.css$\/, loader: \"style-loader!css-loader!postcss-loader\"} \/\/webpack\u8981\u8bc6\u522b\u5904\u7406css\u8981\u4f9d\u8d56\u6a21\u5757\u624d\u884c\uff0c\u591a\u4e2a\u6a21\u5757\u4e4b\u95f4\u8981\u4f7f\u7528!\r\n       \/\/limit=8192\u201d\u8868\u793a\u5c06\u6240\u6709\u5c0f\u4e8e8kb\u7684\u56fe\u7247\u90fd\u8f6c\u4e3abase64\u5f62\u5f0f\uff0c\u5728out\u76ee\u5f55\u4e0b\u751f\u6210\u5927\u4e8e8KB\u7684img\u56fe\u7247\r\n       \/\/\uff08\u5176\u5b9e\u5e94\u8be5\u8bf4\u8d85\u8fc78kb\u7684\u624d\u4f7f\u7528 url-loader \u6765\u6620\u5c04\u5230\u6587\u4ef6\uff0c\u5426\u5219\u8f6c\u4e3adata url\u5f62\u5f0f\uff09\r\n       \/\/npm install url-loader npm install file-loader\r\n       { test: \/\\.(png|jpg)$\/, loader: 'url-loader?limit=8192&name=img\/[hash:8].[name].[ext]'}\r\n     ]\r\n   },\r\n   postcss: [ autoprefixer({ browsers: ['> 0%'] }) ],  \/\/\u81ea\u52a8\u6dfb\u52a0css\u524d\u7f00\r\n   plugins: [ \/\/\u6269\u5c55webpack\u989d\u5916\u7684\u529f\u80fd\uff0c\u8981\u4f7f\u7528webpack\u81ea\u5e26\u63d2\u4ef6\u5c31\u5f15\u5165webpack\uff0c\u5176\u4ed6\u529f\u80fd\u7684\u8bdd\u5c31\u989d\u5916\u5b89\u88c5\u5176\u4ed6\u63d2\u4ef6\r\n       new webpack.BannerPlugin('\u8fd9\u4e2a\u63d2\u4ef6\u529f\u80fd\u662f\u5934\u90e8\u63d0\u793a\u529f\u80fd'),\r\n       new CommonsChunkPlugin(\"commons.js\", [\"js1\", \"js2\", \"js3\"]),  \/\/js1.js  js2.js  js3.js\u516c\u5171\u90e8\u5206\u72ec\u7acb\u51fa\u6765\u53d6\u540d\u4e3acommons.js\r\n       new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}), \/\/webpack\u81ea\u5e26\u7684\u538b\u7f29\u4ee3\u7801\u529f\u80fd\r\n       new webpack.ProvidePlugin({  \/\/\u4f7f\u7528sudo npm install jquery@1.11.0\uff0c\u6765\u8c03\u7528jq,\u5e76\u5c06jq\u66b4\u9732\u6253\u5305\u6587\u4ef6\u5168\u5c40\u4e2d\uff0c\u76f8\u5f53\u4e8e\u7ed9window\u52a0\u4e86jquery\r\n         $:\"jquery\",  \r\n         jQuery:\"jquery\",\r\n         \"window.jQuery\":\"jquery\"\r\n       }),\r\n       new webpack.NoErrorsPlugin(), \/\/\u4e0d\u63d0\u793a\u62a5\u9519\u4fe1\u606f\r\n       new webpack.optimize.DedupePlugin() \/\/\u907f\u514d\u52a0\u8f7d\u91cd\u590d\u6a21\u5757\r\n   ],\r\n   resolve: {\r\n      \/\/\u67e5\u627emodule\u7684\u8bdd\u4ece\u8fd9\u91cc\u5f00\u59cb\u67e5\u627e\r\n      root: 'E:\/github\/flux-example\/src', \/\/\u7edd\u5bf9\u8def\u5f84\r\n      \/\/\u81ea\u52a8\u6269\u5c55\u6587\u4ef6\u540e\u7f00\u540d\uff0c\u610f\u5473\u7740\u6211\u4eecrequire\u6a21\u5757\u53ef\u4ee5\u7701\u7565\u4e0d\u5199\u540e\u7f00\u540d\r\n      extensions: ['', '.js', '.json', '.scss'],\r\n         \/\/\u6a21\u5757\u522b\u540d\u5b9a\u4e49\uff0c\u65b9\u4fbf\u540e\u7eed\u76f4\u63a5\u5f15\u7528\u522b\u540d\uff0c\u65e0\u987b\u591a\u5199\u957f\u957f\u7684\u5730\u5740\r\n      alias: {\r\n         AppStore : 'js\/stores\/AppStores.js',\/\/\u540e\u7eed\u76f4\u63a5 require('AppStore') \u5373\u53ef\r\n         ActionType : 'js\/actions\/ActionType.js',\r\n         AppAction : 'js\/actions\/AppAction.js'\r\n      }\r\n    },\r\n    watch: true \/\/\u6bcf\u6b21\u4fee\u6539\u6587\u4ef6\uff0c\u5c31\u4e0d\u9700\u8981\u6b21\u6b21\u90fd\u6267\u884cwebpack\u4e86\uff0c\u6216\u8005webpack --watch\r\n}<\/pre>\n
 <\/p>\n
\u5165\u53e3\u6587\u4ef6\uff1a<\/p>\n
\/\/entry.js\r\nif(!Function.prototype.bind){\r\n Function.prototype.bind = function(){\r\n  var fn = this,\r\n  args = [].slice.call(arguments),\r\n  object = args.shift();\r\n  return function(){\r\n    return fn.apply(object,args.concat([].slice.call(arguments)));\r\n  };\r\n };\r\n}\r\nif (!Array.prototype.filter){\r\n Array.prototype.filter = function(fun \/*, thisp*\/){\r\n   var len = this.length;\r\n   if (typeof fun != \"function\")\r\n   throw new TypeError();\r\n   var res = new Array();\r\n   var thisp = arguments[1];\r\n   for (var i = 0; i < len; i++){\r\n     if (i in this){\r\n     var val = this[i]; \/\/ in case fun mutates this\r\n     if (fun.call(thisp, val, i, this))\r\n       res.push(val);\r\n     }\r\n   }\r\n   return res;\r\n };\r\n}\r\n\/\/\u4ee5\u4e0a\u5224\u65ad\u662f\u4e3a\u4e86\u517c\u5bb9ie8\r\n\r\nrequire(\".\/style.css\");\r\nrequire(\".\/style1.css\");\r\n\/\/require(\"jquery\");  \u5728\u4f7f\u7528webpack\u4e2d\u8981\u4f7f\u7528jq\u63a8\u8350\u4f7f\u7528sudo npm install jquery@1.11.0\uff0c\u6765\u4f7f\u7528\r\nrequire('.\/module1')<\/pre>\n
 <\/p>\n
\u5176\u4ed6\u6a21\u5757\uff08js,css,\u56fe\u7247\u7b49\u7b49\u90fd\u89c6\u4e3a\u6a21\u5757\uff09<\/p>\n
\/\/ 1.html\r\n<!DOCTYPE html>\r\n<html>\r\n<head lang=\"en\">\r\n <meta charset=\"UTF-8\">\r\n <title><\/title>\r\n <script src=\".\/out\/bundle.js\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<div id=\"big\"><\/div>\r\n<div id=\"lititle\"><\/div>\r\n\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
\/\/module1.js\r\n$(function () {\r\n document.title=$().jquery;\r\n});<\/pre>\n
 <\/p>\n
\/\/style.css\r\nbody{background: yellow}<\/pre>\n
\/\/style1.css\r\ndiv{border: 5px solid red;}\r\n#big{height: 500px;width: 800px}\r\n#lititle{height: 100px;width: 100px}<\/pre>\n
 <\/p>\n
\u51c6\u5907\u5de5\u4f5c\u597d\u4e86\u4e4b\u540e \u5728\u6839\u76ee\u5f55\u4e0b\u8f93\u5165<\/p>\n
webpack   \/\/\u7cfb\u7edf\u4f1a\u9ed8\u8ba4\u53bb\u627ewebpack.config.js\u914d\u7f6e\u6587\u4ef6\r\n\r\nwebpack \/\/ \u6700\u57fa\u672c\u7684\u542f\u52a8webpack\u7684\u65b9\u6cd5\r\nwebpack -w \/\/ \u63d0\u4f9bwatch\u65b9\u6cd5\uff1b\u5b9e\u65f6\u8fdb\u884c\u6253\u5305\u66f4\u65b0\r\nwebpack -p \/\/ \u5bf9\u6253\u5305\u540e\u7684\u6587\u4ef6\u8fdb\u884c\u538b\u7f29\r\nwebpack -d \/\/ \u63d0\u4f9bsource map\uff0c\u65b9\u4fbf\u8c03\u5f0f\u4ee3\u7801\r\nwebpack --config webpack.config.js \/\/\u5355\u72ec\u8fd0\u884cwebpack.config.js\u6587\u4ef6\uff0c\u8fd9\u79cd\u60c5\u51b5\u53ef\u4ee5\u662f\u5728\u8fd0\u884c\u591a\u4e2a\u9879\u76ee\u7684\u65f6\u5019\u4f7f\u7528 \r\nwebpack --watch -webpack.config.js \/\/\u65f6\u65f6\u76d1\u542c\u6587\u4ef6\u66f4\u65b0\u8fd0\u884cwebpack\u65b9\u6cd5<\/pre>\n
\u6210\u529f\u8fd0\u884c\u7684\u63d0\u793a\u90fd\u8fd9\u6837<\/p>\n
<\/div>
<\/div><\/div><\/div>\"webpack2\"<\/figure><\/a>\n
\u6b64\u65f6\u76ee\u5f55\u4e0b\u751f\u6210\u4e86\u4e00\u4e2ajs\u6587\u4ef6\u5982\uff1a<\/p>\n
<\/div>
<\/div><\/div><\/div>\"webpack3\"<\/figure><\/a>\n
1.html\u9875\u9762\u53ea\u8981\u52a0\u8f7d\u4e86\u8fd9\u4e2abundle.js\u5c31\u76f8\u5f53\u4e8e\u52a0\u8f7d\u4e86css,js,\u56fe\u7247\u6240\u6709\u7684\u8d44\u6e90\u4e86<\/p>\n
 <\/p>\n
 <\/p>\n
\u53d1\u5e03\u670d\u52a1\u5668<\/strong><\/p>\n
webpack\u8fd8\u63d0\u4f9b\u4e86\u672c\u5730\u53d1\u5e03\u6d4b\u8bd5\u7684\u529f\u80fd\uff0c\u4e00\u65e6\u4fee\u6539\u4e86\u6587\u4ef6\u5c31\u81ea\u52a8\u538b\u7f29\u5408\u5e76\u548c\u9875\u9762\u81ea\u52a8\u5237\u65b0\uff0c\u5e76\u4e14\u8fd8\u63d0\u4f9b\u4e86\u7c7b\u4f3ciis\u3001apache\u53d1\u5e03\u7684\u529f\u80fd\u3002<\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
\u53c2\u8003\u5b66\u4e60\u7f51\u7ad9\uff1a<\/p>\n
http:\/\/zhaoda.net\/webpack-handbook\/preface.html<\/a><\/p>\n
http:\/\/www.w2bc.com\/Article\/50764<\/a><\/p>\n
http:\/\/blog.csdn.net\/yczz\/article\/details\/49250623<\/a><\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
webpack\u5c31\u662f\u4e00\u4e2a\u6253\u5305\u5de5\u5177\uff0c\u53ef\u4ee5\u5c06\u591a\u4e2ajs\u3001css\u3001\u56fe\u7247\u3001coffeescript\u3001less\u7b49\u5408\u5e76\u5728\u4e00\u8d77\uff0c […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,11],"tags":[],"class_list":["post-5189","post","type-post","status-publish","format-standard","hentry","category-nodejs","category-11"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/5189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5189"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/5189\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}