网站：canIuse
常用loader--补loader的原理
style-loader css-loader less-loader （sass-loader stylus-loader）postcss-loader （autoprefixer插件 、package.json里 browserslist、cssnano）
plugins
mini-css-extrace-plugins
原理解析
1、解析入口文件
读取入口文件内容，转AST语法树，获取import 节点获取依赖文件
将AST语法树 转成code
递归或者循环依赖文件内容的依赖
形成依赖图谱
2、处理require 以及 exports 方法
简单例子：
const fs = require("fs");
const path = require("path");
const parse = require("@babel/parser");
const { transformFromAst } = require('@babel/core');
const traverse = require("@babel/traverse").default;
module.exports = class webpack {
constructor(option) {
console.log(option);
const { entry, output } = option;
this.entry = entry;
this.output = output;
this.modules = [];
}
run() {
const info = this.parse(this.entry);
this.modules.push(info);
for (let i = 0; i < this.modules.length; i++) {
const item = this.modules[i];
const { yilai } = item;
if (yilai)
for (let j in yilai) {
this.modules.push(this.parse(yilai[j]))
}
}
// 数据接口转换
const obj = {};
this.modules.forEach(item => {
obj[item.entryFile] = {
yilai: item.yilai,
code: item.code
}
})
console.log(obj)
this.file(obj)
}
parse(entryFile) {
const content = fs.readFileSync(entryFile, "utf-8");
const ast = parse.parse(content, { sourceType: 'module' })
const dirname = path.dirname(entryFile);
// 分析依赖 以及依赖的路径
const yilai = {};
traverse(ast, {
ImportDeclaration({ node }) {
const newPath = './' + path.join(dirname, node.source.value);
yilai[node.source.value] = newPath;
}
})
const { code } = transformFromAst(ast, null, {
presets: ['@babel/preset-env']
})
return {
entryFile,
yilai,
code
}
}
file(code) {
// 生成文件，放入dist目录
const filePath = path.join(this.output.path, this.output.filename)
//生成bundle文件内容
//webpackBootstrap
const newcode = JSON.stringify(code);
const bundle = `(function(modules){
function require(module) {
function pathRequire(relativePath) {
//相对入口文件路径-》相对项目路径
console.log(require)
return require(modules[module].yilai[relativePath])
}
const exports = {};
(function(require,exports,code){
eval(code)
})(pathRequire,exports,modules[module].code)
return exports;
}
require('${this.entry}')
})(${newcode})`
fs.mkdir(this.output.path, () => {
})
fs.writeFileSync(filePath, bundle, 'utf-8')
console.log(filePath)
}
}
