原文--http://webpack.github.io/docs/tutorials/getting-started/
什么是webpack？
webpack是一個模塊打包器。webpack把模塊(s)連同它的依賴一起打包生成包含這些模塊的靜態資源。
1.怎么安轉webpack
首先需要安裝node.js，在命令行中輸入：
$ npm install webpack -g
2.怎么使用webpack
1.從一個空的文件夾開始，首先創建：entry.js,然后輸入：
document.write("It works.");
接着再添加一個html文件：
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
在這之后，在命令行中運行：
$ webpack ./entry.js bundle.js
它將編譯文件，並且會創建一個文件包。命令運行成功之后，顯示：
Version: webpack 1.13.3 Time: 24ms Asset Size Chunks Chunk Names bundle.js 1.42 kB 0 [emitted] main chunk {0} bundle.js (main) 28 bytes [rendered] [0] ./tutorials/getting-started/setup-compilation/entry.js 28 bytes {0} [built]
在瀏覽器打開index.html，會看見 “It works.”。
2.創建第二個個文件content.js，添加內容：
module.exports = "It works from content.js.";
更新entry.js
- document.write("It works.");
+ document.write(require("./content.js"));
重新編譯：
$ webpack ./entry.js bundle.js
刷新瀏覽器之后，回看到“It works from content.js.”。
webpack將分析接口文件依賴其他文件。這些文件(稱為模塊)都包含在bundle.js。
webpack會給每個模塊一個惟一的id和保存所有模塊訪問bundle.js id的文件。只有輸入模塊是在啟動時執行的。一個小的運行時提供了需要函數和在需要時執行的依賴關系。
3.添加css文件
webpack只能處理JavaScript本身,所以我們需要css-loader處理CSS文件。我們還需要style-loader CSS文件應用樣式。
運行npm安裝css-loader style-loader安裝加載器。(他們需要安裝在本地沒有- g),這將為您創建一個node_modules文件夾,加載器將運行。
創建一個css文件，style.css
body {
background: yellow;
}
然后更新entry.js：
+ require("!style!css!./style.css");
document.write(require("./content.js"));
通過 “!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"));
執行下面的命令：
1 $ webpack ./entry.js bundle.js --module-bind "css=style\!css"
官網說明在這有個錯誤，css=style\!css 里面少了個反斜杠，原因是嘆號在 bash 里有特殊意義
4.添加 webpack.config.js
項目根目錄下新建一個webpack.config.js ，然后通過一句命令$ webpack就能打包我們的項目。
module.exports = { entry: "./entry.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style!css" } ] } };
在命令行，輸入：
webpack
webpack 命令會嘗試讀取同目錄中的 webpack.config.js 文件。你會看到：
Version: webpack 1.13.3 Time: 148ms Asset Size Chunks Chunk Names bundle.js 10.7 kB 0 [emitted] main chunk {0} bundle.js (main) 8.85 kB [rendered] [0] ./tutorials/getting-started/config-file/entry.js 64 bytes {0} [built] [1] ./tutorials/getting-started/config-file/style.css 943 bytes {0} [built] [2] ../~/css-loader!./tutorials/getting-started/config-file/style.css 197 bytes {0} [built] [3] ../~/css-loader/lib/css-base.js 1.51 kB {0} [built] [4] ../~/style-loader/addStyles.js 6.09 kB {0} [built] [5] ./tutorials/getting-started/config-file/content.js 45 bytes {0} [built]
如果項目增加編譯可能需要一段時間。所以我們希望顯示進度條。和我們想要的顏色…
webpack --progress --colors
我們不想在每次修改后手動編譯…
webpack --progress --colors --watch
Webpack可以緩存不變的模塊和輸出文件編譯。
當使用觀看模式,觀察者webpack安裝文件的所有文件,編譯過程中使用。如果發現任何改變,它會再次運行編譯。啟用高速緩存的時候,webpack保持在內存中每個模塊並將重用它如果不是改變了。
5.開發服務器
這結合一個小express服務器在localhost:8080是靜態資產以及包(自動編譯)。結束時它會自動更新瀏覽器頁面重新編譯(SockJS)。打開http://localhost:8080 / webpack-dev-server /包在您的瀏覽器中。
npm install webpack-dev-server -g
webpack-dev-server --progress --colors