先看下webpack官方文檔中對模塊的描述：

在模塊化編程中，開發者將程序分解成離散功能塊(discrete chunks of functionality)，并稱之為模塊。

每個模塊具有比完整程序更小的接觸面，使得校驗、調試、測試輕而易舉。 精心編寫的模塊提供了可靠的抽象和封裝界限，使得應用程序中每個模塊都具有條理清楚的設計和明確的目的。

webpack 的核心概念之一就是一切皆模塊，webpack 在項目中的作用就是，分析項目的結構，找到 JavaScript 模塊以及其他一些瀏覽器不能直接運行的拓展語言（less，scss，typescript），并將其打包為合適的格式以供瀏覽器使用，它從一個項目的主文件開始，根據引用路徑，找到所有其所依賴的文件，同時將這些文件進行處理（各種loader來解析，編譯處理瀏覽器不能直接使用的文件），然后打包為一個或者多個瀏覽器可識別的JavaScript文件。

本文不會詳細描述 webpack 的構建流程，畢竟官網已經說得比較詳細了，這里主要是分析下 webpack 打包后的文件，將文件打包成什么樣子，又是如何使用模塊的。webpack 最早支持的代碼模塊化方式是 CommonJS，后面慢慢支持了 ES6、AMD 等，不論使用的是哪種方式，webpack 都可以對其進行解析和打包，本文例子中使用的是 CommonJS 規范，更多規范介紹可查看官方文檔。

例子

為方便后面的說明，首先創建一個項目，也就是先建立一個文件夾 webpack-test（名字自擬），然后在里面新建一個 package.json 文件，用來做 npm 的說明，在 webpack-test 文件夾中使用命令：

npm init

執行命令后會詢問一些問題，一路回車即可。然后安裝下 webpack 的依賴包，如下命令：

npm install --save-dev webpack

再新建幾個文件：

1、在項目根目錄下新建文件夾 app 用來存放業務代碼、文件夾 public 存放打包后的文件；
2、在app中新建入口文件 main.js;
3、在app中新建功能模塊 hello.js，bye.js，to.js；
4、在項目根目錄下，建立 index.html 文件；

然后依次來給這幾個文件分別填寫以下內容：

// webpack-test/app/hello.jsconst to = require('./to.js');module.exports = function() { var hello = document.createElement('div'); hello.textContent = "Say Hello to " + to.name; return hello;};

// webpack-test/app/bye.jsconst to = require('./to.js');module.exports = function() { var bye = document.createElement('div'); bye.textContent = "Say Bye to " + to.name; return bye;};

// webpack-test/app/to.jsmodule.exports = {name: "小明"};

// webpack-test/app/main.jsconst hello = require('./hello.js');const bye = require('./bye.js');document.querySelector("#root").appendChild(hello()).appendChild(bye());;