Webpack 简版手写

本文将以​  Webpack 5为例，通过简单实现，整体介绍一下Wwebpack 构建过程与实现细节。

1. 项目结构

 simple-webpack
   ├── dist
   ├── src
   │   ├── index.js
   │   ├── module1.js
   │   └── module2.js
   ├── loaders
   │   ├── babelLoader.js
   │   └── exampleLoader.js
   ├── plugins
   │   └── examplePlugin.js
   ├── webpack.config.js
   └── index.js

2. 设置项目和安装依赖

在项目根目录下运行以下命令初始化项目并安装依赖：

npm init -y

npm install @babel/core @babel/preset-env @babel/traverse babylon

3. 实现核心模块

3.1. 创建createAsset函数

在 index.js 文件中实现 createAsset 函数，用于读取和解析模块，并根据 loader 进行处理：

const fs = require('fs');
const path = require('path');
const babylon = require('babylon');
const traverse = require('@babel/traverse').default;

let ID = 0;

function applyLoaders(source, filename, loaders) {
  for (let i = loaders.length - 1; i >= 0; i--) {
    const loader = loaders[i];
    if (loader.test.test(filename)) {
      const loaderFn = require(loader.use);
      source = loaderFn(source);
    }
  }
  return source;
}

function createAsset(filename, loaders) {
  let content = fs.readFileSync(filename, 'utf-8');
  content = applyLoaders(content, filename, loaders);
  const ast = babylon.parse(content, { sourceType: 'module' });
  const dependencies = [];
  traverse(ast, {
    ImportDeclaration: ({ node }) => {
      dependencies.push(node.source.value);
    },
  });
  const id = ID++;
  return {
    id,
    filenam