甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
这篇文章主要为大家展示了“webpack4.x CommonJS模块化的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“webpack4.x CommonJS模块化的示例分析”这篇文章吧。
10年积累的成都网站制作、成都网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计制作后付款的网站建设流程，更有城东免费网站建设让你可以放心的选择与我们合作。
先看下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());;