官方解释

https://www.webpackjs.com/configuration/resolve/ 这些选项能设置模块如何被解析。

http://site.damobing.com/webpack/2%E9%85%8D%E7%BD%AE/2-4Resolve.html Webpack 在启动后会从配置的入口模块出发找出所有依赖的模块，Resolve 配置 Webpack 如何寻找模块所对应的文件。 Webpack 内置 JavaScript 模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，但你也可以根据自己的需要修改默认的规则。

解析理解

这个配置是配置webpack如何解析模块。这里不是编译转换文件和loader的意义不同。那解析模块说的是什么呢，例如：

  • alias：路径映射
  • mainfiles：解析目录时使用的文件名
  • mainFields：假如第三方模块提供ES5和ES6的2份代码，mainFields可以配置优先采用哪一份代码。
  • extensions：导入语句自动带上后缀进行查找。
  • modules：配置webpack去哪些目录下寻找第三方模块。
  • enforceExtension：配置true的情况下，所有导入语句都必须要带有文件后缀。
  • enforceModuleExtension：和enforceExtension配对使用。兼容第三方模块不带有文件后缀。

属性介绍

1. alias

通过配置alias做一些路径的映射，提高开发效率。作统一的路径映射。

  1.   resolve: { // 路径别名
  2.     alias: { 
  3.       '@': path.resolve('src')
  4.     }
  5.   },
  7.   ......
  9.   import module from '@/es6/es6Module';
  10.     import customerButton from '@/components/customerButton';
  1.   resolve: { // 路径别名
  2.     alias: { 
  3.       '@': path.resolve('src'),                   // 地址的默认路径是根目录
  4.       'components': path.resolve('src/components')
  5.     }
  6.   },
  8.   ......
  10.   import module from '@/es6/es6Module';
  11.     import customerButton from 'components/customerButton';

注意点：alias的路径默认路径是根目录，不是context的地址？

2. mainfiles

  1.     mainFiles: ["index"]            // 默认是index

假如上面的index进行了修改，则对应的组件也需要进行修改。假如上面修改，文件名称需要作对应的修改，但是基本上不会修改，因为第三方依赖基本都是index入口。

  1.   mainFiles: ["index1"]            // 默认是index

image.png

3. mainFields

第三方模块会针对不同环境提供不同的代码。

  1. {
  2.   ...
  3.   main: 'build/d3.Node.js', 
  4.   browser: 'build/d3.js',            // 当 target 属性设置为 webworker, web 或者没有指定
  5.   module: 'index',                        // 其他任意的 target（包括 node）
  6.   ...
  7. }

webpack可以通过配置mainFields控制第三方加载的入口文件。

  1. mainFields: ["browser", "module", "main"]

4. extensions

自动解析确定的扩展。默认值为：

  1. extensions: [".js", ".json"]
  1.   resolve: { // 路径别名
  2.     alias: { 
  3.       '@': path.resolve('src'),                                           // 地址的默认路径是根目录
  4.       'components': path.resolve('src/components')
  5.     },
  6.     mainFiles: ["index"],
  7.     extensions: [".js", ".json", '.css']
  8.   },

这里我们扩展了.css。可以直接不带有css后缀名，访问css文件

  1. import './css/entry1';

5. modules

我们在说alias的时候给src/components的路径做了别名。现在我们想通过类似访问node_modules的方式访问文件。

  1.   resolve: { // 路径别名
  2.     alias: { 
  3.       '@': path.resolve('src'),                                           // 地址的默认路径是根目录
  4.       // 'components': path.resolve('src/components')
  5.     },
  6.     mainFiles: ["index"],
  7.     extensions: [".js", ".json", '.css'],
  8.     modules:['./src/components','node_modules']
  9.   },
  1. import customerButton from 'customerButton';
  2. import _ from 'lodash';

6. enforceExtension

如果是 true，将不允许无扩展名(extension-less)文件。默认如果 ./foo 有 .js 扩展，require(‘./foo’) 可以正常运行。但如果启用此选项，只有 require(‘./foo.js’) 能够正常工作。默认：

  1. enforceExtension: false

7. enforceModuleExtension

对模块是否需要使用的扩展（例如 loader）。默认：

  1. enforceModuleExtension: false

Demo地址

https://github.com/rodchen-king/wepack-learn/commit/1974324656647437a56bea2c5b68da4daeebe59e

遗留问题

enforceExtension 和 enforceModuleExtension的配合使用方法