一、安裝
安裝Webpack之前需要安裝nodejs，然後用npm安裝:
$ npm install webpack -g &nsbp;運行以上命令就將Webpack安裝到了全局環境中。
但是通常我們會將Webpack只安裝到項目的依賴中:
$ cd /www/webpack_demo1 // 進入項目目錄，確保該目錄下存在有package.json文件,該文件之後會講到
$ npm install webpack --save-dev // 安裝webpack依賴二、使用
首先創建一個index.html和entry.js文件：
// index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script> // 注意這裏是bundle.js不是entry.js
</body>
</html>// entry.js
document.write('It works.')然後編譯 entry.js 並打包到 bundle.js：
$ webpack entry.js bundle.js 然後用瀏覽器打開會看到It works
接下來添加一個模塊module.js，並修改入口entry.js:
// module.js
module.exports = 'It works from module.js.'// entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模塊 然後重新打包 webpack entry.js bundle.js 刷新頁面可以看到變化 It works.It works from module.js.
Webpack 會分析入口文件，解析包含依賴關係的各個文件。這些文件（模塊）都打包到 bundle.js 。Webpack 會給每個模塊分配一個唯一的 id 並通過這個 id 索引和訪問模塊。在頁面啓動時，會先執行 entry.js 中的代碼，其它模塊會在運行 require 的時候再執行。
三、Loader
Webpack本身只能處理js模塊，如果要加載css\img...等靜態資源就需要使用Loader轉換
Loader可以理解爲模塊和資源的加載器，它本身是一個函數，接受源文件爲參數然後轉換並返回。這樣我們就可以通過require加載任何類型的模塊或文件。 Loader的特性:
- 可以通過管道方式鏈式調用，每個 loader 可以把資源轉換成任意格式並傳遞給下一個 loader ，但是最後一個 loader 必須返回 JavaScript。
- Loader 可以同步或異步執行。
- Loader 運行在 node.js 環境中，所以可以做任何可能的事情。
- Loader 可以接受參數，以此來傳遞配置項給 loader。
- Loader 可以通過文件擴展名（或正則表達式）綁定給不同類型的文件。
- Loader 可以通過 npm 發佈和安裝。
- 除了通過 package.json 的 main 指定，通常的模塊也可以導出一個 loader 來使用。
- Loader 可以訪問配置。
- 插件可以讓 loader 擁有更多特性。
- Loader 可以分發出附加的任意文件。
慣例loader一般是xxx-loader格式，eg: css-loader。在引用loader的時候可以使用簡寫: json-loader可以寫json。
Loader可以在require()引用模塊的時候添加，也可以在webpac全局配置中進行綁定，還可以通過命令行的方式使用。
下面來說明下loader怎麼用 我們在頁面中引入一個style.css文件，首頁將style.css看成一個模塊，使用css-loader讀取它，再用style-loader把它插入到頁面
/* style.css */
body { background: blue; }修改entry.js
require("!style-loader!css-loader!./style.css") // 載入 style.css
document.write('It works.')
document.write(require('./module.js'))安裝loader：
$ npm install css-loader style-loader // 我在這裏安裝的時候貌似報了個錯，後邊加-g指定全局安裝就好了 重新編譯打包可以看到頁面背景顏色發生了變化
如果每次require CSS文件的時候都要寫loader前綴，很麻煩，我們可以根據模塊類型(擴展名)來自動綁定需求的loader。
將entry.js中的require("!style!css!./style.css") 修改爲require("./style.css"),然後執行:
$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'
// 有些環境下可能需要使用雙引號
$ webpack entry.js bundle.js --module-bing "css=style-loader!css-loader"這兩種方式效果是一樣的。
四、配置文件
Webpack處理在命令行中指定參數還可以通過制定配置文件來執行。默認情況下會搜索當前目錄的webpack.config.js文件，這個文件是一個node.js模塊，返回一個json格式的配置信息對象，或通過 --config 選項來指定配置文件。
在項目中創建package.json（package.json是一個標準的npm說明文件，裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等。在終端中使用npm init命令可以自動創建這個package.json文件）來添加webpack需要的依賴:
{
"name": "webpack-example",
"version": "1.0.0",
"description": "A simple webpack example.",
"main": "bundle.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"webpack"
],
"author": "orlion",
"license": "MIT",
"devDependencies": {
"css-loader": "^0.21.0",
"style-loader": "^0.13.0",
"webpack": "^1.12.2"
}
}然後運行:
npm install然後創建一個配置文件webpack.config.js：
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
}
}同時簡化entry.js與style.css加載方式:
require('./style.css')五、插件
插件可以完成loader不能完成的功能
插件的使用一般是在webpack的配置信息plugins選項中指定。
Webpack本身內置了一些常用的插件，下面我們利用BannerPlugin內置插件來演示一下。這個插件的作用是給輸出的文件頭部添加註釋信息
修改webpack.config.js，添加plugins:
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
},
plugins: [
new webpack.BannerPlugin('This file is created by zhaoda')
]
}然後運行webpack，打開bundle.js。可以看到文件頭部出現了我們指定的註釋信息：
/*! This file is created by zhaoda */
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
...