探究 webpack 如何实现模块化加载

探究 webpack 如何实现模块化加载

最近稍稍比较忙，但还是要腾出时间来写写博客，博客真的是个好东西，只要你坚持。这次主要讲讲 webpack 打包后的代码，分析他是如何实现模块化（同步）加载模块的，然后下次再讲讲如何按需（异步）加载模块。

一、webpack 模块化

关于模块化，可以看看我之前的总结博客 js模块化进程

总结一下，就是按照功能将一个项目切分成许多部分单独开发,然后再组装起来,每一个部分即为模块。

但是不管使用 require 还是 ES6 的 import ，最终都是经过 webpack 编译，模拟该行为，最后得到可执行代码。

二、webpack 同步加载源码

（1）源码

我们直接用一个例子展示，使用打包配置

module.exports = {
   
  	mode: "development",
  	devtool: "source-map",
	...
}

主文件：

import func from './func.js'
func.add(1,2)

引用文件：

class func{
   
    add(val1,val2){
   
        return val1 + val2