一、安裝
??安裝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 = {}; ...
)
