关于webpack: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'