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'),
        }
    })
}