最近復(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)

1. 拿到配置的入口 entryFile
2. 進(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
3. 在parse方法里，拿到返回的數(shù)據(jù)結(jié)構(gòu){ entryFile, yilai , code }
4. 遞歸處理模塊里的依賴(lài)模塊
5. 對(duì)數(shù)據(jù)結(jié)構(gòu)進(jìn)行轉(zhuǎn)換
6. 生成bundle文件 （從outpaut的配置字段里拿到文件的存儲(chǔ)位置和文件的名稱(chēng)）
7. 借助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)行了。