（1） 安裝webpack 在安裝 Webpack 前，你本地環境需要支持 node.js。 由於 npm 安裝速度慢，本教程使用了淘寶的鏡像及其命令 cnpm，安裝使用介紹參照：使用淘寶 NPM 鏡像。 使用 cnpm 安裝 webpack： cnpm install webpack –g （2） ...
（1） 安裝webpack
在安裝 Webpack 前，你本地環境需要支持 node.js。
由於 npm 安裝速度慢，本教程使用了淘寶的鏡像及其命令 cnpm，安裝使用介紹參照：使用淘寶 NPM 鏡像。
使用 cnpm 安裝 webpack：
cnpm install webpack –g
（2） 創建項目
1）創建一個app項目，命令：mkdir app
2）創建一個run00b1.js文件。代碼如下：document.write("It works.");
3）添加index.html文件。加入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
4）運行打包命令：webpack runoob1.js bundle.js
5)創建第二個js文件 runoob2.js，添加代碼：
module.exports = "It works from runoob2.js.";
6）更新runoob1.js文件
document.write(require("./runoob2.js"));
（3）安裝loader模塊，來載入css文件，命令：（全局安裝需要參數 -g）
cnpm install css-loader style-loader
1） index.css文件
body{background：yellow}
2）
修改app/runoob1.js文件
require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));
3）
打包命令：
webpack runoob1.js bundle.js
（4）配置文件，為了便於管理創建webpack.config.js文件
module.exports =
{
entry: "./runoob1.js",
output: {path: __dirname, filename: "bundle.js"},
module: {loaders: [{test: /\.css$/, loader:
"style-loader!css-loader"}]}
};
（5）插件安裝，安裝內置的 BannerPlugin 插件，用於在文件頭部輸出一些註釋信息。
命令：cnpm install webpack --save-dev
修改webpack.config.js文件。
var webpack=require('webpack');
module.exports = {
entry: "./runoob1.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader"
}
]
},
plugins:[
new webpack.BannerPlugin('菜鳥教程 webpack 實例')
]
};
運行命令：webpack
（6）開發環境
1) 當項目逐漸變大，webpack 的編譯時間會變長，可以通過參數讓編譯的輸出內容帶有進度和顏色。
webpack --progress –colors
2) 如果不想每次修改模塊後都重新編譯，那麼可以啟動監聽模式。開啟監聽模式後，沒有變化的模塊會在編譯後緩存到記憶體中，而不會每次都被重新編譯，所以監聽模式的整體速度是很快的。
webpack --progress --colors --watch
3) 如果不想每次修改模塊後都重新編譯，那麼可以啟動監聽模式。開啟監聽模式後，沒有變化的模塊會在編譯後緩存到記憶體中，而不會每次都被重新編譯，所以監聽模式的整體速度是很快的。
webpack --progress --colors –watch
可以瀏覽項目中的頁面和編譯後的資源輸出，並且通過一個 socket.io 服務實時監聽它們的變化並自動刷新頁面。
4)安裝命令：
# 安裝 cnpm install webpack-dev-server -g
# 運行 webpack-dev-server --progress --colors
