# 缩小构建目标

  • 目的:尽可能的少构建模块

  • 比如 exclude 不解析相应的模块,目录。include 只解析解析相应的模块,目录

      module: {
          rules: [
              {
                  test: /\.js$/,
                  //?cacheDirectory=true 开启缓存
                  use: 'babel-loader?cacheDirectory=true',//使用babel-loader解析ES6  
                  exclude: 'node_modules',
                  include: 'src'
              }
          ]
      }
    

# resolve

resolve配置,设置模块如何被解析。通过resolve的配置,可以帮助Webpack快速查找依赖,也可以替换对应的依赖。了解更多

  • resolve.extension:指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配

    resolve: {
      extensions: [".js",".jsx",".json",".css"]
    },
    
  • resolve.alias:是最常用的配置,配置别名可以加快webpack查找模块的速度,直接设置查找路径。减少不必要的查找过程。

    • 每当引入bootstrap模块的时候,它会直接引入bootstrap,而不需要从node_modules文件夹中按模块的查找规则查找

      const bootstrap = path.resolve(__dirname, 'node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.css');
      resolve: {
          alias: {
              "bootstrap": bootstrap
          }
      },
      
  • resolve.modules:告诉 webpack 解析模块时应该搜索的目录

  • resolve.mainFields:当从 npm 包中导入模块时(例如,import * as D3 from 'd3'),此选项将决定在 package.json 中使用哪个字段导入模块。根据 webpack 配置中指定的 target 不同,默认值也会有所不同

  • resolve.mainFiles:解析目录时要使用的文件名,默认是index

# 减少文件搜索范围

  • 优化 resolve.modules 配置(减少模块搜索层级)

  • 优化 resolve.mainFields 配置(优化入口文件分析,搜索过程)

  • 优化 resolve.extensions 配置(缩小扩展名查找范围)

  • 合理使用 alias

    resolve: {
        alias: {
            'react': path.resolve(__dirname, './node_modules/react/umd/react.production.min.js'),
            'react-dom': path.resolve(__dirname, './node_modules/react-dom/umd/react-dom.production.min.js'),
        },
        extensions: ['.js'],
        mainFields: ['main']
    },
    

# 参考

更新时间: 5/13/2020, 11:23:00 PM