Webpack学习 —Alias

在Webpack中，alias是一种简单的映射机制，它允许我们将模块名称映射到特定的路径。在Webpack中定义alias非常简单，我们只需要在Webpack配置文件中的resolve.alias字段中添加一个对象即可

const path = require('path'); //引入path 要用到他的resolve 方法
const resolve = dir => path.resolve(__dirname, dir); //我这里为了方便直接引入了最里层
//当然直接引入const {resolve } = require('path') 也是可以的
module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: resolve('dist')
    },
    resolve: {
        // 设置别名
        alias: {
        // __dirname  可以获取被执行 js 文件的绝对路径
         //'@': resolve(__dirname,'src')// 这样引入的写法引入const {resolve } = require('path') 
            '@': resolve('src')// 这样配置后 @ 可以指向 src 目录
            //当然，别名写更深层也可以   前提是你得有这个目录啊！！
            'api': resolve('src/api')// 这样配置后 api 可以指向 src 目录下的api目录
        }
    }
};

其他页面可以这样调用，使用@符号。

参考：解析(Resolve) | webpack 中文文档 | webpack中文文档 | webpack中文网