這篇文章主要為大家展示了“webpack4.x CommonJS模塊化的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“webpack4.x CommonJS模塊化的示例分析”這篇文章吧。
10年積累的成都網(wǎng)站制作、成都網(wǎng)站設(shè)計經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先網(wǎng)站設(shè)計制作后付款的網(wǎng)站建設(shè)流程，更有城東免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
先看下webpack官方文檔中對模塊的描述：
在模塊化編程中，開發(fā)者將程序分解成離散功能塊(discrete chunks of functionality)，并稱之為模塊。
每個模塊具有比完整程序更小的接觸面，使得校驗、調(diào)試、測試輕而易舉。 精心編寫的模塊提供了可靠的抽象和封裝界限，使得應(yīng)用程序中每個模塊都具有條理清楚的設(shè)計和明確的目的。
webpack 的核心概念之一就是一切皆模塊，webpack 在項目中的作用就是，分析項目的結(jié)構(gòu)，找到 JavaScript 模塊以及其他一些瀏覽器不能直接運行的拓展語言（less，scss，typescript），并將其打包為合適的格式以供瀏覽器使用，它從一個項目的主文件開始，根據(jù)引用路徑，找到所有其所依賴的文件，同時將這些文件進行處理（各種loader來解析，編譯處理瀏覽器不能直接使用的文件），然后打包為一個或者多個瀏覽器可識別的JavaScript文件。
本文不會詳細描述 webpack 的構(gòu)建流程，畢竟官網(wǎng)已經(jīng)說得比較詳細了，這里主要是分析下 webpack 打包后的文件，將文件打包成什么樣子，又是如何使用模塊的。webpack 最早支持的代碼模塊化方式是 CommonJS，后面慢慢支持了 ES6、AMD 等，不論使用的是哪種方式，webpack 都可以對其進行解析和打包，本文例子中使用的是 CommonJS 規(guī)范，更多規(guī)范介紹可查看官方文檔。
例子
為方便后面的說明，首先創(chuàng)建一個項目，也就是先建立一個文件夾 webpack-test（名字自擬），然后在里面新建一個 package.json 文件，用來做 npm 的說明，在 webpack-test 文件夾中使用命令：
npm init
執(zhí)行命令后會詢問一些問題，一路回車即可。然后安裝下 webpack 的依賴包，如下命令：
npm install --save-dev webpack
再新建幾個文件：
1、在項目根目錄下新建文件夾 app 用來存放業(yè)務(wù)代碼、文件夾 public 存放打包后的文件；
2、在app中新建入口文件 main.js;
3、在app中新建功能模塊 hello.js，bye.js，to.js；
4、在項目根目錄下，建立 index.html 文件；
然后依次來給這幾個文件分別填寫以下內(nèi)容：
重慶分公司
重慶分公司
// 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());;