这一节的代码位于 08_path_env/8_1_resolve_config

有的时候在js中引入代码时, 需要写很长的路径, 有的是自己写的代码, 有的是第三方代码:
image.png
这个时候希望可以配置一些别名到常用路径上, 可以利用webpack中的resolve配置实现

别名alias配置

第三方模块路径配置

  • 安装bootstrap, yarn add bootstrap 假如需要使用bootstrap的css:
  • image.png
  • 此时会报错, 因为在bootstrap的包中查找的是js文件:

  • image.pngimage.png

  • 先直接写上css的路径, 这样是可以的

  • image.png
  • 这里可以用上面的别名来简化
  • image.png
  • 也可以使用主入口配置来直接第三方包的入口文件顺序:
  • image.png
  • 这里的意思就是先查找style字段的入口文件, 没有的话再查找main字段入口文件

  • image.png

  • 还可以指定入口文件的名字, 若不指定, 默认找index.js:

  • image.png

拓展名配置

可以在引入文件时不用写后缀, 按照配置的后缀依次自动查找

  • image.png
  • 在当前例子中, index.js文件引入style.css就不用写后缀了
  • image.png