【webpack】細化webpack的resolve配置項

本文轉載自查看原文 2020-01-31 16:34 1243 Webpack

當我們使用webpack進行構建前端項目的時候，會從配置的入口模塊處出發找出所有依賴的模塊，Resolve配置Webpack如何去找出模塊所對應的文件。

由於Webpack 內置了 JavaScript 模塊化語法解析功能，默認會采用模塊化標准里約定好的規則去尋找，但你也可以通過Resolve字段根據自己的需要修改默認的規則。

// webpack.config.js
module.exports = {
  //...
  resolve: {
    // configuration options
  }
};

resolve.alias

作用：通過別名來把原導入路徑映射成一個新的導入路徑，例如：

// webpack.config.js
module.exports = {
  //...
  resolve: {
    alias: {
      '@Components': path.resolve(__dirname, 'src/components/'),
      '@Utils': path.resolve(__dirname, 'src/utils/')
    }
  }
};

先看下，我們傳統模式導入一個組件是這樣的：

import Button from '../../../componets/button'

現在，我們就可以這么使用別名了：

import Button from '@Components/button'

當然，我們還可以給定對象鍵后末尾添加$進行精確匹配

// webpack.config.js
module.exports = {
  //...
  resolve: {
    alias: {
      xyz$: path.resolve(__dirname, 'path/to/file.js')
    }
  }
};

import Test1 from 'xyz'; // 精確匹配，所以 path/to/file.js 被解析和導入
import Test2 from 'xyz/file.js'; // 非精確匹配，觸發普通解析

resolve.mainFields

當從 npm 包中導入模塊時（例如，import * as D3 from 'd3'），此選項將決定在 package.json 中使用哪個字段導入模塊。根據 webpack 配置中指定的 target 不同，默認值也會有所不同。

當 target 屬性設置為 webworker, web 或者沒有指定，默認值為：

// webpack.config.js
module.exports = {
  //...
  resolve: {
    mainFields: ['browser', 'module', 'main']
  }
};

對於其他任意的 target（包括 node），默認值為：

// webpack.config.js
module.exports = {
  //...
  resolve: {
    mainFields: ['module', 'main']
  }
};

例如，考慮任意一個名為 upstream 的 library，其 package.json 包含以下字段：

{
  "browser": "build/upstream.js",
  "module": "index"
}

在我們 import * as Upstream from 'upstream' 時，這實際上會從 browser 屬性解析文件。在這里 browser 屬性是最優先選擇的，因為它是 mainFields 的第一項。同時，由 webpack 打包的 Node.js 應用程序首先會嘗試從 module 字段中解析文件。

resolve.extensions

自動解析確定的擴展。默認值為：

// webpack.config.js
module.exports = {
  //...
  resolve: {
    extensions: ['.wasm', '.mjs', '.js', '.json']
  }
};

能夠使用戶在引入模塊時不帶擴展：

import File from '../path/to/file';

resolve.modules

告訴 webpack 解析模塊時應該搜索的目錄。

絕對路徑和相對路徑都能使用，但是要知道它們之間有一點差異。

通過查看當前目錄以及祖先路徑（即 ./node_modules, ../node_modules 等等），相對路徑將類似於 Node 查找 'node_modules' 的方式進行查找。

使用絕對路徑，將只在給定目錄中搜索。

// webpack.config.js
module.exports = {
  //...
  resolve: {
    modules: ['node_modules']
  }
};

如果你想要添加一個目錄到模塊搜索目錄，此目錄優先於 node_modules/ 搜索：

// webpack.config.js
module.exports = {
  //...
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  }
};

上述配置會導致webpack在查找模塊時候，先去src目錄下找，如果沒有找到會去node_modules下查找

resolve.descriptionFiles

作用：描述第三方模塊的文件名稱，也就是 package.json 文件。默認如下：

descriptionFiles: ['package.json']
enforceExtension

resolve.enforceExtension

如果配置為 true 所有導入語句都必須要帶文件后綴，例如開啟前 import './foo' 能正常工作，開啟后就必須寫成 import './foo.js'。

resolve.enforceModuleExtension

enforceModuleExtension 和 enforceExtension 作用類似，但 enforceModuleExtension 只對 node_modules 下的模塊生效。 enforceModuleExtension 通常搭配 enforceExtension 使用，在 enforceExtension:true 時，因為安裝的第三方模塊中大多數導入語句沒帶文件后綴，所以這時通過配置 enforceModuleExtension:false 來兼容第三方模塊。