简易版webpack的实现步骤

目录

• 简易版webpack的实现步骤
  • 1、npm的bin
  • 2、文件的读写
  • 3、webpack是如何做的
  • 4、模块遍历（图结构）
  • 5、模块脚本拼接
  • 6、loader转换

简易版webpack的实现步骤

1、npm的bin

* npm init -y
* package.json添加配置
########
{
  "bin": {
    "llpack": "bin/index.js"
  }
}
########
  入口文件头部添加
########
#!/usr/bin/env node
########
* npm link

2、文件的读写

const path = require("path")
const fs = require("fs")

const entry = path.resolve('./src/main.js')
const output = path.resolve('./dist/index.js')
const scriptStr = fs.readFileSync(entry, "utf-8")
fs.writeFileSync(output, scriptStr)

3、webpack是如何做的

* npm i webpack webpack-cli -D
* package.json
########
{
  "scripts": {
    "build": "webpack --config webpack.config.js"
  }
}
########
* webpack.config.js
########
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index.js'
  },
  mode: "development"
};
########

(() => {
  var modules = {
    "./src/main.js":
      ((module) => {
        eval("const {recursionFunc} = require(\"./src/utils.js\")\r\n\r\nconsole.log(recursionFunc)\r\n\n\n");
      }),
    "./src/utils.js":
      ((module) => {
        eval("module.exports = {\r\n  recursionFunc: \"递归函数\"\r\n}\r\n\n\n");
      })
  };
  var modulesCache = {};

  function require(path) {
    if (modulesCache[path]) {
      return modulesCache[path].exports;
    }
    modulesCache[path] = {
      exports: {}
    };
    modules[path](modulesCache[path]);
    return modulesCache[path].exports;
  }

  require("./src/main.js");
})();

4、模块遍历（图结构）

const path = require("path")
const fs = require("fs")
const modules = {}

function recursionFun(filePath) {
  modules[filePath] = fs.readFileSync(filePath, 'utf-8')
    .replace(/require\(["'](.*)['"]\)/g, (str, $1) => {
      const joinPath = path.join(filePath, '..', $1)
      if (!modules[joinPath]) {
        recursionFun(joinPath)
      }
      return `require(${JSON.stringify(joinPath)})`
    })
}

recursionFun(path.join('./src/main.js'))

5、模块脚本拼接

const path = require("path")
const fs = require("fs")
const entry = path.join('./src/main.js')
const output = path.join('./dist/index.js')
const modules = {}

function recursionFun(filePath) {
  modules[filePath] = fs.readFileSync(filePath, 'utf-8')
    .replace(/require\(["'](.*)['"]\)/g, (str, $1) => {
      const joinPath = path.join(filePath, '..', $1)
      if (!modules[joinPath]) {
        recursionFun(joinPath)
      }
      return `require(${JSON.stringify(joinPath)})`
    })
}

recursionFun(entry)
const modulesStr = Object.keys(modules).map(moduleId => {
  return `
${JSON.stringify(moduleId)}:
  ((module) => {
    eval(${JSON.stringify(modules[moduleId])})
  })
`
}).join()
const scriptStr = `
(() => {
  var modules = {
    ${modulesStr}
  };
  var modulesCache = {};

  function require(path) {
    if (modulesCache[path]) {
      return modulesCache[path].exports;
    }
    modulesCache[path] = {
      exports: {}
    };
    modules[path](modulesCache[path]);
    return modulesCache[path].exports;
  }

  require(${JSON.stringify(entry)});
})();
`

fs.writeFileSync(output, scriptStr)

6、loader转换

const path = require("path")
const fs = require("fs")
const modules = {}

function cssLoader(source) {
  return `
const styleEl = document.createElement('style')
styleEl.innerText = ${JSON.stringify(source)}
document.head.appendChild(styleEl)
`
}

function recursionFun(filePath) {
  let scriptStr = fs.readFileSync(filePath, 'utf-8')
    .replace(/require\(["'](.*)['"]\)/g, (str, $1) => {
      const joinPath = path.join(filePath, '..', $1)
      if (!modules[joinPath]) {
        recursionFun(joinPath)
      }
      return `require(${JSON.stringify(joinPath)})`
    })

  if (/\.css$/.test(filePath)) {
    scriptStr = cssLoader(scriptStr)
  }

  modules[filePath] = scriptStr
}

recursionFun(path.join('./src/main.js'))