假如你不是一个喜欢掉过介绍的人，你可以获得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(),
...
]
};
```
