youngwind/fake-webpack youngwind/fake-webpack

  • Stars
    star
    109
  • Rank 319,077 (Top 7 %)
  • Language
    JavaScript
  • Created almost 8 years ago
  • Updated over 7 years ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
youngwind/fake-webpack
github

youngwind

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

模仿webpack写一个打包工具

简介

通过学习 webpack 的源码,模仿如何写一个简单版的 webpack。相关的源码分析文章请参考我的博客。 如何启动及调试本项目,见最下面。

实现功能

  • 将所有模块打包到一个 JS 文件 (例子 example/simple)
  • 代码切割,也就是 code-splitting (例子 example/code-splitting)
  • loader机制(例子 example/loader, 内置了less-loader和style-loader,可以加载less文件)
  • 待定

最简单的例子

// example.js

let a = require('a');
let b = require('b');
let c = require('c');
a();
b();
c();
// 输出 output.js

/******/(function(modules) {
/******/	var installedModules = {};
/******/	function require(moduleId) {
/******/		if(installedModules[moduleId])
/******/			return installedModules[moduleId].exports;
/******/		var module = installedModules[moduleId] = {
/******/			exports: {}
/******/		};
/******/		modules[moduleId](module, module.exports, require);
/******/		return module.exports;
/******/	}
/******/	return require(0);
/******/})
/******/({
/******/0: function(module, exports, require) {

let a = require(/* a */1);
let b = require(/* b */2);
let c = require(/* c */3);
a();
b();
c();


/******/},
/******/
/******/1: function(module, exports, require) {

// module a

module.exports = function () {
    console.log('a')
};

/******/},
/******/
/******/2: function(module, exports, require) {

// module b

module.exports = function () {
    console.log('b')
};

/******/},
/******/
/******/3: function(module, exports, require) {

module.exports = function () {
    console.log('c')
}

/******/},
/******/
/******/})

code-splitting

// example.js

var a = require("a");
var b = require("b");
a();
require.ensure(["c"], function(require) {
    require("b")();
    var d = require("d");
    var c = require('c');
    c();
    d();
});

require.ensure(['e'], function (require) {
   require('f')();
});
// output.js

/******/(function(document, undefined) {
/******/	return function(modules) {
/******/		var installedModules = {}, installedChunks = {0:1};
/******/		function require(moduleId) {
/******/			if(typeof moduleId !== "number") throw new Error("Cannot find module '"+moduleId+"'");
/******/			if(installedModules[moduleId])
/******/				return installedModules[moduleId].exports;
/******/			var module = installedModules[moduleId] = {
/******/				exports: {}
/******/			};
/******/			modules[moduleId](module, module.exports, require);
/******/			return module.exports;
/******/		}
/******/		require.ensure = function(chunkId, callback) {
/******/			if(installedChunks[chunkId] === 1) return callback(require);
/******/			if(installedChunks[chunkId] !== undefined)
/******/				installedChunks[chunkId].push(callback);
/******/			else {
/******/				installedChunks[chunkId] = [callback];
/******/				var head = document.getElementsByTagName('head')[0];
/******/				var script = document.createElement('script');
/******/				script.type = 'text/javascript';
/******/				script.src = chunkId+modules.a;
/******/				head.appendChild(script);
/******/			}
/******/		};
/******/		window[modules.b] = function(chunkId, moreModules) {
/******/			for(var moduleId in moreModules)
/******/				modules[moduleId] = moreModules[moduleId];
/******/			var callbacks = installedChunks[chunkId];
/******/			installedChunks[chunkId] = 1;
/******/			for(var i = 0; i < callbacks.length; i++)
/******/				callbacks[i](require);
/******/		};
/******/		return require(0);
/******/	};
/******/})(document)
/******/({a:".output.js",b:"webpackJsonp",
/******/0: function(module, exports, require) {

var a = require(/* a */1);
var b = require(/* b */2);
a();
require.ensure(1, function(require) {
    require(/* b */2)();
    var d = require(/* d */4);
    var c = require(/* c */3);
    c();
    d();
});

require.ensure(2, function (require) {
   require(/* f */6)();
});

/******/},
/******/
/******/1: function(module, exports, require) {

// module a

module.exports = function () {
    console.log('a')
};

/******/},
/******/
/******/2: function(module, exports, require) {

// module b

module.exports = function () {
    console.log('b');
}

/******/},
/******/
/******/})
// 1.output.js

/*****/webpackJsonp(1, {
/******/3: function(module, exports, require) {

// module c
console.log('执行模块c');
module.exports = function () {
    console.log('c');
}

/******/},
/******/
/******/4: function(module, exports, require) {

// module d

module.exports = function () {
    console.log('d');
};

/******/},
/******/
/******/})
// 2.output.js

/*****/webpackJsonp(2, {
/******/5: function(module, exports, require) {

// module e

console.log('执行e');
module.exports = function () {
    console.log('e');
}

/******/},
/******/
/******/6: function(module, exports, require) {

// module f

module.exports = function () {
    console.log('f');
}

/******/},
/******/
/******/})

loader 机制

// example.js

require('./style.less');
// style.less

@color: #000fff;

.content {
    width: 50px;
    height: 50px;
    background-color: @color;
}
// output.js
/******/(function(modules) {
/******/	var installedModules = {};
/******/	function require(moduleId) {
/******/		if(installedModules[moduleId])
/******/			return installedModules[moduleId].exports;
/******/		var module = installedModules[moduleId] = {
/******/			exports: {}
/******/		};
/******/		modules[moduleId](module, module.exports, require);
/******/		return module.exports;
/******/	}
/******/	return require(0);
/******/})
/******/({
/******/0: function(module, exports, require) {

require(/* ./style.less */1);


/******/},
/******/
/******/1: function(module, exports, require) {

require(/* /Users/youngwind/www/fake-webpack/node_modules/style-loader-fake/addStyle */2)(require(/* !/Users/youngwind/www/fake-webpack/node_modules/less-loader-fake/index.js!/Users/youngwind/www/fake-webpack/examples/loader/style.less */3))

/******/},
/******/
/******/2: function(module, exports, require) {

/**
 * @author  youngwind
 */

module.exports = function (cssCode) {
    let styleElement = document.createElement("style");
    styleElement.type = "text/css";
    if (styleElement.styleSheet) {
        styleElement.styleSheet.cssText = cssCode;
    } else {
        styleElement.appendChild(document.createTextNode(cssCode));
    }
    document.getElementsByTagName("head")[0].appendChild(styleElement);
};

/******/},
/******/
/******/3: function(module, exports, require) {

module.exports = ".content {\n  width: 50px;\n  height: 50px;\n  background-color: #000fff;\n}\n"

/******/},
/******/
/******/})

如何运行本项目

git clone https://github.com/youngwind/fake-webpack.git
cd fake-webpack
npm link // 将 fake-webpack 命令注册到全局

这时候你就可以在任意一个文件夹调用 fake-webpack 命令, 下面是运行 example 的步骤

  1. 分别 cd 进去 examples 的各个子文件夹。
  2. 执行 fake-webpack ./example.js,可以看到对应生成的 output.js 文件
  3. 用浏览器打开 index.html, 便可以观察到 output.js 的运行结果。

如果需要调试的话,请自行搜索" WebStorm 调试命令行"。

More Repositories

1

blog

梁少峰的个人博客
4,659
star
2

bue

模仿vue写一个MVVM框架
JavaScript
113
star
3

vue-ssr-demo

简单的 Vue2.0 + Vuex 服务端渲染 Demo
JavaScript
37
star
4

fake-preact

模仿 preact 的源码，写一个类似 react 的框架
JavaScript
21
star
5

android-demo

学习android的demo
Java
21
star
6

fake-requirejs

模仿requirejs写一个模块加载器
JavaScript
20
star
7

fake-node

内嵌 V8 引擎到 C++ 应用中
C++
19
star
8

service-worker-demo

利用 service-worker 和 cacheStorage 做一个离线应用 Demo
JavaScript
17
star
9

vue-ui

基于VUE的移动端web UI组件库
JavaScript
16
star
10

mini-react-router

自己手动实现一个简单的 react-router
JavaScript
8
star
11

GithubStarManager

github star管理工具
JavaScript
4
star
12

notebook

笔记
JavaScript
4
star
13

CoolNews

安卓新闻客户端
Java
3
star
14

share

平常做分享的一些PPT
CSS
2
star
15

MDP-FE

移动开发平台前端：mobile development platform frontend
JavaScript
2
star
16

MDP-BE

移动开发平台后端：mobile development platform backend
JavaScript
2
star
17

todo-backend

react todolist的后端项目
JavaScript
2
star
18

go-study

学习 go 的一些练习
Go
1
star
19

generator-smart

基于yeoman的前端脚手架生成器
JavaScript
1
star
20

style-loader-fake

仿造 webpack 的 style-loader
JavaScript
1
star
21

less-loader-fake

仿造 webpack 的 less-loader
JavaScript
1
star
22

lazy-smart

基于inquirer和shell的脚手架
JavaScript
1
star
23

algorithm

一些算法的学习
JavaScript
1
star
24

array-to-hash-object

将数组转换成对象（可自定义hash key）
JavaScript
1
star