Webpack之resolve

resolve.extensions

我們在引入外部模塊的時候，通常會有這種寫法：import test from './test/test

這種寫法就是想從./test目錄下去引入test.js。

可是再進行React的開發時，我們經常會將文件後綴命名爲.jsx。那麼再通過上面那樣的寫法就不能正常執行了，必須帶上.jsx的後綴纔可以。

如果我們依然想這麼寫，可以通過Webpack配置文件的resolve.extensions來實現。

modules.exports = {
    ...,
    resolve: {
        extensions: ['js', 'jsx']
    }
}

這個配置項的意思是指，當按照上面那樣的寫法來引入模塊時，首先先在test目錄下尋找test.js如果沒有，則再尋找test.jsx。

注意

雖然通過resolve.extensions的寫法可以實現這種非.js後綴文件的簡寫引入。但不建議在這裏面寫上一大堆的後綴名，以實現所有文件的簡寫引入。

原因是因爲，這個過程是需要Node.js嘗試去讀取文件實現的，這個過程是非常耗費性能的。

resolve.mainFiles

其實若是將test目錄下的test.js改名爲index.js還能更進一步的簡寫，就是import test from './test，這樣會自動幫我們去加載./test目錄下的index.js文件。

但如果我們不想改名也想達到同樣的效果，就需要對resolve.mainFiles做一個配置：

modules.exports = {
    ...,
    resolve: {
        mainFiles: ['index', 'test']
    }
}

以上配置是指先去找有沒有index.js再去找有沒有test.js。

這個配置項不常用，因爲也是對性能有損耗。

resolve.alias

在引入通過npm或者yarn安裝的包時，我們通常是這樣引入的：

import _ from 'lodash';

直接寫模塊名字即可，那麼我希望自己寫的模塊也通過一個名字而不是一個路徑來引入可以嗎？

答案是肯定的，只需要通過配置resolve.alias即可，所謂alias就是別名的意思：

const path = require('path');
module.exports = {
    ...,
    resolve: {
        alias: {
            test: path.resolve(__dirname, './test')
        }
    }
}

這就是別名，實際上就是編碼的時候用一個別名取代一長串路徑，而實際執行的時候依舊是通過路徑來引入。

這個配置項的使用場景通常是一個模塊所在的路徑過深，每次引入都要寫一長串路徑就很麻煩，通過alias就輕鬆的多。