@(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)