vue项目中 configureWebpack 与 chainWebpack的区别及配置方式

configureWebpack 与 chainWebpack

1. chainWebpack通过链式编程的形式，来修改默认的webpack配置
2. configureWebpack通过操作对象的形式，来修改默认的webpack配置

两种格式配置alias别名

一、configureWebpack对象形式

configureWebpack:{
       resolve: {
           // 别名配置
            alias: {
              'assets': '@/assets',
              'common': '@/common',
              'components': '@/components',
              'network': '@/network',
              'configs': '@/configs',
              'views': '@/views',
              'plugins': '@/plugins',
             }
        }
    }

二、configureWebpack函数形式

configureWebpack:(config) => {
    if (process.env.NODE_ENV === 'production') {
        // 为生产环境修改配置...
        config.mode = 'production'
    } else {
        // 为开发环境修改配置...
        config.mode = 'development'
    }
    // 开发生产共同配置别名
    Object.assign(config.resolve, {
        alias: {
            '@': path.resolve(__dirname, './src'),
            'assets': path.resolve(__dirname, './src/assets'),
            'common': path.resolve(__dirname, './src/common'),
            'components': path.resolve(__dirname, './src/components'),
            'network': path.resolve(__dirname, './src/network'),
            'configs': path.resolve(__dirname, './src/configs'),
            'views': path.resolve(__dirname, './src/views'),
            'plugins': path.resolve(__dirname, './src/plugins'),
        }
    })
}