解析webpack 打包后文件分析

webpack 用于编译 javascript 模块， 可以把文件格式编译成我们想要的静态文件格式， 但是处理的过程并不是全部由 webpack 本身完成， webpack 只是提供了一个打包机制， 对于各类文件的打包处理需要使用相对应的 预处理模块 loader 来处理， 作为一种机制 webpack 会帮助各种 loader 提供识别入口目录、入口文件、 输出目录， 输出文件。

首先我们试着打包一个只包含 console.log('hello world') 的 js 文件。

初始化文件和安装 webpack 环境

#  新建 demo 目录
mkdir webpack-demo cd webpack-demo

# 初始化目录
npm init -y

# 本地安装 webpack 工具
npm install webpack webpacl-cli  --save-dev

# webpack 默认的入口文件是 .src/index.js   创建 src 目录和 index.js 文件
mkdir src

echo “console.log('hello world')” > src/index.js

# 执行 webpack 命令  需要查看打包后文件， 这里使用 development 模式 
npx webpack --mode development

简化打包后文件

由于打包后的文件比较繁琐， 这里我们简化一下打包后的文件

(function(modules) {
    var installedModules = {}
    function __webpack_require__(moduleIid) {

    }
    return __webpack_require__(__webpack_require__.s = "./src/index.js")
})({
    "./src/index.js": (function(module, exports) {
                            eval("console.log('test webpack entry')");
                    })
})

打包后的文件含有大量的注释和 webpack 本身的变量， 为了方便分析可以把这些注释和 类似 __webpack_require__.s 的复制语句全部删掉

从上面的代码可以看到，

1. 经过 webpack 打包后的代码通过一个 IIFE