Webpack打包-打包详细流程

Webpack

        Webpack是一个现代化的静态模块打包器，支持JavaScript、CSS、图片等资源的打包。它将所有模块及其依赖项视为静态资源，并创建一个依赖关系图，将这些资源转换为有效的输出文件。通过Webpack，可以将多个文件打包成一个或多个文件，并在网页中加载使用。

        Webpack 支持各种开发场景和应用程序类型。在Webpack中，所有资源都被认为是模块，可通过引入其他模块而使用。Webpack提供了配置文件，允许开发人员自定义构建流程，以便灵活地满足各种场景的需求。Webpack 的功能非常强大，支持代码分割、异步加载、热替换等高级特性，使得它成为当今前端开发中不可缺少的工具之一。

         Webpack的配置文件通常称为 webpack.config.js，其中包含各种配置选项，例如入口（entry）、出口（output）、模块规则（module.rules）等。其中，入口指定了 Webpack 应该从哪个模块开始构建依赖图；出口指定了 Webpack 构建完成后输出的文件名和目录；模块规则指定了Webpack如何处理各种资源。

         以下是一个简单的 webpack.config.js 配置文件示例：

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"],
      },
    ],
  },
};

        这个示例中，指定入口为 "./src/index.js"，输出文件到 "./dist/bundle.js"，并配置了三个模块规则，分别用于处理 JavaScript、CSS和图片资源。当 Webpack 运行时，会根据这些配置进行打包。 

重要概念              

关键字	作用
Entry	Webpack 的入口文件 指的是应该从哪个模块作为入口，来构建内部依赖图
Output	告诉 Webpack 在哪输出它所创建的 bundle 文件 以及输出的 bundle 文件该如何命名、输出到哪个路径下等规则
Loader	模块代码转化器 使得 Webpack 有能力去处理除了 JS、JSON 以外的其他类型的文件
Plugin	Plugin 提供执行更广的任务的功能 包括：打包优化，资源管理，注入环境变量等
Mode	根据不同运行环境执行不同优化参数时的必要参数
Browser Compatibility	支持所有 ES5 标准的浏览器（IE8 以上）

Webpack生命周期：

     Webpack 在构建过程中会触发一系列的生命周期事件，开发者可以针对这些事件进行相应的处理或插件化。下面是Webpack的主要生命周期事件：

1. beforeRun：在 Webpack 开始执行构建任务前触发的事件。
2. run：Webpack 开始进行编译打包时触发的事件。
3. beforeCompile：在 Webpack 开始编译之前触发的事件。
4. compile：Webpack 开始编译时触发的事件。
5. compilation：在 Webpack 的每次编译构建过程中触发的事件。
6. emit：在 Webpack 输出资源到output目录之前触发的事件。
7. afterEmit：在 Webpack 输出资源到output目录之后触发的事件。
8. done：Webpack 构建完成所有的编译、和输出等任务之后触发的事件。
9. failed：Webpack 构建过程中出现错误时触发的事件。

        通过使用这些生命周期事件，我们可以开发各种插件，来完成自己所需的逻辑。比如，可以开发一个插件，自动压缩生成的 JS 文件；也可以开发一个插件，在构建结束后通过邮件的方式通知相关人员。

        下面是一个示例代码，展示了如何在Webpack打包过程中使用before-compile生命周期事件：

const webpack = require('webpack');

// 创建一个Webpack配置对象
const webpackConfig = {
  // ... 其他配置项
  plugins: [
    // ... 其他插件
  ]
};

// 创建一个Webpack编译器实例
const compiler = webpack(webpackConfig);

// 在before-compile生命周期事件中执行自定义操作
compiler.hooks.beforeCompile.tap('MyPlugin', () => {
  console.log('Webpack编译器开始编译...');
  
  // 在编译前做一些自定义操作
  // ...
});

// 启动Webpack编译器
compiler.run((err, stats) => {
  if (err) {
    console.error(err);
    return;
  }
  
  console.log('Webpack编译器编译完成！');
  console.log(stats.toString());
});
 

         在上述代码中，我们创建了一个Webpack编译器实例，然后在before-compile生命周期事件中添加了一个自定义操作，用来在Webpack编译器开始编译之前做一些预处理的工作。最后通过调用compiler.run()方法来启动Webpack编译器，并在完成编译后输出一些统计信息。

        需要注意的是，Webpack的生命周期事件都是异步的，因此在每个事件回调函数中需要使用callback或Promise等方式来通知Webpack继续执行下一步操作。此外，在使用Webpack生命周期事件时，还应该遵循一些规范和最佳实践，以确保代码的可读性和可维护性。

Webpack打包过程

1. 读取配置文件：Webpack会首先读取项目中的配置文件，例如webpack.config.js或者webpackfile.js等。

2. 解析入口文件：Webpack会从配置文件中获取入口文件路径，根据入口文件路径解析出入口文件及其依赖的模块。

3. 解析依赖模块：Webpack会逐个解析入口文件依赖的模块，以此类推，逐步构建出完整依赖树。

4. 加载模块：Webpack会根据解析出的模块路径逐个加载模块，支持多种文件格式的加载。

5. 分析模块依赖关系及模块交互：Webpack会分析每个模块之间的依赖关系，例如调用其它模块的函数或变量引用等，以此建立模块之间的交互关系图。

6. 打包模块：Webpack会将所有模块根据依赖树的关系，逐步打包成一个或多个JavaScript文件，支持多种打包方式。

7. 生成输出文件：Webpack会根据配置文件中指定的输出路径和文件名，生成最终的输出文件。

8. 优化打包结果：Webpack还提供了一些优化功能，例如压缩代码、合并模块等，可以进一步提升打包结果的性能和效率。

9. 构建完成：Webpack打包过程完成后，会输出一些统计信息以及警告或错误信息，方便开发者定位和解决问题。

        总体来说，Webpack打包过程非常复杂，但是它可以帮助开发者自动化处理各种依赖关系，快速构建出高质量的前端项目。Webpack的打包过程是高度可配置的，开发人员可以通过插件和配置文件来自定义各个阶段的行为。这使得Webpack可以满足不同项目的不同需求，从而成为了现代Web开发中不可或缺的工具之一。

Webpack的使用示例

它可以将多个JavaScript文件打包成一个或多个JavaScript模块，以及其他类型的文件（如CSS、图片等），并通过将这些文件转换为可执行的静态资源来优化加载性能。以下是Webpack的详细打包流程及代码示例：

        1、安装Webpack和相关的依赖

npm install webpack webpack-cli -D

        Webpack还可以与其他插件一起使用，例如babel-loader、css-loader、style-loader等。

        2、创建Webpack配置文件

        创建一个名为webpack.config.js的文件，用于配置Webpack的入口、输出、加载器、插件等。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      }
    ]
  }
};

        上述代码中，entry表示Webpack入口文件，output表示输出文件的路径和名称，mode表示开发模式，module表示Webpack的加载器（例如babel-loader和css-loader）和插件（例如file-loader）。

        3、编写JavaScript、CSS和图片文件

        在src文件夹中编写JavaScript、CSS和图片文件。

// index.js
import _ from 'lodash';
import './style.css';
import Icon from './icon.png';

function component() {
  const element = document.createElement('div');
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');
  const myIcon = new Image();
  myIcon.src = Icon;
  element.appendChild(myIcon);
  return element;
}

document.body.appendChild(component());

/* style.css */
.hello {
  color: #0077ff;
}

         4、执行Webpack打包命令

        在终端中执行以下命令，将src文件夹中的JavaScript、CSS和图片文件打包成bundle.js文件，并输出到dist文件夹中。

npx webpack

        Webpack将自动读取webpack.config.js文件进行打包，并输出打包信息。打包完成后，即可在dist文件夹中找到bundle.js文件。

        上述代码示例中给出了Webpack的简单使用方法，Webpack还有更多功能和配置选项，可以根据具体需求进行更详细的配置和使用。