美文网首页
vue-cli4配置

vue-cli4配置

作者: 小米和豆豆 | 来源:发表于2021-10-10 11:57 被阅读0次
    const path = require("path");
    const resolve = dir => path.join(__dirname, dir);
    module.exports = {
      chainWebpack: config => {
            /* svg的配置 */
            const svgRule = config.module.rule("svg");
            svgRule.uses.clear();
            svgRule.exclude.add(/node_modules/);
            svgRule
                .test(/\.svg$/)
                .use("svg-sprite-loader")
                .loader("svg-sprite-loader")
                .options({
                    symbolId: "icon-[name]"
                });
            const imagesRule = config.module.rule("images");
            imagesRule.exclude.add(resolve("src/icons"));
            config.module.rule("images").test(/\.(png|jpe?g|gif|svg)(\?.*)?$/);
        // 添加别名
        config.resolve.alias
          .set("vue$", "vue/dist/vue.esm.js")
          .set("@", resolve("src"))
          .set("@assets", resolve("src/assets"))
      }
    };
     /* 生产环境图片进行压缩 */    
    if (process.env.NODE_ENV=='production') {
        config.module
            .rule("images")
            .use("image-webpack-loader")
            .loader("image-webpack-loader")
            .options({
                mozjpeg: { progressive: true, quality: 65 },
                optipng: { enabled: false },
                pngquant: { quality: [0.65, 0.9], speed: 4 },
                gifsicle: { interlaced: false }
                // webp: { quality: 75 }
            });
    }
    

    相关文章

      网友评论

          本文标题:vue-cli4配置

          本文链接:https://www.haomeiwen.com/subject/gnmywltx.html