一步步了解webpack
來自：http://segmentfault.com/a/1190000003898555
前言
demo 地址: https://github.com/yy8597/webpack-demos
之前學習了 broswerify，發現確實很好用。雖然沒有 grunt 那樣豐富的配置和插件，但就是覺得“恩！這就是我想要的結構”。
webpack 感覺就是 broswerify 的進階版，怎么說呢：
-
有更多可配置內容
-
比起 broswerify 一股腦得打成單包更智能。
安裝
npm install webpack -g
-g 方便我們在命令行直接使用 webpack
使用
基本命令 demo1
首先建立兩個文件
//entry.js
document.write("It works.");
//index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html> 執行 webpack
$ webpack ./entry.js bundle.js
生成 bundle.js，然后打開 index.html 就可以看到
<div style="border:5px solid #333;padding:10px;background:yellow;margin:20px 0">It works.</div>
添加依賴 demo2
增加一個文件
//content.js module.exports = "It works from content.js.";
我們修改 entry.js 加載 content.js 的內容
//document.write("It works.");
document.write(require("./content.js")); 同樣執行
$ webpack ./entry.js bundle.js
在瀏覽器中看到
<div style="border:5px solid #333;padding:10px;background:yellow;margin:20px 0">It works from content.js.</div>
done~
webpack 分析你的入口文件(entry.js)所依賴的其他文件（模塊），這些文件都會被打包到 bundle.js中。webpack 會分配給每個模塊一個唯一的 Id，在 bundle.js 中通過這個 Id 來訪問每個模塊。在程序啟動的時候只會處理入口模塊（entry.js）, require 方法會在執行時即時地處理依賴模塊。
打包 css demo3
webpack 只能處理 javascript，要處理 css 就需要安裝css-load來轉換 css 為 js，還要安裝style-loader 將轉換后的 css 加載到 dom 中。
$npm install css-loader style-loader --save
接著增加 css 文件
body {
background: yellow;
} 修改 entry.js，然后就能看到效果
require("!style!css!./style.css");
document.write(require("./content.js")); 同樣執行
$ webpack ./entry.js bundle.js
<div style="border:5px solid #333;padding:10px;background:yellow;margin:20px 0">It works from content.js.</div>
通過 “!style!css!” 這樣的前綴，可以把文件進行一系列的轉化，最終變成 javascript 的一個模塊。
命令行綁定 loaders
如果我們不想寫過長的 require : require("!style!css!./style.css");，簡化為require("./style.css")
或者我們喜歡靈活定制 css 文件的轉化方式。
修改 entry.js
//require("!style!css!./style.css");
require("./style.css");
document.write(require("./content.js")); 執行下面的命令：
$ webpack ./entry.js bundle.js --module-bind "css=style\!css"
官網說明在這有個錯誤，css=style\!css里面少了個反斜杠，原因是嘆號在 bash 里有特殊意義
<div style="border:5px solid #333;padding:10px;background:yellow;margin:20px 0">It works from content.js.</div>
添加 webpack.config.js demo4
理解了上面的 demo 以后，接下來我們就可以在項目根目錄下新建一個webpack.config.js ，然后通過一句命令$ webpack就能打包我們的項目。
//webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
}; webpack 命令會嘗試讀取同目錄中的 webpack.config.js 文件。
And More
還可以通過一些參數使得打包過程可視化
$ webpack --progress --colors
--progress 打印打包日志
--colors -c 帶顏色的日志（官方是這么描述的，但我沒看到顏色...）
當然還有 watch 功能
$ webpack --progress --colors --watch
必須的要有 server
$ npm install webpack-dev-server -g $ webpack-dev-server --progress --colors
~ 完 ~
這里只是介紹了 webpack 基本的用法
demo 基本都是翻譯自webpack/getting-started
更多詳細和進階的內容還是推薦去官網看看