Webpack resolve

Resolve

文档地址

该配置项用来解决依赖module查找的。webpack提供了默认参数,
可以对默认参数进行更改来处理相关依赖。
可以查看Module Resolution了解resolver的查找规则。

Resolve(object)

配置依赖的modules被解决的方式。比如,当基于ES2015语法调用import "lodash"
resolve配置可以改变webpack查找lodash的路径。

resolve.alias(object)

创建alias可以使导入模块更方便。比如,映射通用文件夹src

alias: {
  Utilities: path.resolve(__dirname, 'src/utilities/'),
  Templates: path.resolve(__dirname, 'src/templates/')
}

使用相对路径的方式导入依赖

import Utility from '../../utilities/utility';

使用alias的方式导入依赖

import Utility from 'Utilities/utility';

使用$符号可以定位到具体的js文件

alias: {
  xyz$: path.resolve(__dirname, 'path/to/file.js')
}

配置过定位文件后可以按照如下示例使用

import Test1 from 'xyz'; // Success, file.js is resolved and imported
import Test2 from 'xyz/file.js'; // Error, /path/to/file.js/file.js is invalid
alias: import "xyz" import "xyz/file.js"
{} /abc/node_modules/xyz/index.js /abc/node_modules/xyz/index.js
- - -
- - -
- - -
- - -
- - -
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,721评论 7 110
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • resolve.alias这个配置项相当于为文件目录配置一个别名 比如下面这样的目录结构 要在main.js中使用...
    若邪Y阅读 4,268评论 1 1
  • 文|步月儿 书到用时方恨少,情到抒时才觉难。子欲养而亲不待的言语流传千年,表达了多少儿女的追悔,哀痛。遇到生老病死...
    步月儿阅读 662评论 17 9
  • 这是天涯论坛物流板块上一个物流毕业生写的求助贴,下面是原文: 楼主为长沙一名物流管理专业的大专生,6月份毕业证一到...
    尚西物流数据化运营阅读 394评论 0 2