webpack.config.js配置别名(alias)

最新推荐文章于 2024-07-22 17:51:36 发布

Rain_Ze

最新推荐文章于 2024-07-22 17:51:36 发布

阅读量6.5k

点赞数 3

分类专栏：前端架构文章标签： webpack 前端

本文链接：https://blog.youkuaiyun.com/Rain_Ze/article/details/116278147

版权

前端架构专栏收录该内容

8 篇文章

订阅专栏

本文介绍了webpack.config.js的作用，并详细讲解了如何使用别名(aliases)来简化前端代码，提高开发效率。通过示例展示了如何配置和使用别名，使开发者能更便捷地处理项目中的路径引用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

想到在webpack配置别名是因为最近引入图片样式太繁琐想更简便些，节省代码

提示：以下是本篇文章正文内容，下面案例可供参考

一、首先webpack.config.js是什么？

示例：webpack.config.js 是基于webpack（开源的前端打包工具）的配置文件。

二、别名（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目录
        }
    }
};