[学习webpack]
最近复习了一遍webpack，整理一下学习的笔记，按以下几个模块分析学习webpack;
- 基础
- 前端开发工程环境搭建
- 打包bundle原理分析与实现
基础
安装方式，推荐使用npm init -y初始化配置文件，不推荐全局安装，因为全局安装会将项目中的webpack锁定到指定版本，会造成不同项目中因为依赖版本问题，导致冲突；
使用npx 方式构建，ta会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装，原理就是通过shell脚本在node_modules/.bin的目录下创建了一个软连接。
基础部分就是针对配置文件中常见的api字段解释，例如entry 、output都是字面意思，就不过多赘述了。
const path = require("path");
module.exports = {
// 必填 webpack执行构建入口
entry: "./src/index.js",
output: {
filename: "main.js", //将所有依赖的模块合并输出到main.js
path: path.resolve(__dirname, "./dist") // 输出文件的存放路径，必须是绝对路径
} };
翻看笔记的时候，注意到对loader的处理这块儿加粗强调了一下，平时每个项目的loader基本都是复制粘贴，只知其一，不知其二，原来在loader的配置，loader的顺序，也是有讲究的，比如 "use: ["style-loader", "css-loader","less-loader"]"，就从后像前css-loader接收less-loader处理less语法转换成css返回给css-loader，css-loader再把返回值给style-loader，做行内样式；
还有fie-loader中有的功能，url-loader中都有， url-loader中可以把图片转成base64, limit字段来决定是否需要转换；
给文件配置hash / changehash / contenthash 的区别是什么？ 答： hash作用于整个项目，chunkhash 作用于chunk，contenthash 作用于内容；
扩展：如何自己编写一个Loader?
Loader就是一个函数，声明式函数，不能用箭头函数，拿到源代码，作进一步的修饰处理，再返回处理后的源码。
//创建一个简单替换文本的loader文件 replace-loader.js
module.exports = function (source) {
return source.replace("hello", "您好");
};
//在webpack.config.js中引入
...,
resolveLoader: {
modules: ["./node_modules", "./myLoaders"],
},
module:{
rules:[
{
rules: [
{
test: /\.js$/,
use: [
{
loader: path.resolve(__dirname, './loader/replaceLoader.js'),
options: {
name: '开课吧',
},
},
],
},
],
}
//在处理js文件的时候，就会将hello替换为您好
另外关于plugins，我也是一直一知半解，只记了几个常用的plugin:
HtmlWebpackPlugin : 会在打包结束后，自动生成一个html文件，并把打包生成的js模块引入到该html 中，接收一个对象参数，可以设置title，filename等；
clean-webpack-plugin：我们都知道是情况dist目录下文件，那么如何做到某个文件或目录不被清空呢？答：使用配置项:cleanOnceBeforeBuildPatterns 案例:cleanOnceBeforeBuildPatterns: ["/", "!dll", "!dll/"], !感 叹号相当于exclude 排除，意思是清空操作排除dll目录，和dll目录下所有文件。 注意:数组列表里的 “/”是默认值，不可忽略，否则不做清空操作。
如何实现一个plugin?
webpack在编译代码过程中生命周期概念对应不同的打包阶段，plugin本质上是一个类，结尾处代码。
webpack的打包流程
1.拿到配置，初始化工作 最终配置 2.实例化一个compiler类，注册插件，对应的生命周期绑定相应的时间 3.执行编译，compiler.run()
前端开发工程环境搭建
在这个板块里，我们已经了解了webpack项目的初始化工程搭建和简单的api，那么一个完整的项目都还有一些什么常见到的配置文件呢
.npmrc算一个，为项目设置镜像源，防止别人同事共建你的项目时，再去手动设置；//registry=https://registry.npm.taobao.org/
.bablelrc babel处理js的工具，值有env(负责处理原生js 比如let const 箭头函数) / react(支持jsx to js) 等 。
postcss.config.js 他主要功能只有两个:第一就是把css解析成JS可以操作的抽象语法树AST，第二就是调用插 件来处理AST并得到结果;所以postcss一般都是通过插件来处理css，并不会直接处理 比如:自动补⻬浏览器前缀: autoprefixer css压缩等 cssnano
webpack.config.js：
- sourceMap：源代码与打包后的代码的关系映射，devtool的值有none，还有source-map，配置后会打包出.map文件，还有’inline-source-map’， 是将映射的值直接写在关联的文件中
- webpack-dev-server：开发环境下提升开发效率的神器，热更新，自动打开浏览器，用硬件保存的方式，保存在内存中
- proxy：设置服务器代理，本地mock,解决跨域；
// npm i express -D
// 创建一个server.js 修改scripts "server":"node server.js"
//server.js
const express = require('express')
const app = express()
app.get('/api/info', (req, res) => {
res.json({
name: '开课吧',
age: 5,
msg: '欢迎来到开课吧学习前端高级课程',
})
})
app.listen('9092')
//node server.js
============
//npm i axios -D
//index.js
import axios from 'axios'
axios.get('http://localhost:9092/api/info').then(res=>{
console.log(res) })
//会有跨域问题，配置
proxy: {
"/api": {
target: "http://localhost:9092" }
}
//将index.js中get的路径参数修改为‘/api/info’；
打包bundle原理分析与实现
接收webpack配置之后，进行读取，从入口文件开始分析，哪些是依赖模块，以及依赖模块的位置，内容，对内容处理，处理成浏览器正确解析的内容，递归处理其他的依赖模块，生成chunk片段，依据出口配置，生成资源文件的名称和位置；
实现模块依赖分析函数，核心功能，根据入口模块开始分析依赖路径，对内容进行处理，支持es6+ To es5的语法转换，返回模块 路径，依赖，和相应处理。
创建一个文件夹 webpack-simple
npm init -y
touch bundle.js
mkdir dist 和 lib src目录
在src下创建a.js b.js index.js 并且模块间有依赖关系（暂时不考虑互相依赖的情况）
//index.js
import {a} from "./a.js";
console.log(`hello ${a} webpack bundle!!`)
//a.js
import {b} from './b.js'
export const a = `kkb ${b}`
//b.js
export const b = '!!!'
在lib目录下创建webpack.js文件，dist目录下创建main.js作为导出文件，首先我们先配置webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "main.js",
},
mode: "development",
};
//bundle.js 作为启动文件
const webpack = require('./lib/webpack.js');
const options = require('./webpack.config.js');
new webpack(options).run();
接下来就是我们的核心分析文件webpack.js
大致分为7个步骤
在webpack.js中 实现一个webpakc的类
- 拿到配置的入口 entryFile
- 进入到模块拿到模块的内容：
- 借助node的读取文件内容模块(readFileSync) const fs = require(‘fs’); fs.readFileSync(entryFile, ‘aft-8’)
- 借助@babel/parser 分析模块的内容，parser.parse 会解析出每行代码的node类型，但是实际工作中会有很多行代码，不方便遍历查询 :代码 const ast = parser.parse( content, { sourceType: “module”}) console.log(ast.program.body)
- 对语法树做增删改查的 @babel/traverse： travaerse( ast,{ ImportDeclaration(node){ console.log( node.source.value) } } ) //ImportDeclaration节点类型
- 使用path.dirname获取入口文件的路径，和文件的名称做拼接
- 使用@bable/core 处理内容 const { code } = transformFromAst(ast,null , { presets: [“@babel/preset-env” ] }) 返回code
- 在parse方法里，拿到返回的数据结构{ entryFile, yilai , code }
- 递归处理模块里的依赖模块
- 对数据结构进行转换
- 生成bundle文件 （从outpaut的配置字段里拿到文件的存储位置和文件的名称）
- 借助fs.writeFileSync来生成bundle文件 fs.writeFileSync( bundlePath,content,”utf-8”) 要对content进行序列化
const fs = require('fs');
const parser = require('@babel/parser');
const travaerse = require('@babel/traverse').default;
const path = require('path');
const { transformFromAst } = require('@babel/core');
//创建一个webpack类
module.exports = class webpack {
constructor(options){
//这里的options参数就是我们配置文件的参数，我们先把entry,output保存下来
const {entry,output} = options;
this.entry = entry;
this.output = output;
this.modules = []
}
run(){
//入口函数
const info = this.parse(this.entry);
this.modules.push(info);
//递归处理
//用双层for 循环 遍历modules，达到递归的效果
for(let i =0; i< this.modules.length; i ++){
const item = this.modules[i];
const yilai = item.yilai;
if(yilai){
for(let j in yilai){
this.modules.push(this.parse(yilai[j]))
}
}
}
//数据格式转换 arr to obj
const obj = {}
this.modules.forEach((item) => {
obj[item.entryFile] = {
yilai : item.yilai,
code : item.code
}
})
this.file(obj);
}
parse(entryFile){
//解析模块 将模块信息返回
const content = fs.readFileSync(entryFile,'utf-8')
const ast = parser.parse(content, {
sourceType:"module"
});
const yilai = {};
//对抽象语法树做增删改查的过滤
travaerse(ast, {
//把类型作为函数名称
ImportDeclaration({node}) {
const newPathName = './' + path.join(path.dirname(entryFile), node.source.value);
yilai[node.source.value] = newPathName;
}
})
//拿到依赖信息之后，对内容做分析
const {code} = transformFromAst(ast,null,{
presets:["@babel/preset-env"]
})
return{
entryFile,
yilai,
code
}
}
file(obj){
//1.生成bundle文件（需要从outpaut的配置字段里拿到文件的存储位置和文件的名称）
//通过拼接得到一个绝对路径
const bundlePath = path.join(this.output.path, this.output.filename);
const newObj = JSON.stringify(obj);
const content = `(function(modules){
function require(module){
// ./a.js ---> 是否可以拿到这个模块的code?
function newRequire(relativePath){
// 就是把相对于入口模块的路径替换成相对根目录的路径
return require(modules[module].yilai[relativePath])
}
const exports = {};
(function(exports,require,code){
eval(code)
})(exports,newRequire,modules[module].code)
return exports;
}
require('${this.entry}')
})(${newObj})`
fs.writeFileSync(bundlePath, content, "utf-8");
}
}
接下来node bundle.js 运行起来
我们会看到生成的dist/main.js中
(function(modules){
function require(module){
// ./a.js ---> 是否可以拿到这个模块的code?
function newRequire(relativePath){
// 就是把相对于入口模块的路径替换成相对根目录的路径
return require(modules[module].yilai[relativePath])
}
const exports = {};
(function(exports,require,code){
eval(code)
})(exports,newRequire,modules[module].code)
return exports;
}
require('./src/index.js')
})({"./src/index.js":{"yilai":{"./a.js":"./src/a.js"},"code":"\"use strict\";\n\nvar _a = require(\"./a.js\");\n\nconsole.log(\"hello \".concat(_a.a, \" webpack bundle!!\"));"},"./src/a.js":{"yilai":{"./b.js":"./src/b.js"},"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.a = void 0;\n\nvar _b = require(\"./b.js\");\n\nvar a = \"kkb \".concat(_b.b);\nexports.a = a;"},"./src/b.js":{"yilai":{},"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.b = void 0;\nvar b = '!!!';\nexports.b = b;"}})
就可以直接在浏览器中运行了。
