webpack配置详解

一、vue3.0 webpack设置别名

在vue根目录下新建一个文件，命名为vue.config.js（vue官方配置）.

const path = require(‘path‘);
function resolve (dir) {
    return path.join(__dirname, dir)  //__dirname为项目根目录，node的express方法中也有使用，join为javascript连接符
}
module.exports = {
    lintOnSave: true,
    chainWebpack: (config)=>{
        config.resolve.alias
            .set(‘@$‘, resolve(‘src‘))
            .set(‘assets‘,resolve(‘src/assets‘))
            .set(‘components‘,resolve(‘src/components‘))
            .set(‘layout‘,resolve(‘src/layout‘))
            .set(‘base‘,resolve(‘src/base‘))
            .set(‘static‘,resolve(‘src/static‘))
    }
}