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配置
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。
推荐阅读更多精彩内容
- 前言 最近在开发跨境电商项目的时候,要做一个广告宣传页,根据产品的要求希望广告宣传页面在独立域名下,但是领导又希望...
- 在实际开发中,我们需要将设计稿中的px转换成rem,然后再写入到样式中。postcss-px2rem可以帮助我们自...
- 在实际开发中,我们需要将设计稿中的px转换成rem,然后再写入到样式中。postcss-px2rem可以帮助我们自...
- 1、首先在index.html文件配置 2、将favicon.ico文件放在Public目录下 3、vue.con...