## webpack
1、安装`webpack`。
~~~
npm install --save-dev webpack
~~~
`tip: --save-dev` 是你开发时候依赖的东西，`--save` 是你发布之后还依赖的东西。[点这里了解更多](https://segmentfault.com/q/1010000005163089)
2、根据[webpack文档](https://doc.webpack-china.org/guides/getting-started)编写最基础的配置文件。
新建webpack开发配置文件 `touch webpack.dev.config.js`
` webpack.dev.config.js`
~~~
'use strict'
const path = require('path')
module.exports = {
/*入口*/
entry: path.join(__dirname, 'src/index.js'),
/*输出到dist文件夹，输出文件名字为bundle.js*/
output: {
path: path.join(__dirname, './dist'), /*输出目录*/
filename: 'bundle.js' /*输出文件名*/
}
}
~~~
3、使用`webpack`编译文件。
新建入口文件`index.js`
`mkdir src && touch ./src/index.js`
`src/index.js` 内容如下
`document.getElementById('app').innerHTML = 'Webpack works'`
在git bash 上执行 `webpack --config webpack.dev.config.js`
> webpack 需要全局安装，npm install -g webpack 这里-g是全局安装
运行命令之后可以看到目录多了dist 文件夹 里面有 bundle.js，但是并不能看到效果，所以需要一个html模板入口文件
4、新建一个 `index.html`。
`touch ./dist/index.html`
`dist/index.html`写入内容
~~~
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./bundle.js"></script>
</body>
</html>
~~~
这个过程叫做编译，通过`webpack --config webpack.dev.config.js`我们指定了webpack帮我们做了一些东西。
让它找到了`webpack.dev.config.js`文件，把入口文件 index.js 经过处理之后，生成 bundle.js。就这么简单。
