# 一、安裝
**1. 前提條件**
在開始前，先要確認你已經安裝 Node.js 的最新版本。[Nodejs官網](https://nodejs.org/en/)
**2. 全局安裝**
~~~
npm install webpack -g
~~~
安裝成功后，在命令行輸入`webpack -h`即可查看當前安裝的版本信息，以及可以使用的指令。
注意，不推薦全局安裝 webpack。這會鎖定 webpack 到指定版本，并且在使用不同的 webpack 版本的項目中可能會導致構建失敗。因此，建議還要把webpack安裝到自己的項目依賴中。
**3.本地安裝**
~~~
npm install webpack --save-dev
~~~
當你在本地安裝 webpack 后，你能夠在 node_modules/.bin/webpack 找到它的二進制程序。
**下面是系列步驟**
~~~javascrtip
# 創建自己的項目目錄
# 初始化項目目錄，在當前目錄使用命令
npm init //如D:\webpackdemo1>npm init
（此時會列出各項設置，不懂的話一路enter即可）
# 本地安裝
npm install webpack --save-dev
// –save：模塊名將被添加到dependencies，可以簡化為參數-S。
// –save-dev: 模塊名將被添加到devDependencies，可以簡化為參數-D。
~~~
安裝完后瀏覽項目目錄如圖
打開package.json文件如圖
至此，webpack環境安裝完畢。
* * * * *
# 二、創建試用
由于是簡單的起步，所以我們在項目根目錄下直接創建一個靜態頁面` index.html` 和一個 JS 入口文件 `entry.js`（文件名可以自定義，此處entry是為了以后理解概念）。
* index.html
~~~html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebpackDemo1</title>
</head>
<body>
<div id="demo"></div>
<script src="bundle.js"></script>
<!-- 注意這里引入的不是我們剛才創建的entry.js文件，而是用webpack生成的文件 -->
</body>
</html>
~~~
* entry.js
~~~javascript
document.getElementById('demo').innerHTML="我的第一個Webpack打包demo";
~~~
* 終端運行
~~~
webpack entry.js bundle.js
~~~
最后，在瀏覽器打開index.html就可以看到“**我的第一個Webpack打包demo**”字樣了！
* * * * *
嘗試再創建一個文件`another.js`
~~~javascript
var div= document.createElement("div")
div.innerHTML="我的第二個程序";
document.body.appendChild(div);
~~~
修改`entry.js`
~~~javascript
document.getElementById('demo').innerHTML="我的第一個Webpack打包demo";
//添加
require('./another.js');
~~~
Webpack 會分析入口文件，解析包含依賴關系的各個文件。這些文件（模塊）都打包到 bundle.js 。Webpack 會給每個模塊分配一個唯一的 id 并通過這個 id 索引和訪問模塊。在頁面啟動時，會先執行 entry.js 中的代碼，其它模塊會在運行 require 的時候再執行。
刷新瀏覽器，another.js的代碼已經生效，頁面出現新文字。
