resolve

文章目录

1. 1. mainFields
   1. 1.1. tsconfig-paths-webpack-plugin

主要用于加载模块过程中的寻包，比如require('someModule')时一级一级的往上级目录查找该模块的过程

{
  noParse: /jquery/, // 不处理jquery，也可以将其抽到cdn

  resolve: {
    modules: [ // 指定require查找路径
      path.resolve('src'),
      path.resolve('node_modules'),
    ],

    // 不带后缀的引用仅尝试以下值
    extension: ['.js']
  },

  // 只会对当前项目的包生效，貌似不会对node_modules里的无效
  alias: {
    utils: path.resolve('src/utils'),
  }，

  ... {
    // loader优化
    rules: {
      ...,
      exclude: /node_modules/,
    }
  }
  
}

mainFields

webpack会尝试使用mainField里的值在package.json中查找node_moduels包的入口文件字段；【官方文档】【参考资料】

resolve: {
  // webpack的"target:web"对应的 mainFields
  mainFields: ['browser', 'module', 'main']
}

// package.json
{
  ...
  "main": "/lib/index.js", // browser和nodejs的入口文件
  "module": "/es/index.mjs", // ES Module: import
  "browser": "/browser/index.js", // browser的入口文件
  ...
}

tsconfig-paths-webpack-plugin

有些ts插件也会有mainFields的配置（比如tsconfig-paths-webpack-plugin），最好是保持和webpack的resolve.mainFields保持一致，否则会造成部分依赖包的依赖包没有按照预期进行打包，比如包A引用了B；webpack在打包A时，用的是main入口的代码，而打包B时则用了module入口的代码；

{
  resolve: {
    mainFields: ['module', 'main'],
    plugins[
      new TsconfigPaths({
        configFile: 'tsconfig.json',
        mainFields: ['module', 'main'],
      })
    ]
  }
}