vue打包后文件自定定義命名規則

js文件和svg以及圖片

module.exports = {
    chainWebpack: config = >{
        const svgRule = config.module.rule('svg');
        svgRule.uses.clear(); // 清除svg已有的所有 loader  svg默認有loader。 如果你不這樣做，接下來的 loader 會附加在該規則現有的 loader 之后。
        // 圖片文件重命名
        config.module.rule('images').test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/).use('url-loader') // 添加要替換的 loader
        .loader('url-loader').tap(options = >{
            // 修改它的選項...
            options.fallback.options.name = 'img/micro_workbench-[name].[hash:5].[ext]'; //去除圖片hash
            // options.limit = 1024; //這是字節(Byte)限制，1KB = 1024Byte ,當圖片的大小小於 1KB ,則會被轉為 base64格式，打包進js文件，大於1KB,則會被打包進 img 文件夾，供鏈接請求獲取。 
            return options;
        }).end();
    }

    // css文件重命名
    css: {
        extract: {
            filename: 'css/micro_workbench-[name].[hash:5].css',
            chunkFilename: 'css/micro_workbench-[name].css',
        },
    },

    // js文件重命名
    configureWebpack: {
        output: {
            filename: 'js/micro_workbench-[name].[hash:5].js',
            chunkFilename: 'js/micro_workbench-[name].js'
        }
    }
}

效果