共计 1202 个字符，预计需要花费 4 分钟才能阅读完成。
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’
正文完
