webpack是一個前端模塊構建工具，它能夠將原本一些有依賴關係的文件（源代碼）構建成靜態資源。
1.webpack安裝
$ npm install webpack -g //進行全局安裝
$ npm install webpack --save-dev //進行項目本地安裝
$ npm install webpack-dev-server --save-dev //安裝webpack-dev-server工具2.基本工作原理
webpack的基本工作原理是，首先要選定一個入口文件，這個入口文件可能要依賴其他的文件模塊（如require了一個其他的模塊），而那些被依賴的模塊可能又要依賴其他模塊，這樣一層一層的遞推。webpack的作用就是從入口文件開始，將存在依賴關係的各個文件構建成一個靜態資源。
在一般的項目開發過程中都有構建過程。一個項目可能的基本項目結構爲：首先在src目錄下存放開發者編寫的源代碼，node-modules中存放安裝的各個模塊，而build目錄下存放的就是構建好的資源。webpack的工作過程就是將src中的源代碼構建成build下的靜態資源。
3.基本使用
比如src目錄下存在一個app.js入口文件，而這個文件有依賴於test.js文件，要想將這些源代碼構建成一個靜態資源app.budle.js文件，只需執行下面的命令：
webpack ./app.js app.budle.js
webpack的第一個參數是入口文件的路徑，第二個參數是要構建的文件名，默認情況下構建後的文件在當前目錄下。
4.使用webpack.config.js
爲了不必每次構建都在命令行中輸入大量的代碼，可以使用webpack.config.js配置文件。這樣每次要進行構建時，只需要執行命令webpack，webpack便會自動對當前目錄下的webpack.config.js文件進行解析，從而自動完成構建。
一個基本的webpack.config.js的代碼及註釋如下：
module.exports = {
entry: './src/app.js', //entry字段指定入口文件
output: { //output字段指定構建後的文件
path: './bin', //path字段指定構建後文件的位置
filename: 'app.bundle.js' //filename字段指定構建後的文件名
}
};使用上面的配置文件和在命令行構建效果相同，但是更加方便。
5.使用loader
webpack只能解析JavaScript代碼。但是很多時候項目源代碼中不只有JavaScript代碼，還可能有css樣式代碼、coffeScript等其他代碼，這個時候就需要使用loader加載其他語言的轉化模塊，將其他代碼轉換成webpack能夠使用的JavaScript代碼。
一般的loader命名都是語言名xxx-loader。比如能夠將ES6轉換成ES5的模塊babel，對應的loader名就叫babel-loader。
比如我們要構建的文件中存在.css後綴名的文件，這些文件使用css代碼編寫的。構建這種項目的時候webpack.config,js文件內容如下：
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" } //匹配.css文件，使用對應的loaders
]
}
};在loaders字段中指定轉換，可以指定多個。這裏指定了匹配正則表達式/\.css$/的文件及後綴名爲.css的文件，使用css-loader和style-loader進行轉換。當然使用之前需要先安裝這兩個loader：npm install css-loader style-loader
6.webpack-dev-server
webpack-dev-server是一個小型Express服務器，使用webpack-dev-middlerware構建。開發中可以用它來啓動一個服務器，更新代碼的時候界面會動態的進行重新渲染。