webpack 常用配置

1. 配置alias别名

在 vue.config.js 中，通过设置 resolve 属性可以配置查找“commonJS／AMD模块”的基路径，也可以设置搜索的模块后缀名，还可以设置别名 alias。设置别名可以处理 import 时超长的路径引入。

方法一：

module.exports = {
    configureWebpack: {
        resolve: {
            // 配置alias别名
            alias: {
                'assets': '@/assets', //这样就可以用别名 assets 来代替路径 src/assets
                'components': '@/components',
                'views': '@/views',
                'api': '@/api',
                'store': '@/store',
                'plugins': '@/plugins',
            }
        }
    },
    devServer: {
     // .....
    },
}

方法二：

const path = require('path'); //引入path 要用到他的resolve 方法
const resolve = dir => path.resolve(__dirname, dir);  //这里为了方便直接引入了最里层

module.exports = {
    configureWebpack: {
        resolve: {
        // 设置别名
        alias: {
            '@': resolve('src'),// 这样配置后 @ 可以指向 src 目录
            'api': resolve('src/api')// 这样配置后 api 可以指向 src 目录下的api目录
        }
    },
}

    devServer: {
       // .....
    },
};