安装

前提：安装了node.js和npm

进行全局安装运行命令：npm install webpack -g
安装成功后可以运行命令：webpack -h查看当前安装的版本信息，以及可以使用的指令。
我们也可以将webpack安装到当前的项目依赖中，

1.确保进入项目目录 
2.确定已经有 package.json，如果没有就通过命令：npm init 创建
3.安装webpack依赖：npm install webpack --save-dev

安装好的 package.json应该是下面这个样子：

{
  "name": "first-demo",
  "version": "1.0.0",
  "description": "this is my first demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "mihaibo",
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^0.28.1",
    "style-loader": "^0.17.0",
    "webpack": "^2.5.1"
  }
}

用webpack运行第一个打包程序

首先创建一个index.html文件和js入口文件entry.js文件

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <h1 id="app"></h1>
    <!-- 注意这里引入的文件不是我们创建的文件，而是用webpack生成的文件 -->
    <script src="bundle.js"></script>
</body>
</html>

entry.js:

document.getElementById("app").innerHTML = "这是我第一个打包成功的程序";

文件创建成功，可以开始进行打包，输入以下命令行：
webpack entry.js bundle.js

现在用浏览器打开index.html页面会看到：

这是我第一个打包成功的程序

接下来再添加一个js文件，first.js 内容如下：

var h2= document.createElement("h2")
h2.innerHTML="不是吧，那么快第二个打包程序啦！";
document.body.appendChild(h2);

接下来我们对entry.js进行一些修改：

document.getElementById('app').innerHTML="这是我第一个打包成功的程序";
//添加
require("./first.js");

webpack again! 命令行输入：webpack entry.js boundle.js
打包成功后会显示日志：

Hash: 85cd213edf4c9ab6c8e7
Version: webpack 2.5.1
Time: 522ms
    Asset     Size  Chunks             Chunk Names
bundle.js  18.8 kB       0  [emitted]  main
   [0] ./first.js 108 bytes {0} [built]
   [1] ./entry.js 157 bytes {0} [built]

刷新浏览器会发现又加了一行文字。

Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。

参考自guowenfh