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

@(webpack)

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

---

目錄

• webpack的alias匹配問題初現
  • 跟蹤問題
• 深入源碼之ModuleAliasPlugin

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)