11 webpack4.x resolve路径别名、文件扩展名、第三方库目录设置

文章参考

1. webpack学习笔记–配置resolve
2. webpack resolve 配置说明

Resolve 配置说明

1. Webpack 在启动后会从配置的入口模块出发找出所有依赖的模块，Resolve 配置 Webpack 如何寻找模块所对应的文件。
2. Webpack 内置 JavaScript 模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，但你也可以根据自己的需要修改默认的规则。

webpack.config.js 配置绝对路径 alias

resolve:{
   // 定义路径别名
   alias:{
     // @src 代表 “工程目录/src”
     '@src':  path.resolve(__dirname,'./src'),
     // @component 代表 “工程目录/src/components”
     '@component':  path.resolve(__dirname,'./src/components')
   }
 },

webpack.config.js 配置第三方模块加载路径 modules

resolve:{
	// 指定第三方模块加载的路径，例如 jquery 、lodash等
	modules:['node_modules','./lib/components']
},

设置默认后缀文件

在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在。

resolve:{
	// 如果引入的文件没有后缀名，默认会优先去找 js文件，如果没有就去找 ts文件，如果没有就找json文件，依次类推，默认是 js
	extensions: ['.js', '.ts', '.json']
},