webpack配置别名alias出现的错误匹配

1fe1se 发布于2019-08-19 17:21 / 3272人阅读

摘要：的匹配问题初现在中，通过设置属性可以配置查找模块的基路径，也可以设置搜索的模块后缀名，当然，最后一个就是我们要讲的别名设置。深入源码之先贴上部分源码这段简单的代码所做的就是针对别名做映射，获取到对应的模块。修改非常简单，进行严格相等的判断

@(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云服务器出现身份验证错误电脑出现域名解析错误远程连接出现内部错误配置别名

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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