[學(xué)習(xí)webpack]

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容