1. 初始化项目
首先，让我们用命令行创建一个名为 webapp 的项目文件夹，初始化 npm，本地安装 webpack。
// 命令行 输入：
mkdir webapp && cd webapp
npm init -y
npm install --save-dev webpack
如果你是初次接触 npm和命令行工具，建议看看我的这篇 npm 应用基础。
运行了上述命令以后，在你本地的 webapp 项目文件夹创建一个包含 index.js 文件的 src（source的缩写）文件夹，和一个包含 index.html 文件的 dist（distribution的缩写）的文件夹。顾名思义， src 文件夹中放置我们的源代码， dist 文件夹是我们发布的项目文件夹。这时候你 webapp 文件夹应该包含如下文件：
// webapp 文件夹目录结构：
webapp
|- package.json
|- /src
|- index.js
|- /dist
|- index.html
编写 index.html 文件内容如下：
// index.html 内容：
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="bundle.js"></script> <!-- 这个 bundle.js 将要使用webpack生成 -->
</body>
</html>
现在如果打开这个网页，会报错找不到 bundle.js 文件。不用担心，我们接下来就用 webpack 命令行生成这个文件。
2. 生成主 js 文件
首先，我们要编写 index.js 文件内容如下：
// index.js 内容：
import _ from 'lodash'; // webpack 支持多种模块引用语法，包括CommonJs，AMD以及ES6。我推荐使用ES6语法，以后我会写文章专门解释他们的区别。
function component() {
var element = document.createElement('div');
element.innerHTML = _.join( ['Hello', 'webpack'], ' ' );
return element;
}
document.body.appendChild( component() );
可以看到，我们的项目入口 js 文件是 index.js，它引用了 lodash 模块，所以在生成主 js 文件前，我们需要安装 lodash 依赖：
// 命令行 输入：
npm install --save lodash
安装完成后，package.json 文件中的出一个 dependencies 的对象，该对象包含一个 lodash 属性。
可能细心的你注意到了，我们安装 webpack 的时候用了
--save-dev选项，但是安装lodash的时候用了--save选项。并且，在package.json 文件中，webpack 和 lodash 也分别出现在了 devDependencies 和 dependencies 对象中。这里的--save表示保存为依赖（dependency），依赖项就是运行我们的项目所必须的模块，而-save-dev表示保存为开发依赖（development dependency），是我们开发的时候所必须的模块，但并不是运行项目或者在生产环境下必须的模块。两者一个显著的特征区别就是当我们在命令行执行npm install时，npm 只会帮我们安装 dependencies 对象中的依赖模块。
然后我们可以通过命令行将 index.js 连同依赖的 lodash 一起打包成一个名为 bundle.js 的主文件：
// 命令行 输入：
./node_modules/.bin/webpack src/index.js dist/bundle.js
好吧，我承认这是一个蹩脚的写法。并且windows下路径连接符还需要用\。
但是，我们成功地使用 webpack 生成了一个 bundle.js 文件，并且我们在浏览器打开 index.html 文件，可以看到“Hello webpack”。下面我要讲解如何简单地配置 webpack 使我们可以简化上述命令。
3. 简单配置 webpack
在我们的项目文件夹下创建一个 webpack.config.js 文件，如下：
// webapp 文件夹目录结构：
webapp
|- package.json
* |- webpack.config.js
|- /src
|- index.js
|- /dist
|- index.html
|- bundle.js
并按照如下代码编辑 webpack.config.js 文件：
// webpack.config.js 内容：
const path = require('path'); // path是node内置的模块
module.exports = {
entry: './src/index.js', // 入口文件的相对路径
output: { // 输出
filename: 'bundle.js', // 文件名
path: path.resolve(__dirname, 'dist') // 文件所在目录的绝对路径
}
};
这时候我们只需在命令行内输入：
// 命令行 输入：
// Linux, Mac 下：
./node_modules/.bin/webpack
// 或者 windows:
.\node_modules\.bin\webpack
就能生成 bundle.js 文件。如果我们还想进一步简化该命令，我们就需要修改 package.json 文件的 “scripts” 对象了。
4. 配置 package.json 的 scripts
package.json 的 scripts 对象负责存放我们自定义的命令行命令，该对象的每个属性对应了一个命令，属性名为我们在npm run后面输入的命令的名称，属性值为这个命令。因此，我们可以这样修改 package.json：
// package.json 内容：
{
...
"scripts": {
"build": "webpack" //这里不用再写安装路径了
},
...
}
注意在 scripts 对象里，我们可以访问本地安装的 npm 包，而不用再写这些包的安装路径了。所以，最终我们输入如下命令就能完成我们的工作了：
// 命令行 输入：
npm run build
