webpack构建过程

webpack意义：

开发时期代码可读性高，容易被攻击

一些功能不支持，兼容性问题

运行时期代码文件大代码几乎没有可读性

减少http请求，将多个js文件打包到一个文件进行请求

兼容性：浏览器只支持es6模块化，不能使用commonjs规范，即require（同步阻塞）

整个构建过程是一个串行流程，具体步骤如下：

第一步：参数初始化

从 webpack.config.js 文件或者 Shell 命令行参数中读取必要的配置信息，对构建所需的各项参数进行初始化。这些参数将为后续的编译和打包过程提供基础配置。

第二步：编译准备与启动

利用上一步获取的参数来初始化 compiler 对象，该对象是 Webpack 构建过程的核心，负责协调各个插件和步骤。接着，对所有配置的 Webpack 插件进行实例化操作，并将这些插件的钩子函数挂载到 Webpack 的事件流上。这些插件在构建过程中能够对中间结果进行修改和处理，以满足不同的构建需求。最后，调用 compiler 对象的 run 方法，正式启动编译过程。

第三步：入口解析与依赖收集

从配置文件中读取 entry 入口信息，该信息指定了 Webpack 开始构建的起点。Webpack 会根据入口文件，递归地查找所有相关的依赖文件，并构建出完整的依赖关系图。

第四步：模块编译

在依赖收集的过程中，Webpack 会对所有依赖文件进行编译处理。此过程依赖于 loaders，不同类型的文件会根据开发者在配置文件中定义的 loaders 进行解析。例如，对于 .js 文件可能会使用 Babel 进行转译，对于 .css 文件可能会使用 style-loader 和 css-loader 进行处理。最终，每个文件会被解析生成抽象语法树（AST），方便后续进一步处理。依赖文件的查找过程通过递归算法实现，确保能够找到所有嵌套的依赖。

第五步：模块转换与依赖分析

经过 loaders 的处理后，每个模块会被翻译成最终的代码内容，同时 Webpack 会分析并输出模块之间的依赖关系。这一步的主要输出是每个模块的最终代码以及它们之间的依赖信息，为后续的资源打包提供依据。

第六步：资源组装与输出准备

根据入口文件和模块之间的依赖关系，Webpack 会将相关的模块组装成一个个 chunk。每个 chunk 是一组相关模块的集合，Webpack 会将每个 chunk 转换为一个单独的文件，并将这些文件加入到输出列表中。在这一步，开发者还有最后一次机会对输出内容进行修改，例如添加一些自定义的头部信息或进行代码压缩等操作。

第七步：文件写入与最终输出

根据配置文件中指定的输出路径和文件名，Webpack 将每个文件的内容写入到文件系统中。最终的输出结果通常是一个立即执行函数（IIFE），该函数接收一个名为 modules 的对象作为参数。这个对象的 key 值是模块的依赖路径，value 值是经过打包处理后的脚本代码。

模块化历程：commons.js AMD(可异步非阻塞，声明模块时指定所有依赖，做形参，依赖先执行) CMD（依赖就近，延迟执行）ES6（编译时确认依赖关系，可输入输出变量）

webpack.config.js

module.exports = {
    entry: "./modules/main.js",
    output: {
        filename: "./js/bundle.js"
    },
    module: {
        loaders: [
            {test: /\.js$/, loader: ""}
        ]
    },
    plugins: {},
    resolve: {},
    watch: true
}

• module.exports：导出 Webpack 的配置对象。
• entry：指定项目打包的入口文件，这里是 ./modules/main.js，Webpack 从该文件开始递归查找依赖。
• output：定义打包输出的相关设置。filename指定了打包后输出文件的名称为bundle.js，路径是./js/目录。
• module.loaders：用于配置模块加载器，这里test属性通过正则表达式/\.js$/匹配所有.js文件，但loader为空，没有指定具体加载器，实际应用中需配置如 Babel - loader 来处理 JavaScript 文件。
• plugins：用于配置 Webpack 插件，当前是空对象，可添加如HtmlWebpackPlugin等插件，实现如自动生成 HTML 文件等功能。
• resolve：用于配置模块解析相关规则，当前为空对象，可配置别名、拓展名等，方便模块引入。
• watch：设置为true，表示开启文件监听模式，文件发生变化时 Webpack 会自动重新打包 。