webpack技術(shù)內(nèi)幕

入口文件

對于多入口文件，如何巧妙地編寫入口

//例如 文件都起名為 xxx-xxx.entry.js
let _entry = {};
if (/.+\/([a-zA-Z]+-[a-zA-Z]+)(\.entry\.js$)/g.test(item) == true) {
 const entrykey = RegExp.$1
 _entry[entrykey] = item;
 const [dist, template] = entrykey.split(“-");
 }

Module淺析

開啟對Webpack多核的支持

• Webpack是基于NodeJS的，所以開啟多核編譯來加快編譯速度
• 利用happypack插件來實現(xiàn)
• webpack5會集成happywebpack，盡情的等待吧?。。?/li>

const HappyPack = require('happypack');
const os = require('os');//獲取系統(tǒng)信息
//開辟一個線程池
const happyThreadPoll = HappyPack.ThreadPool({ size: os.cpus().length });
module.exports.plugins = [
    new HappyPack({
        id: 'babel',
        threadPool: happyThreadPoll,
        loaders: [{
            loader: 'babel-loader'
        }]
    }),
    new HappyPack({
        id: 'css',
        threadPool: happyThreadPoll,
        loaders: [{
            loader: 'css-loader', 
            options: { importLoaders: 1 } 
        },'postcss-loader']
    })
];
//集成到webpack.config.js
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: 'happypack/loader?id=babel',
        },
        {
            test: /\.css$/,
            exclude: /(node_modules)/,
            use: 'happypack/loader?id=css',
        }, 
    ]
}

Loader的原理分析

image.png

AST靜態(tài)語法分析樹

• 以uglify-js為例，分析一下AST樹是個啥

var UglifyJS = require('uglify-js');
var code = 'var a = 100';
var ast = UglifyJS.parse(code);//AST語法分析樹‘
var transformer = new UglifyJS.TreeTransformer(function(node){
    if(node instanceof UglifyJS.AST_Number){//查找需要修改的葉子節(jié)點
        node.value = '0x' + Number(node.value).toString(16);//轉(zhuǎn)成16進(jìn)制
        return node;//返回一個新的葉子節(jié)點，替換原來的葉子節(jié)點
    }
});
ast.transform(transformer);//遍歷AST樹
var ncode = ast.print_to_string();//從AST還原成字符串
console.log(ncode);//var a = 0x1;

如何開發(fā)一個自己的Loader

//入口文件
const a = 20;
-------------------------
loader/index.js
-------------------------
//loader執(zhí)行之前
module.exports.pitch = function(r1,r2,data){
    data.value = 'yd';
}
//同步loader
module.exports = function(content, map, meta){
    console.log('得到的數(shù)據(jù)', content);//將const a = 20;轉(zhuǎn)化成buffer <Buffer xxxxx ... >
    console.log('loader預(yù)先得到的數(shù)據(jù)', this.data.value);//yd
    return '{};'+content;
    // this.callback(null, content, map, meta);
};
//異步loader
module.exports = function(content, map, meta){
 var callback = this.async();
 (funciton(){....}).then(function(){
     if(err){
         callback(err);
     }else{
         callback(null, ......)
     }
 })
};
//流的方式
//module.exports.raw = true;
-----------------------------------
webpack.config.js
-----------------------------------
const path = require('path');
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: path.resolve('./loader/index.js')
            }
        ]
    }
};
//最后生成代碼
eval("{};const a = 20;\r\n\r\n//import bar from './bar.js';\r\n//bar.init();\n\n//# sourceURL=webpack:///./src/index.js?");

Plugins

事件鉤子會有不同的類型 SyncBailHook，AsyncSeriesHook，SyncHook等
如果是異步的事件鉤子，那么可以使用 tapPromise 或者 tapAsync 來注冊事件函數(shù)，tapPromise 要求方法返回 Promise 以便處理異步，而 tapAsync 則是需要用 callback 來返回結(jié)果

compiler.hooks.done.tapPromise('PluginName', (stats) => {
    return new Promise((resolve, reject) => {
    // 處理promise的返回結(jié)果 reject(err) : resolve()
});
compiler.hooks.done.tapAsync('PluginName', (stats, callback) => {
    callback( err)) 
});

除了同步和異步的，名稱帶有 parallel 的，注冊的事件函數(shù)會并行調(diào)用，名稱帶有 bail 的，注冊的事件函數(shù)會被順序調(diào)用，直至一個處理方法有返回值名稱帶有 waterfall 的，每個注冊的事件函數(shù)，會將上一個方法的返回結(jié)果作為輸入?yún)?shù)。有一些類型是可以結(jié)合到一起的，如 AsyncParallelBailHook，這樣它就具備了更加多樣化的特性

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
    apply(compiler) {
        // 在 compiler的hooks中注冊一個方法，當(dāng)執(zhí)行到該階段時會調(diào)用
        compiler.hooks.run.tap(pluginName, compilation => {
            console.log("The webpack build process is starting!!!");
        });
    }
}
//使用
plugins: [
    new ConsoleLogOnBuildWebpackPlugin()
]
webpack 利用了 tapable 這個庫（https://github.com/webpack/tapable）來協(xié)助實現(xiàn)對于整個構(gòu)建流程各個步驟的控制。 tapable 定義了主要構(gòu)建流程后，使用 tapable 這個庫添加了各種各樣的
鉤子方法來將 webpack 擴(kuò)展至功能十分豐富,這就是plugin 的機(jī)制

webpack整體運行流程

webpack 本質(zhì)上就是一個 JS Module Bundler，用于將多個代碼模塊進(jìn)行打包。bundler 從一個構(gòu)建入口出發(fā)，解析代碼，分析出代碼模塊依賴關(guān)系，然后將依賴的代碼模塊組合在一起，在JavaScriptbundler中，還需要提供一些膠水代碼讓多個代碼模塊可以協(xié)同工作，相互引用

分析出依賴關(guān)系后，webpack 會利用JavaScript Function的特性提供一些代碼來將各個模塊整合到一起，即是將每一個模塊包裝成一個JS Function，提供一個引用依賴模塊的方法，如下面例子中的webpack__require，這樣做，既可以避免變量相互干擾，又能夠有效控制執(zhí)行順序

// 分別將各個依賴模塊的代碼? modules 的?式組織起來打包成?個?件
================================entry======================================
// entry.js 
import { bar } from './bar.js'; // 依賴 ./bar.js 模塊 
// bar.js 
const foo = require('./foo.js'); // 依賴 ./foo.js 模塊
遞歸下去，直至沒有更多的依賴模塊，最終形成一顆模塊依賴樹
 ================================moudles======================================
 // entry.js
 modules['./entry.js'] = function() {
    const { bar } = __webpack__require__('./bar.js')
 }
 // bar.js
 modules['./bar.js'] = function() {
    const foo = __webpack__require__('./foo.js')
 };
 // foo.js
 modules['./foo.js'] = function() {
    // ... 
 }
================================output===========================
// 已經(jīng)執(zhí)?的代碼模塊結(jié)果會保存在這?
(function(modules){
    const installedModules = {}
    function __webpack__require__(id) {
        // 如果 installedModules 中有就直接獲取
        // 沒有的話從 modules 中獲取 function 然后執(zhí)?，
        //將結(jié)果緩存在 installedModules 中然后返回結(jié)果
    }
})({
    "./entry.js": (function(__webpack_require__){
        var bar = __webpack_require__(/*code內(nèi)容*/)
    }),
    "./bar.js": (function(){}),
    "./foo.js": (function(){}),
})
其實webpack就是把AST分析樹 轉(zhuǎn)化成 鏈表

image.png