关于webpack:webpack配置之resolve

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

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

有一些第三方模块会针对不同环境提供几分代码。例如别离提供采纳 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:{

  @: './src/components/'

}
配置胜利之后，那么在应用的时候，就能够
import XXX from ‘@/xxx.vue’ 来应用它，实际上同等于
import XXX from ‘./src/components/xxx.vue’

等同于 import a from ‘../utils/utils.js’

关于webpack:webpack配置之resolve

webpack 配置之 resolve 配置

extensions 作用

mainFields 作用

alias 作用