webpack配置別名alias出現的錯誤匹配

1fe1se 發布于2019-08-19 17:21 / 3273人閱讀

摘要：的匹配問題初現在中，通過設置屬性可以配置查找模塊的基路徑，也可以設置搜索的模塊后綴名，當然，最后一個就是我們要講的別名設置。深入源碼之先貼上部分源碼這段簡單的代碼所做的就是針對別名做映射，獲取到對應的模塊。修改非常簡單，進行嚴格相等的判斷

@(webpack)

webpack是一款功能強大的前端構建工具，不僅僅是針對js，它也可通過各種loader來構建相關的less，html，image等各種資源，將webpack配合流程制定工具gulp結合起來，則更為方便的自定義工作流程。

[TOC]

webpack的alias匹配問題初現

在webpack.config.js中，通過設置resolve屬性可以配置查找“commonJS／AMD模塊”的基路徑，也可以設置搜索的模塊后綴名，當然，最后一個就是我們要講的別名alias設置。

跟蹤問題

在模塊開發過程中，我們可能會對可以復用的組件封裝成一個可被git管控的模塊，并在引用的過程中采用帶版本號的方式引用，這就要求我們在webpack.config.js中添加相關alias配置，如

...
module.exports = {
    entry: {
        main: "index.js"
    },
    output: {
        path: "build"
        filename: "[name].js"
    },
    resolve: {
        root: "modules"
        alias: {
            "mod/slider": "/path/mods/mod/slider/0.0.5",
            "mod/footer": "/path/mods/mod/footer/0.0.2",
            "mod/slider/0.0.3": "/path/mods/mod/slider/0.0.3",
            "mod/header": "/path/mods/mod/header/0.0.1",
            "mod/slider/0.0.1": "/path/mods/mod/slider/0.0.1"
        }    
    }
}

有一個簡單的需求，即在index.js中，可這樣引用：

var slider = require("mod/slider");
var sliderV3 = require("mod/slider/0.0.3");
var sliderV1 = require("mod/slider/0.0.1");

結果和我們預想的會有不同，webpack的別名處理邏輯會使這三個變量的引用都為 slider這個變量所對應的模塊，要想解決這種情況，只能深入源碼。

深入源碼之ModuleAliasPlugin

先貼上部分源碼：

    var aliasMap = this.aliasMap;
    resolver.plugin("module", function(request, callback) {
        var fs = this.fileSystem;
        var keys = Object.keys(aliasMap);
        var i = 0;
        (function next() {
            for(;i < keys.length; i++) {
                var aliasName = keys[i];
                var onlyModule = /$$/.test(aliasName);
                if(onlyModule) aliasName = aliasName.substr(0, aliasName.length-1);
                if((!onlyModule && request.request.indexOf(aliasName + "/") === 0) || request.request === aliasName) {
                    var aliasValue = aliasMap[keys[i]];
                    if(request.request.indexOf(aliasValue + "/") !== 0 && request.request != aliasValue) {
                        var newRequestStr = aliasValue + request.request.substr(aliasName.length);
                        var newRequest = this.parse(newRequestStr);
                        var obj = {
                            path: request.path,
                            request: newRequest.path,
                            query: newRequest.query,
                            directory: newRequest.directory
                        };
                        var newCallback = createInnerCallback(callback, callback, "aliased with mapping " + JSON.stringify(aliasName) + ": " + JSON.stringify(aliasValue) + " to " + newRequestStr);
                        if(newRequest.module) return this.doResolve("module", obj, newCallback);
                        if(newRequest.directory) return this.doResolve("directory", obj, newCallback);
                        return this.doResolve(["file", "directory"], obj, newCallback);
                    }
                }
            }
            return callback();
        }.call(this));

這段簡單的代碼所做的就是針對別名做映射，獲取到對應的模塊。
之所以出現上節的問題，就是因為這句判斷

if(request.request.indexOf(aliasValue + "/") !== 0 && request.request != aliasValue)

webpack的作者貌似有些多此一舉了，或者說是在我們的應用場景中并沒有考慮到，所以僅僅針對這個判斷進行修改就可以滿足需求。修改非常簡單，進行嚴格相等的判斷：

if(request.request != aliasValue)

GPU云服務器云服務器出現身份驗證錯誤電腦出現域名解析錯誤遠程連接出現內部錯誤配置別名

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78457.html

webpack 從入門到上線

webpack 是什么 showImg(https://segmentfault.com/img/bVzLhA?w=2598&h=1299); 一項技術、一個工具的出現，肯定是為了解決問題的。那么，webpack 是為了解決什么問題？答案是：文件依賴管理。瀏覽器端的 Js, 出于安全的考慮，對本地文件沒有操作權限，不能引用其它 js, css 等文件。而 webpack 就是用來解決這個問題的，讓...

Yumenokanata 2019-08-20 10:22 評論0 收藏0
webpack學習筆記

摘要：運行該語句會執行如下步驟使用進行文件壓縮。設置環境變量，觸發某些包，以不同的方式進行編譯。在原始的源碼中執行查找和替換操作。等同于表示任何出現的地方都會被替換為。提供函數用來合并配置對象當文件小于限制，會返回。選項 1.devtool：通過在瀏覽器調試工具(browser devtools)中添加元信息(meta info)增強調試。 2.resolve.alias:創建 impor...

Soarkey 2019-08-22 10:53 評論0 收藏0
WEBPACK

摘要：主要輸出文件的默認值是，其他生成文件默認放置在文件夾中。讓能夠去處理其他類型的文件，并將它們轉換為有效模塊，以供應用程序使用，以及被添加到依賴圖中。屬性，表示進行轉換時，應該使用哪個。本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包工具。當 webpack 處理應用程序時，它會在內部構建一個依賴圖(dependency graph)，此依賴圖會映射項...

Turbo 2019-08-23 16:30 評論0 收藏0
vue-router 一些容易被忽略的知識點

摘要：調用全局的守衛。在被激活的組件里調用。用創建好的實例調用守衛中傳給的回調函數。本文適用于對 Vue.js 和 vue-router 有一定程度了解的開發者除特殊說明，vue-router 版本為 3.0.2 正文路由 class 匹配路由匹配后會給該標簽添加 class 屬性值 .router-link-active，該功能在嵌套路由中十分方便 class 的實際屬性值可以通...

chunquedong 2019-08-23 14:58 評論0 收藏0
webpack配置

摘要：配置無入口的在輸出時的文件名稱。配置發布到線上資源的前綴，為類型。則是用于配置這個異步插入的標簽的值。配置以何種方式導出庫。是字符串的枚舉類型，支持以下配置。在為時，配置將沒有意義。是可選配置項，類型需要是其中一個。 webpack配置查看所有文檔頁面：全棧開發，獲取更多信息。原文鏈接：第2章配置，原文廣告模態框遮擋，閱讀體驗不好，所以整理成本文，方便查找。配置 Webpack...

Doyle 2019-08-22 17:27 評論0 收藏0