学习webpack(七)：路径模块的介绍(resolve)

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）

resolve模块解析

webpack能解析三种文件路径：

• 绝对路径
• 相对路径
  • 在这种情况下，使用import 和 require的资源文件所处的目录，被认为是上下文目录
  • 在import / require中给定的相对路径，会拼接次上下文路径，来生成模块的绝对路径
• 模块路径
  • 在resolve.modules中指定的所有目录检索模块。默认值['node_modules']，所以默认会从node_modules中查找文件
  • 可以通过别名的方式来识别路径

extensions 和 alias的配置

• extensions是解析到文件时自动添加的扩展名
  • 默认值是[’.wasm’，’.mjs’，’.js’，’.json’]
  • 如果我们想要添加加载.vue 或者 jsx、ts等文件时，就自己手动配置下
• alias别名

module.exports = {
    entry: './src/index.js',
    resolve: {
        extensions: ['.wasm','.mjs','.js','.json', '.jsx', '.ts'],
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    }
}