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就轻松的多。