最近復(fù)習(xí)了一遍webpack,整理一下學(xué)習(xí)的筆記,按以下幾個(gè)模塊分析學(xué)習(xí)webpack;
- 基礎(chǔ)
- 前端開(kāi)發(fā)工程環(huán)境搭建
- 打包bundle原理分析與實(shí)現(xiàn)
基礎(chǔ)
安裝方式,推薦使用npm init -y初始化配置文件,不推薦全局安裝,因?yàn)槿职惭b會(huì)將項(xiàng)目中的webpack鎖定到指定版本,會(huì)造成不同項(xiàng)目中因?yàn)橐蕾?lài)版本問(wèn)題,導(dǎo)致沖突;
使用npx 方式構(gòu)建,ta會(huì)自動(dòng)查找當(dāng)前依賴(lài)包中的可執(zhí)行文件,如果找不到,就會(huì)去 PATH 里找。如果依然找不到,就會(huì)幫你安裝,原理就是通過(guò)shell腳本在node_modules/.bin的目錄下創(chuàng)建了一個(gè)軟連接。
基礎(chǔ)部分就是針對(duì)配置文件中常見(jiàn)的api字段解釋?zhuān)鏴ntry 、output都是字面意思,就不過(guò)多贅述了。
const path = require("path");
module.exports = {
// 必填 webpack執(zhí)行構(gòu)建入口
entry: "./src/index.js",
output: {
filename: "main.js", //將所有依賴(lài)的模塊合并輸出到main.js
path: path.resolve(__dirname, "./dist") // 輸出文件的存放路徑,必須是絕對(duì)路徑
} };
翻看筆記的時(shí)候,注意到對(duì)loader的處理這塊兒加粗強(qiáng)調(diào)了一下,平時(shí)每個(gè)項(xiàng)目的loader基本都是復(fù)制粘貼,只知其一,不知其二,原來(lái)在loader的配置,loader的順序,也是有講究的,比如 "use: ["style-loader", "css-loader","less-loader"]",就從后像前css-loader接收l(shuí)ess-loader處理less語(yǔ)法轉(zhuǎn)換成css返回給css-loader,css-loader再把返回值給style-loader,做行內(nèi)樣式;
還有fie-loader中有的功能,url-loader中都有, url-loader中可以把圖片轉(zhuǎn)成base64, limit字段來(lái)決定是否需要轉(zhuǎn)換;
給文件配置hash / changehash / contenthash 的區(qū)別是什么? 答: hash作用于整個(gè)項(xiàng)目,chunkhash 作用于chunk,contenthash 作用于內(nèi)容;
擴(kuò)展:如何自己編寫(xiě)一個(gè)Loader?
Loader就是一個(gè)函數(shù),聲明式函數(shù),不能用箭頭函數(shù),拿到源代碼,作進(jìn)一步的修飾處理,再返回處理后的源碼。
//創(chuàng)建一個(gè)簡(jiǎn)單替換文本的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: '開(kāi)課吧',
},
},
],
},
],
}
//在處理js文件的時(shí)候,就會(huì)將hello替換為您好
另外關(guān)于plugins,我也是一直一知半解,只記了幾個(gè)常用的plugin:
HtmlWebpackPlugin : 會(huì)在打包結(jié)束后,自動(dòng)生成一個(gè)html文件,并把打包生成的js模塊引入到該html 中,接收一個(gè)對(duì)象參數(shù),可以設(shè)置title,filename等;
clean-webpack-plugin:我們都知道是情況dist目錄下文件,那么如何做到某個(gè)文件或目錄不被清空呢?答:使用配置項(xiàng):cleanOnceBeforeBuildPatterns 案例:cleanOnceBeforeBuildPatterns: ["/", "!dll", "!dll/"], !感 嘆號(hào)相當(dāng)于exclude 排除,意思是清空操作排除dll目錄,和dll目錄下所有文件。 注意:數(shù)組列表里的 “/”是默認(rèn)值,不可忽略,否則不做清空操作。
如何實(shí)現(xiàn)一個(gè)plugin?
webpack在編譯代碼過(guò)程中生命周期概念對(duì)應(yīng)不同的打包階段,plugin本質(zhì)上是一個(gè)類(lèi),結(jié)尾處代碼。
webpack的打包流程
1.拿到配置,初始化工作 最終配置 2.實(shí)例化一個(gè)compiler類(lèi),注冊(cè)插件,對(duì)應(yīng)的生命周期綁定相應(yīng)的時(shí)間 3.執(zhí)行編譯,compiler.run()
前端開(kāi)發(fā)工程環(huán)境搭建
在這個(gè)板塊里,我們已經(jīng)了解了webpack項(xiàng)目的初始化工程搭建和簡(jiǎn)單的api,那么一個(gè)完整的項(xiàng)目都還有一些什么常見(jiàn)到的配置文件呢
.npmrc算一個(gè),為項(xiàng)目設(shè)置鏡像源,防止別人同事共建你的項(xiàng)目時(shí),再去手動(dòng)設(shè)置;//registry=https://registry.npm.taobao.org/
.bablelrc babel處理js的工具,值有env(負(fù)責(zé)處理原生js 比如let const 箭頭函數(shù)) / react(支持jsx to js) 等 。
postcss.config.js 他主要功能只有兩個(gè):第一就是把css解析成JS可以操作的抽象語(yǔ)法樹(shù)AST,第二就是調(diào)用插 件來(lái)處理AST并得到結(jié)果;所以postcss一般都是通過(guò)插件來(lái)處理css,并不會(huì)直接處理 比如:自動(dòng)補(bǔ)?瀏覽器前綴: autoprefixer css壓縮等 cssnano
webpack.config.js:
- sourceMap:源代碼與打包后的代碼的關(guān)系映射,devtool的值有none,還有source-map,配置后會(huì)打包出.map文件,還有’inline-source-map’, 是將映射的值直接寫(xiě)在關(guān)聯(lián)的文件中
- webpack-dev-server:開(kāi)發(fā)環(huán)境下提升開(kāi)發(fā)效率的神器,熱更新,自動(dòng)打開(kāi)瀏覽器,用硬件保存的方式,保存在內(nèi)存中
- proxy:設(shè)置服務(wù)器代理,本地mock,解決跨域;
// npm i express -D
// 創(chuàng)建一個(gè)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: '開(kāi)課吧',
age: 5,
msg: '歡迎來(lái)到開(kāi)課吧學(xué)習(xí)前端高級(jí)課程',
})
})
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) })
//會(huì)有跨域問(wèn)題,配置
proxy: {
"/api": {
target: "http://localhost:9092" }
}
//將index.js中g(shù)et的路徑參數(shù)修改為‘/api/info’;
打包bundle原理分析與實(shí)現(xiàn)
接收webpack配置之后,進(jìn)行讀取,從入口文件開(kāi)始分析,哪些是依賴(lài)模塊,以及依賴(lài)模塊的位置,內(nèi)容,對(duì)內(nèi)容處理,處理成瀏覽器正確解析的內(nèi)容,遞歸處理其他的依賴(lài)模塊,生成chunk片段,依據(jù)出口配置,生成資源文件的名稱(chēng)和位置;
實(shí)現(xiàn)模塊依賴(lài)分析函數(shù),核心功能,根據(jù)入口模塊開(kāi)始分析依賴(lài)路徑,對(duì)內(nèi)容進(jìn)行處理,支持es6+ To es5的語(yǔ)法轉(zhuǎn)換,返回模塊 路徑,依賴(lài),和相應(yīng)處理。
創(chuàng)建一個(gè)文件夾 webpack-simple
npm init -y
touch bundle.js
mkdir dist 和 lib src目錄
在src下創(chuàng)建a.js b.js index.js 并且模塊間有依賴(lài)關(guān)系(暫時(shí)不考慮互相依賴(lài)的情況)
//index.js
import {a} from "./a.js";
console.log(`hello ${a} webpack bundle!!`)
//a.js
import from './b.js'
export const a = `kkb $`
//b.js
export const b = '!!!'
在lib目錄下創(chuàng)建webpack.js文件,dist目錄下創(chuàng)建main.js作為導(dǎo)出文件,首先我們先配置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 作為啟動(dòng)文件
const webpack = require('./lib/webpack.js');
const options = require('./webpack.config.js');
new webpack(options).run();
接下來(lái)就是我們的核心分析文件webpack.js
大致分為7個(gè)步驟
在webpack.js中 實(shí)現(xiàn)一個(gè)webpakc的類(lèi)
- 拿到配置的入口 entryFile
- 進(jìn)入到模塊拿到模塊的內(nèi)容:
- 借助node的讀取文件內(nèi)容模塊(readFileSync) const fs = require(‘fs’); fs.readFileSync(entryFile, ‘a(chǎn)ft-8’)
- 借助@babel/parser 分析模塊的內(nèi)容,parser.parse 會(huì)解析出每行代碼的node類(lèi)型,但是實(shí)際工作中會(huì)有很多行代碼,不方便遍歷查詢(xún) :代碼 const ast = parser.parse( content, { sourceType: “module”}) console.log(ast.program.body)
- 對(duì)語(yǔ)法樹(shù)做增刪改查的 @babel/traverse: travaerse( ast,{ ImportDeclaration(node){ console.log( node.source.value) } } ) //ImportDeclaration節(jié)點(diǎn)類(lèi)型
- 使用path.dirname獲取入口文件的路徑,和文件的名稱(chēng)做拼接
- 使用@bable/core 處理內(nèi)容 const { code } = transformFromAst(ast,null , { presets: [“@babel/preset-env” ] }) 返回code
- 在parse方法里,拿到返回的數(shù)據(jù)結(jié)構(gòu){ entryFile, yilai , code }
- 遞歸處理模塊里的依賴(lài)模塊
- 對(duì)數(shù)據(jù)結(jié)構(gòu)進(jìn)行轉(zhuǎn)換
- 生成bundle文件 (從outpaut的配置字段里拿到文件的存儲(chǔ)位置和文件的名稱(chēng))
- 借助fs.writeFileSync來(lái)生成bundle文件 fs.writeFileSync( bundlePath,content,”utf-8”) 要對(duì)content進(jìn)行序列化
const fs = require('fs');
const parser = require('@babel/parser');
const travaerse = require('@babel/traverse').default;
const path = require('path');
const { transformFromAst } = require('@babel/core');
//創(chuàng)建一個(gè)webpack類(lèi)
module.exports = class webpack {
constructor(options){
//這里的options參數(shù)就是我們配置文件的參數(shù),我們先把entry,output保存下來(lái)
const {entry,output} = options;
this.entry = entry;
this.output = output;
this.modules = []
}
run(){
//入口函數(shù)
const info = this.parse(this.entry);
this.modules.push(info);
//遞歸處理
//用雙層for 循環(huán) 遍歷modules,達(dá)到遞歸的效果
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]))
}
}
}
//數(shù)據(jù)格式轉(zhuǎn)換 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 = {};
//對(duì)抽象語(yǔ)法樹(shù)做增刪改查的過(guò)濾
travaerse(ast, {
//把類(lèi)型作為函數(shù)名稱(chēng)
ImportDeclaration({node}) {
const newPathName = './' + path.join(path.dirname(entryFile), node.source.value);
yilai[node.source.value] = newPathName;
}
})
//拿到依賴(lài)信息之后,對(duì)內(nèi)容做分析
const {code} = transformFromAst(ast,null,{
presets:["@babel/preset-env"]
})
return{
entryFile,
yilai,
code
}
}
file(obj){
//1.生成bundle文件(需要從outpaut的配置字段里拿到文件的存儲(chǔ)位置和文件的名稱(chēng))
//通過(guò)拼接得到一個(gè)絕對(duì)路徑
const bundlePath = path.join(this.output.path, this.output.filename);
const newObj = JSON.stringify(obj);
const content = `(function(modules){
function require(module){
// ./a.js ---> 是否可以拿到這個(gè)模塊的code?
function newRequire(relativePath){
// 就是把相對(duì)于入口模塊的路徑替換成相對(duì)根目錄的路徑
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");
}
}
接下來(lái)node bundle.js 運(yùn)行起來(lái)
我們會(huì)看到生成的dist/main.js中
(function(modules){
function require(module){
// ./a.js ---> 是否可以拿到這個(gè)模塊的code?
function newRequire(relativePath){
// 就是把相對(duì)于入口模塊的路徑替換成相對(duì)根目錄的路徑
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;"}})
就可以直接在瀏覽器中運(yùn)行了。