1、什么是resolve
resolve用于配置导入模块的解析规则。
2、resolve常用配置
① 别名:alias
import $ from 'bootstrap';
resolve: {
alias: {
// 创建 import 或 require 的别名,来确保模块引入变得更简单
bootstrapcss: 'bootstrap/dist/css/bootstrap.css'
},
},
② 修改入口查找顺序, 简化导入代码
resolve: {
// 指定模块入口的查找顺序
mainFields: ['style', 'main']
},
③ 修改查找顺序, 简化导入代码
resolve: {
// 指定导入模块查找顺序
extensions: ['.css', '.js', '.json']
},
④ 通过import导入模块的时候会先在node_modules中查找, 找不到再逐级向上查找,这样在打包的时候非常消耗性能, 能不能在打包的时候让webpack只去指定的目录查找,那就是通过resolve的modules。
resolve: {
// 指定查找范围, 告诉webpack只在node_modules中查找
modules: ["node_modules"],
},