上一節中，我們已經安裝好了 webpack ，本節我們來學習 何使用 webpack 進行文件打包。
使用webpack打包文件
要打包文件，首先我們需要初始化一個項目，前面我們已經創建好了一個 xkd_webpack 的項目，並且這個項目根目錄下已經有了一個 package.json 文件、package-lock.json 文件和一個 node_modules 文件夾，如下所示： 
在實際項目中，爲了方便管理許多文件，我們可能需要創建一個 src 文件夾存放入口文件等開發文件，然後創建一個 dist 文件夾存放最終打包的文件，還有其他類型的文件，爲了方便管理我們也會放在同一個目錄下。
但是因爲我們這裏只是舉例說一下如何使用 webpack 打包文件，所以我們直接項目根目錄下，創建一個靜態頁面 index.html 和一個 JS 的入口文件 index.js 文件，文件名稱是我們自定義的，如果你想使用其他的名稱也是可以的。
下面是 index.html 文件的內容：
<html>
<head>
<meta charset="utf-8">
<title>webpack入門</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
在這個 HTML 文件中我們引入了一個 bundle.js 文件，這個 bundle.js 文件就是最終的打包後的文件，但是現在還沒有生成喲，要等我們執行完打包命令後纔會生成這個文件。
然後入口文件 index.js 的內容如下所示：
document.write('你好，俠課島！');
最後執行下列命令，就可以成功將 index.js 文件打包到 bundle.js文件中：
webpack index.js -o bundle.js
執行命令效果如下所示： 
命令執行成功後，項目根目錄下會生成一個 bundle.js 文件。這個文件的作用就是用了一個立即執行函數，然後將 index.js 的內容封裝成一個函數，作爲參數傳進內部執行，這樣就完成了文件的打包： 
此時我們在瀏覽器中打開 index.html 文件，頁面將會顯示 "你好，俠課島！"，這同時也能證明 index.js 文件成功打包到了 bundle.js 文件中，因爲我們只在 index.html 文件中引入了 bundle.js 文件。
打包多個文件
當然我們在項目中肯定不只有一個 .js 文件，那麼如果我們除了 index.js 文件還有其他的 .js 文件，要如何做呢。
示例：
例如項目中還有一個 module.js 文件，內容如下所示：
module.exports = '俠課島歡迎你！'
這樣我們可以修改入口文件 index.js，將創建好的 module.js 模塊引入到入口文件中：
document.write('你好，俠課島！')
document.write(require('./module.js')) // 引入模塊
再次執行 webpack index.js -o bundle.js ，會重新打包文件。
在頁面啓動時，會先執行 index.js 文件中的代碼，其它文件中的代碼會在執行到 require 語句的時候再執行。 此時刷新瀏覽器，我們可以看到瀏覽器中的顯示內容發現了改變，顯示內容變爲 "你好，俠課島！俠課島歡迎你！"。
webpack 會分析入口文件，解析包含依賴關係的各個文件，這些文件都打包到 bundle.js 中。webpack 會給每個模塊分配一個唯一的 id 並通過這個 id 索引和訪問模塊。
總結
在舊版本的 webpack 中，我們是使用 webpack index.js bundle.js 命令來執行打包操作，而新的 webpack4.0+ 版本打包文件時要在命令中加一個 -o ，否則會報錯。