webpack-resolve

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"],
},