先看下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.js const 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.js const 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.js module.exports = {name: "小明"};
// webpack-test/app/main.js const hello = require('./hello.js'); const bye = require('./bye.js'); document.querySelector("#root").appendChild(hello()).appendChild(bye());;
// webpack-test/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Webpack Test Project</title> </head> <body> <div></div> // bundle.js 文件就是一会儿我们要打包app中的文件后生成的结果文件 <script src="https://www.jb51.net/public/bundle.js"></script> </body> </html>
业务模块 hello.js 和 bye.js 做了各自的操作，同时引用了共同的文件 to.js；主文件 main.js 中引用并执行了模块 hello.js 和 bye.js；index.html 文件引入了 main.js 打包后的最终文件 bundle.js。
打包
接下来进行打包操作，先确保 webpack 是全局安装的，否则执行时需要指定 webpack 的路径，比如在 4.0 以下版本中使用 node_modules/.bin/webpack ./app/main.js ./public/bundle.js；
如果你使用的是 webpack4.0+ 的话，使用 webpack ./app/main.js ./public/bundle.js命令，也许会报以下的错误：
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
ERROR in multi ./app/main.js ./public/bundle.js
Module not found: Error: Can't resolve './public/bundle.js' in '/Users/zhaohaipeng/soyoung-project/webpack-test'
@ multi ./app/main.js ./public/bundle.js main[1]
webpack4.0+之后，针对第一个报错，需要指定环境 --mode development；第二个报错，是因为我们没有使用配置文件的方式打包，而是直接使用的命令指定的打包输出位置，所以需要声明输出文件，综上，正确的命令如下：
webpack app/main.js --output public/bundle.js --mode development
执行结果：