vue cli3配置image-webpack-loader方式

目录
  • vue cli3配置image-webpack-loader
  • 使用image-webpack-loader压缩图片报错

vue cli3配置image-webpack-loader

vue cli3配置image-webpack-loader对图片进行压缩优化

安装

npm install image-webpack-loader --save-dev

配置vue.config.js

chainWebpack: config => {
    config.plugins.delete('prefetch')
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }])
    config.module.rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: true })
  }

重启项目打包 ok

使用image-webpack-loader压缩图片报错

安装：请一定使用淘宝镜像cnpm安装，否则安装的包是不完整的

如果之前使用了npm安装，请先卸载再重新安装

$ cnpm install image-webpack-loader --save-dev

配置：vue.config.js

chainWebpack: config => {
        const imagesRule = config.module.rule('images')
        imagesRule
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
                bypassOnDebug: true
            })
            .end()
    },

报了莫名其妙的错：

Error: ‘[项目目录]\node_modules\pngquant-bin\vendor\pngquant.exe’ �����ڲ����ⲿ���Ҳ���ǿ����еij���

解决方法：

卸载了再重新安装image-webpack-loader

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue-cli脚手架中webpack配置方法

    什么是webpack webpack是一个module bundler(模块打包工具),所谓的模块就是在平时的前端开发中,用到一些静态资源,如JavaScript.CSS.图片等文件,webpack就将这些静态资源文件称之为模块 webpack支持AMD和CommonJS,以及其他的一些模块系统,并且兼容多种JS书写规范,可以处理模块间的以来关系,所以具有更强大的JS模块化的功能,它能对静态资源进行统一的管理以及打包发布,在官网中用这张图片介绍: 它在很多地方都能替代Grunt和Gulp,因为它

  • vue打包通过image-webpack-loader插件对图片压缩优化操作

    vue正常打包之后一些图片文件很大,使打包体积很大,通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积 step1: npm install image-webpack-loader --save-dev step2: 在build/webpack.base.conf.js中改如下配置 module.exports = { module: { { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // loader: 'url-loa

  • 在vue中使用image-webpack-loader实例

    首先打开 webpack.base.confi.js 提示:在这里url-loader 和 image-webpack-loader 不能一起使用,否则会导致图片出不来 接着找到 module: { rules: [ {}... ] } 在这里写入,一定要先写 'file-loader' 才能使用 'image-webpack-loader' 有各种配置,可以调整你要压缩后图片的质量 提示:如果使用了 webp 会大大减少体积,但是ios并不支持这个格式,会导致在ios上看不见图片 { test

  • vue cli3配置image-webpack-loader方式

    vue cli3配置image-webpack-loader方式

    目录 vue cli3配置image-webpack-loader 使用image-webpack-loader压缩图片报错 vue cli3配置image-webpack-loader vue cli3配置image-webpack-loader对图片进行压缩优化 安装 npm install image-webpack-loader --save-dev 配置vue.config.js chainWebpack: config => {     config.plugins.delete('

  • vue cli3 配置 stylus全局变量的使用方式

    目录 vue cli3配置stylus全局变量 vue cli3使用stylus全局变量 vue cli3配置stylus全局变量 首先在common.styl文件中写一些常用的css变量,方便全局使用,避免重复代码. 预想的是在main.js中引入common.styl文件,然后所有的.vue文件就都可以使用了.但是事与愿违,根本不起作用. 网络上有很多教程,但是都不起作用(找答案是个痛苦且漫长的过程),下面是总结的代码,基本开箱即用,希望能帮助到需要帮助的人. // vue.config.j

  • vue cli3 配置proxy代理无效的解决

    vue cli3 创建的vue项目配置开发环境代理无效,网上的各种配置都试了,还是不行,最后终于试出来一种配置方法 vue.config.js配置如下内容(不要配置任何多余的选项,什么changOrigin pathRewrite 之类的东西都不要配): module.exports = { devServer: { proxy:"http://127.0.0.1:8081", port: 8085 } } axios访问的时候不要配置任何东西,axios里访问的url不需要加任何前缀

  • 详解Vue CLI3配置解析之css.extract

    大家还记得我们在老版本中,对于线上环境配置中会把所有的 css 多打成一个文件: 核心是使用了插件 extract-text-webpack-plugin,方式如下: 第一步都是加载插件 const ExtractTextPlugin = require('extract-text-webpack-plugin') 这个插件的描述如下: Extract text from a bundle, or bundles, into a separate file. 然后配置如下:(省去了 rules

  • Vue 简单配置公用接口地址方式

    目录 简单配置公用接口地址 首先配置 package.json 文件下的配置 .env.build 和 .env.test 文件 vue.config.js 文件配置 vue接口路径配置 创建文件 axios获取json文件内容 简单配置公用接口地址 有时候需要本地和线上需要不同的接口地址, 这个时候可以根据 npm run build 判断 首先配置 先新建一个 config.js 的文件 开发环境: 说明在本地测试的时候链接的地址 测试环境: 说明是根据 npm run test 进行判断

  • 详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计

    执行 npm run build 之后的 dist 目录的静态资源的文件名多会追加上 hash 值,比如: page1.f151b4d3.js 那如果不要 hash 呢,你只需要配置 vue.config.js 文件中的 filenameHashing 官方文档也提到了因为 html 也是我们通过插件生成的,静态资源直接就 inject 进去的,所以,当 html 不是自动生成或者其他情况时候,就不能加 hash 了,可以配置 false. filenameHashing: false 我们看看

  • Vue CLI3 开启gzip压缩文件的方式

    gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件: npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里,可在 vue.config.js 中按照如下方式进行配置: 压缩前后大小大致如下: 生成的压缩文件以.gz

  • Vue项目配置跨域访问和代理proxy设置方式

    在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题.有2种常用的解决方案 后端设置允许跨域访问 前端通过代理进行访问后端 下面我们只说说如何配置vue-cli代理访问: vue-cli代理 最简单就是配置vue conifg进行实现 下面配置3个请求的后端,分别是: 请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/* 请求http://localhost:4201/portalapi/*会代理请求ht

  • 配置vue全局方法的两种方式实例

    目录 1,前言 2,第一种方式 3,第二种方式 总结 1,前言 在Vue项目开发中,肯定会有这样一个场景:在不同的组件页面用到同样的方法,比如格式化时间,文件下载,对象深拷贝,返回数据类型,复制文本等等.这时候我们就需要把常用函数抽离出来,提供给全局使用.那如何才能定义一个工具函数类,让我们在全局环境中都可以使用呢?请看下文分解. PS:本文vue为2.6.12 2,第一种方式 直接添加到Vue实例原型上 首先打开main.js,通过import引入定义的通用方法utils.js文件,然后使用V

  • vue项目中运用webpack动态配置打包多种环境域名的方法

    在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法.(欢迎纠错,谢谢.) 1. 安装插件 cross-env,npm install cross-env --save -dev,用于配置命令行输入命令. 2. 修改package.json里的script命令: 配置了test(测试),ready(预发布),prod(正式)三种环境,npm run build 默认设置成 npm run build:p

随机推荐