文章目录
前言
想到在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目录
}
}
};
总结
以上就是今天要讲的内容，本文仅仅简单介绍了webpack.config.js配置中别名(alias)的使用，而webpack.config.js提供了大量能使我们快速便捷地处理数据的函数和api。