webpack配置之resolve

webpack配置之resolve配置

extensions作用

在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在。

extensions: ['.js', '.json','.vue', '.less'] // import引入文件的时候不用加后缀

mainFields作用

有一些第三方模块会针对不同环境提供几分代码。 例如分别提供采用 ES5 和 ES6 的2份代码，这2份代码的位置写在  package.json  文件里，如下：

{ 
"jsnext:main": "es/index.js",// 采用 ES6 语法的代码入口文件
"main": "lib/index.js" // 采用 ES5 语法的代码入口文件
}

Webpack 会根据  mainFields  的配置去决定优先采用哪份代码， mainFields  默认如下：

mainFields: ['browser', 'main']

Webpack 会按照数组里的顺序去 package.json  文件里寻找，只会使用找到的第一个。

假如你想优先采用 ES6 的那份代码，可以这样配置：

mainFields: ['jsnext:main', 'browser', 'main']

### exforceExtension作用
如果配置为 true  所有导入语句都必须要带文件后缀
### enforceModuleExtension作用
### modules作用
告诉 webpack 解析模块时应该搜索的目录。
绝对路径和相对路径都能使用，但是要知道它们之间有一点差异。
通过查看当前目录以及祖先路径（即 `./node_modules`, `../node_modules` 等等）， 相对路径将类似于 Node 查找 'node\_modules' 的方式进行查找。

使用绝对路径，将只在给定目录中搜索。

**webpack.config.js**

module.exports = { //... resolve: {

modules: ['node_modules'],

},};

**如果你想要添加一个目录到模块搜索目录，此目录优先于 **`node_modules/` 搜索：

**webpack.config.js**

const path = require('path');

module.exports = { resolve: {

modules: [path.resolve(__dirname, 'src'), 'node_modules'],

},};

alias作用

配置项通过别名来把原导入路径映射成一个新的导入路径。例如使用 以下配置： alias:{

  @: './src/components/'

} 配置成功之后，那么在使用的时候，就可以 import XXX from '@/xxx.vue' 来使用它，实际上同等于 import XXX from './src/components/xxx.vue'

等同于 import a from '../utils/utils.js'