resolve是webpack比较关键的一个配置。webpack在启动后会从配置的入口?？槌龇?，寻找所有依赖的?？?，resolve就是配置webpack如何来寻找?？樗杂Φ奈募?/strong>。
比如：
//index.js
import 'bootstrap';
这段代码蕴含了这样一些信息：
1、从哪里找文件？
boostrap文件是从当前路径找呢？还是特定的某个路径？
2、文件扩展名是什么？
需要引入的是bootstrap.js？还是bootstrap.css？
3、文件的加载顺序是怎样的？
如果在不同文件夹下寻找到相同的文件名，比如dist/css/bootstrap.css、dist/js/bootstrap.js，都叫bootstrap，那是先加载css呢还是js？
这些问题，resolve可以帮我们搞定。
let path = require('path'); //node的path?？?module.exports = {
mode: 'development',//模式，默认两种 production和development
entry: './src/index.js', //入口
output: {
filename: 'bundle.js', //打包后的文件名，名字随便起
path: path.resolve(__dirname, 'build') // 必须是绝对路径
},
module: { //配置loader
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader' ]
}
]
},
resolve: { //解析第三方包
modules: [ //配置 Webpack 去哪些目录下寻找第三方?？? path.resolve('node_modules'),//只从node_modules下面找
//path.resolve('others') //还可以是自定义的其他目录
],
mainFields:['style','main'], // 配置加载顺序
extensions: ['.css', '.js', '.json'] // 省略扩展名，比如：import {xx} from './src/index'
}
}
1607749669(1).png
我们通过mainFields可以配置加载顺序，extensions可以配置扩展名。
