假如你不是一個喜歡掉過介紹的人，你可以獲得Webpack是什么的一些線索。簡單的說，它是一個模塊打包器。它讓一串資源文件進去，然后輸入資源文件讓你在客服端使用。
這聽起來簡單，但是在實際中，這將是一個復雜和麻煩的過程。你肯定不想自己處理所有的細節。這就是Webpack所要做的。下一步，你將開始一個Webpack配置，并開始讓你的第一個項目進入開發模式。
#配置一個項目
Webpack是一個依賴Node.js的工具。確保你安裝了Node.js并且在你的終端里`npm`是可用的。為你的項目配置一個目錄，進入這個目錄，輸入`npm init`并填充一些細節。你可以僅僅對每個設置敲出*enter*,它就可以工作了。下面是具體的命令：
```
mkdir kanban_app
cd kanban_app
npm init
# hit return a few times till you have gone through the questions
```
運行完上面以后，你應該在你項目的跟目錄擁有了`package.json`。你也可以在需要時進行手動更改。我們會通過`npm`工具對它進行更改，當然你也可以用你喜歡的方式進行。官方文檔會解釋[package.json options](https://docs.npmjs.com/files/package.json)里的更多細節。在這本書里我會隨后介紹一些編寫庫相關的技巧。
如果你采用版本控制，你也應該那么做。這是一個很好的時間來設置你的倉庫了。你可以創建提交作為你項目的進展。
##.gitignore
```
node_modules
*.log
.DS_Store
```
至少你應該把`node_modules`包含進來，不希望它出現在源碼控制力。引入這個目錄進來會導致的問題是，這里面的一些模塊是根據平臺進行編譯的，這會使合作變的很麻煩。理想情況下，`git status`應該看起來很干凈。你可以按照自己的需求擴展`.gitignore`。
#安裝Webpack
下面，你應該安裝Webpack。我們進行一個本地安裝并將它保存到項目依賴項里。這將允許我們能在一個項目中維持Webpack的版本。
```
npm i webpack node-libs-browser --save-dev
```
> node-libs-browser is installed as it is a peer dependency of Webpack. Starting from npm 3 it won't get installed automatically. It's a good idea to have it installed in order to be future-proof.
這是一個允許Webpack第一次的好時機。敲入`node_modules/.bin/webpack`。你應該可以看見版本日志，一個指向命令行接口向導的鏈接和一個長長的選項列表。我們不會使用到大多數功能，但是我們很高興知道這個工具包含了如此多的功能，僅此而已。
Webpack使用全局安裝也是可以工作的(在安裝時使用`-g`或者`--global`標識)。像這樣作為一個項目的依賴是首選。這樣的安排會幫助你保持簡單的生活，會在你允許它是直接控制他的版本。
我們會使用`--save`和`--save-dev`去分離應用和開發時期的依賴。這樣分離會讓項目的依賴更加的容易理解。當我們生成產品包的時候回派上用場。
> There are handy shortcuts for --save and --save-dev. -S maps to --save and -D to --save-dev. So if you want to optimize for characters written, consider using these instead.
#目錄結構
當一個僅僅有`package.json`的項目出生，我們贏設置更多實在的東西。讓我們做一個小的web站點并加裝一些JavaScript進來，然后使用Webpack來構建它們。設置的結構如下:
/app
-- index.js
-- component.js
/build (automatically generated, no need to create this)
-- bundle.js
-- index.html
package.json
webpack.config.js
在這個案例中，我們將基于我們的`/app`使用Webpack生成`bundle.js`。為了讓這個成為可能，讓我們一些資產和`webpack.config.js`。
#設置資產
如果你永不厭煩`Hello world`。我們不妨模仿一個變體。設置一個像下面的組件：
##app/component.js
```
modules.exports = function() {
var element = document.createElement('h1');
element.innerHTML = 'Hello world';
return element;
}
```
下一步，我們需要一個入口，為我的應用。它將簡單的包含我們的組件并通過DOM渲染它。
##app/index.js
```
var component = require('./component');
var app = document.createElement('div');
document.body.appendChild(app);
app.appendChild(component());
```
#配置Webpack
我們需要告訴Webpack如何處理我們的剛才設置的資產。為了這個目的，我們將編寫`webpack.config.js`。Webpack和開發服務會按照約定發現這些文件。
為了讓事情變得簡單。我們需要為我們的應用生成一個入口點通過使用`html-webpack-plugin`。它將為可能的資產創建鏈接并使我們的生活變得簡單。敲入
```
npm i html-webpack-plugin --save-dev
```
將它安裝到項目里。
為了繪制我們的應用到*build/bundle.js*里和生成*build/index.html*我們需要像這樣的配置:
##webpack.config.js
```
var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ROOT_PATH = path.resolve(__dirname);
module.exports = {
entry: path.resolve(ROOT_PATH, 'app'),
output: {
path: path.resolve(ROOT_PATH, 'build'),
filename: 'bundle.js'
},
plugins: [
new HtmlwebpackPlugin({
title: 'Kanban app'
})
]
};
```
鑒于Webpack是適用絕對路徑的，我們會利用這一特性。我喜歡適用`path.resolve`,但是`path.join`也是一個好的選擇。`path.resolve`等于通過*cd*命令導航到文件系統。`path.join`僅僅給你的是一個字符串連接。可以查看[Node.js path API](https://nodejs.org/api/path.html)活動更多精確的細節。
假如你已經運行了`node_modules/.bin/webpack`，你應該可以看到一個Webpack的構建過程。你可以讓*/build*里的文件運行起來通過一個虛擬的web服務，比如(`npm i serve -g`)。在瀏覽器里檢查結果。
盡管這很棒，但是對于開發來說并不夠用。你可以給開發環境設置更好用工具。
> Note that you can pass a custom template to html-webpack-plugin. In our case, the default template it uses is fine for our purposes for now.
#配置Webpack-dev-server
現在我們已經把基本的構建塊弄在一起了，我們可以配置開發服務了。`webpack-dev-server`是一個開發服務它能在你開發應用時在瀏覽器里自動刷新頁面內容。
這個功能大致和[LiveReload](http://livereload.com/)或[Browsersync](http://www.browsersync.io/)相當。Webpack比這些工具最多的優勢在于模塊熱替換(HMR)。我們將在講解React時進行講解。
敲入命令
```
npm i webpack-dev-server --save-dev
```
在項目的根目錄進行服務的安裝。我們將通過npm啟動我們的開發服務器。它允許我們在`package.json`里設置`scripts`。下面的設置就足夠了：
##package.json
```
...
"scripts": {
"start": "webpack-dev-server"
},
...
```
我們還需要做一些配置工作。
##webpack.config.js
```
...
var webpack = require('webpack');
var ROOT_PATH = path.resolve(__dirname);
module.exports = {
...
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
...
]
};
```
