webpack4.xCommonJS模块化的示例分析
这篇文章主要为大家展示了“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());;
// webpack-test/index.htmlWebpack Test Project