webpack4（四）：解析模块resolve

resolve是webpack比较关键的一个配置。webpack在启动后会从配置的入口模块出发，寻找所有依赖的模块，resolve就是配置webpack如何来寻找模块所对应的文件的。
比如：

//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'
    }
}

bootstrap的package.json是这样的： 1607749669(1).png

我们通过mainFields可以配置加载顺序，extensions可以配置扩展名。