webpack高级概念，resolve配置(配置文件格式以及文件路径变量)（系列十七)

weppack.config.js配置，该文件在根目录下的build文件夹里头

module.exports = {
    entry: {
        main: './src/index.js',
    },
    resolve: {
        extensions: ['.js', '.jsx'，'.vue','.ts'],
        alias: {
            child: path.resolve(__dirname, '../src/a/b/c/child')
        }
    },

 

extensions : 可以让你import模块的时候不写格式，当你不写格式的时候，webpack会默认通过extensions中的格式去相应的文件夹中找,比如

import home form './commonet/home'

alias :当你 import 的路径很长的时候，最好使用别名，能简化你的路径。

比如： import index.js from '../src/a/b/c/index.js'

设置别名：

resolve: {
    alias: {
        '@c': path.resolve(__dirname, '../src/a/b/c')
    }
}

 

这样你的 import 导入代码就可以改成 import index.js from '@c/index.js'