2024年Web前端最全手写webpack原理，web开发基础学习

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

合集

webpack手写打包

1.进入目录先安装 package.json : npm install

2.node ./webpack.js 执行

3.打包后 得到一个文件 dist/bundle.js

目录：

|-- babel_webpack

|-- index.html

|-- package.json

|-- webpack.js

|-- src

|-- add.js

|-- index.js

index.html

webpack.js

const fs = require(‘fs’);

const path = require(‘path’);

// ast

const parser = require(‘@babel/parser’);

// 节点遍历

const traverse = require(‘@babel/traverse’).default;

// es6 - 5

const babel = require(‘@babel/core’);

// 分析依赖

function getModuleInfo(file) {

const body = fs.readFileSync(file, ‘utf-8’);

const ast = parser.parse(body, { sourceType: ‘module’ });

// 依赖收集 import xxx

const deps = {};

traverse(ast, {

ImportDeclaration({ node }) {

const dirname = path.dirname(file);

const abspath = ‘./’ + path.join(dirname, node.source.value);

deps[node.source.value] = abspath;

}

})

const { code } = babel.transformFromAst(ast, null, {

presets: [‘@babel/preset-env’]

});

const info = {

file, deps, code

}

return info;

}

const info = getModuleInfo(‘./src/index.js’);

console.log(‘info’, info);

/* 解析模块 */

function parseModules(file) {

const entry = getModuleInfo(file);

const temp = [entry];

const depsGraph = {};

getDeps(temp, entry);

temp.forEach(info => {

depsGraph[info.file] = {

deps: info.deps,

code: info.code

}

})

return depsGraph

}

/* 获取依赖 */

function getDeps(temp, { deps }) {

Object.keys(deps).forEach(key => {

const child = getModuleInfo(deps[key]);

temp.push(child);

console.log(‘temp’, temp);

getDeps(temp, child);

})

};

// const moduls = parseModules(‘./src/index.js’);

// console.log(‘parseModules’, moduls);

function bundle(file) {

const depsGraph = JSON.stringify(parseModules(file));

console.log(depsGraph);

const tpl = `(function (graph) {

function require(file) {

function absRequire(relPath) {

return require(graph[file].deps[relPath])

}

var exports = {};

(function (require, exports, code) {

eval(code)

})(absRequire, exports, graph[file].code)

return exports;

}

require(‘${file}’)

})(${depsGraph})`;

return tpl

}

const content = bundle(‘./src/index.js’);

!fs.existsSync(‘./dist’) && fs.mkdirSync(‘./dist’);

fs.writeFileSync(‘./dist/bundle.js’, content);

src/add.js

export default (a, b) => a + b

src/index.js

import add from ‘./add.js’;

console.log(‘酱紫’, add(2, 3));

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】