1.使用Webpack前需要做的準備
在新項目文件夾中新創建package.json,這是一個標準的npm說明文件，裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務。(在終端可以使用npm init可以自動創建package.json)文件。
輸入這個命令後，終端會問你一系列諸如項目名稱，項目描述，作者等信息，不過不用擔心，如果你不準備在npm中發佈你的模塊，這些問題的答案都不重要，回車默認即可。
對應生成的package.json文件
{
"name": "pack",
"version": "1.0.0",
"description": "",
"main": "app/main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "gx",
"license": "ISC"
}
2.安裝webpack
(1)在本項目中安裝webpack作爲依賴包。
npm install --save-dev webpack
(2)全局安裝
npm install -g webpack
這裏我選用的是在項目中安裝即第一種方法。
回到項目根目錄創建兩個文件夾，app和public,app文件夾用來存放原始數據和我們將寫的javaScript模塊，public文件夾用來存放之後供瀏覽器讀取的文件，
（包括使用webpack打包生成的js文件以及一個index.html文件）。接下來我們再創建三個文件:
index.html --放在public文件夾中;
Greeter.js-- 放在app文件夾中;
main.js-- 放在app文件夾中;
項目結構如圖所示：
index.html中文件內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
我們在Greeter.js中定義一個返回包含問候信息的html元素的函數,並依據CommonJS規範導出這個函數爲一個模塊：
// Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};
main.js文件中我們寫入下述代碼，用以把Greeter模塊返回的節點插入頁面。
//main.js
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
使用webpack命令打包，基本使用方法如下：
webpack {entry file} {destination for bundled file}
指定入口文件後，webpack將自動識別項目所依賴的其它文件，不過需要注意的是如果你的webpack不是全局安裝的，那麼當你在終端中使用此命令時，需要額外指定其在node_modules中的地址，繼續上面的例子，在終端中輸入如下命令
node_modules\.bin\webpack app\main.js --output public\bundle.js
命令用的不對,應該加上--output表明public\bundle.js是輸出文件。
打開index.html頁面我們可以看到，在Greeter.js中輸入的內容Hi there and greetings!
此時我們已經成功的使用Webpack打包了一個文件了。