webpack图片转为base64的实现示例

下载url-loader

 yarn add -D url-loader
module: {
  rules: [
       {
        test: /\.(jpeg|jpg|png|svg|gif)$/,
        use: {
          loader: 'url-loader', // 默认使用的是es6模块
          options: { // 配置
            esModule: false, // 使用common.js规范
            outputPath: 'images', // 输出的文件目录
            name: 'images/[contenthash:4].[ext]',
            limit: 20*1024 // 小于20k转为base64
          }
        }
      }
  ]
}

可以看到小图片被转为base64了

完整的代码

// webpack是基于node,所以使用module.exports
const path = require("path");

let HtmlWebpackPlugin = require("html-webpack-plugin"); // 生成html模板

const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 每次打包前,清除dist

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 合并css

// const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css

const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin"); // 最新压缩css

const TerserWebpackPlugin = require("terser-webpack-plugin"); // 压缩js 代替uglify 因为uglifyjs不支持es6语法,所以用terser-webpack-plugin替代uglifyjs-webpack-plugin

const webpack = require("webpack"); // 里边有个ProvidePlugin,可以提供全局的变量

const commonCssConfig = [ // 公共的css配置
  MiniCssExtractPlugin.loader,
  "css-loader",
  {
    loader: "postcss-loader",
    options: {
      //css兼容性配置
      postcssOptions: {
        plugins: [[require("postcss-preset-env")()]],
      },
    },
  },
];
// 公共的babel转码器配置
const babelConfig = {
  loader: 'babel-loader',
  options: {
    presets: [
      "@babel/preset-env"
    ],
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      ["@babel/plugin-proposal-class-properties"]
    ]
  }
}
// 公共的plugin插件配置
const commonPlugin = [
  // html-webpack-plugin
  new HtmlWebpackPlugin({
    template: "./src/index.html", // 指定模板
    filename: "index.html", // 指定输出的文件名
  }),
  // new HtmlWebpackPlugin({ // 多模板
  //   template: './src/index.html', // 指定模板
  //   filename: 'main.html', // 指定输出的文件名
  // }),
  // clean-webpack-plugin
  new CleanWebpackPlugin(), // 使用这个插件在每次生成dist目录前,先删除dist目录

  // mini-css-extract-plugin
  new MiniCssExtractPlugin({
    // 抽取css放在公共文件夹
    filename: "css/[name].[hash:4].css", // 合并css的公共文件
  }),
  // css-minimizer-webpack-plugin
  new CssMinimizerWebpackPlugin(), // 新版压缩css

  // terser-webpack-plugin
  new TerserWebpackPlugin({
    // 压缩js
    test: /\.js(\?.*)?$/i, //匹配参与压缩的文件
    parallel: true, //使用多进程并发运行
    terserOptions: {
      //Terser 压缩配置
      output: { comments: false },
      compress: {
        // pure_funcs: ["console.log"], // 去除console.log
      },
    },
    extractComments: true, //将注释剥离到单独的文件中
  }),
  // 注入全局变量,在全局中使用,不需要引入
  new webpack.ProvidePlugin({
    $:"jquery"
  })
]

module.exports = {
  // 老版压缩css
  // optimization: {
  //   minimizer: [new OptimizeCssAssetsWebpackPlugin]
  // },
  // 入口配置
  entry: "./src/index.js",
  // 模式配置
  mode: "production", // 指定模式,默认是生产模式,开发模式便于查看代码
  // 出口配置
  output: {
    path: path.resolve(__dirname, "dist"), // __dirname 代表的是根目录  M:\47-webpack-study\01-webpack\dist
    filename: "js/[name].[hash:4].js", // 指定输出的文件名 // [name]是动态名字,加上hash值,避免缓存,默认是20位的hash值
    /*
     hash的作用:
     比如第一次打包的时候,文件会被浏览器缓存下来
     第二次打包的时候,如果文件名不变,浏览器不会下载最新的代码,所以hash就有作用了
     hash也叫做内容hash值,只要内容发生该变,hash就会变,就不会被缓存下来,时刻保持更新的状态
    */
  },
  // webpack-dev-server配置
  devServer: {
    host: "localhost", // 主机
    port: "9527", // 端口
    open: true, // 自动打开
    historyApiFallback: true, //找不到页面默认跳index.html
    compress: true, //一切服务都启用gzip 压缩
    hot: true, //启动热更新
    proxy: {
      // 代理配置
      "/api": {
        target: "http:localhost:5000",
        changeOrigin: true,
      },
    },
  },
  // 装载器配置
  module: {
    rules: [
      {
        test: /\.html$/,
        use: 'html-withimg-loader', //在html中使用图片的插件
       },
      {
        test: /\.js$/,
        use: babelConfig // babel转码器配置
      },
      {
        test: /\.css$/,
        use: [...commonCssConfig], // css顺序是从右到左,从下到上
      },
      {
        test: /\.less$/,
        use: [...commonCssConfig,'less-loader'], // less顺序是从右到左,从下到上
      },
      {
        test: /\.scss$/,
        use: [...commonCssConfig,"sass-loader"], // sass顺序是从右到左,从下到上
      },
      // {
      //   test: /\.(jpeg|jpg|png|svg|gif)$/,
      //   use: {
      //     loader: 'file-loader', // 默认使用的是es6模块
      //     options: { // 配置
      //       esModule: false, // 使用common.js规范
      //       outputPath: 'images', // 输出的文件目录
      //       name: 'images/[contenthash:4].[ext]',
      //     }
      //   }
      // }
      {
        test: /\.(jpeg|jpg|png|svg|gif)$/,
        use: {
          loader: 'url-loader', // 默认使用的是es6模块
          options: { // 配置
            esModule: false, // 使用common.js规范
            outputPath: 'images', // 输出的文件目录
            name: 'images/[contenthash:4].[ext]',
            limit: 20*1024 // 小于20k转为base64
          }
        }
      }
    ],
  },
  // 插件配置
  plugins: [...commonPlugin],
  // 排除第三方包
  externals: {
    jquery: '$',
  }
};

Webpack中设置图片不转base64格式

在开发过程中,图片转成base64是常有的事,如上传图片,但是有些情况下确不希望将图片转成base64,因为转成base64后图片不容易区分,也就不能根据图片名称去做一些其它的操作,那么如何才能在Webpack中禁止图片转成base64呢?

其实很简单,只需要修改Webpack的配置文件webpack.base.conf.js即可,将里面module下的rules中的图片处理的 options 的 limit改为1,如下图所示。

到此这篇关于webpack图片转为base64的实现示例的文章就介绍到这了,更多相关webpack图片转为base64内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 浅谈webpack打包过程中因为图片的路径导致的问题

    最近在制作一个自己的个人博客的时候遇到这么一个问题, 在CSS中使用了相对路径来充当背景图片, 如下所示: 然后将整个工程使用webpack打包之后, 在浏览器上运行却报错了, 报错如下: 也就是说, 打包之后这个图片文件找不到了, 那么原因出在哪里呢? 先来看一下我在webpack.config.js文件中的配置: 在这里其实我的loader并没有使用错误的, 图片对应的就是使用url-loader来处理. 那么再来看一下通过webpack打包之后的目录: 发现dist文件夹中出现了我们想要打

  • webpack之引入图片的实现及问题

    前言: 本文演示了 webpack如何在css文件中引入图片: webpack如何在html中引入图片: 需要安装配置的loader: file-loader; 为何要使用file-loader: 如果我们希望在页面引入图片(包括img的src和background的url).当我们基于webpack进行开发时,引入图片会遇到一些问题. 其中一个就是引用路径的问题.拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路

  • 浅谈webpack4 图片处理汇总

    本次课程的代码目录(如下图所示): >>> 本节课源码 >>> 所有课程源码 本节课会讲述 webpack4 中的图片常用的基础操作: 图片处理 和 Base64编码 图片压缩 合成雪碧图 1. 准备工作 如项目代码目录展示的那样,除了常见的 app.js 作为入口文件,我们将用到的 3 张图片放在 /src/assets/img/ 目录下,并在样式文件 base.css 中引用这些图片. 剩下的内容交给 webpack 打包处理即可.样式文件和入口 js 文件的代码分

  • webpack打包后直接访问页面图片路径错误的解决方法

    前言 本文说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误.当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误. 先看我的项目代码 webpack.config.js var Webpack = require("webpack"); var path = require("path"); module.exports = { entry: './js/entry.js', output:

  • 浅谈用Webpack路径压缩图片上传尺寸获取的问题

    问题的起因是因为的我的图片大小大于url-loader 的尺寸标准,导致webpack自动将图片的路径做了压缩处理,直接导致了我在获取dom的value的时候无法正确的获取到图片的正确路径. 直接上解决的方法. picUpload(e) { let image = new Image(); const reader = new FileReader(); const $img = e.target.files[0]; const formData = new FormData(); formDa

  • webpack配置打包后图片路径出错的解决

    问题 项目在开发环境下工作正常,当打包后图片不见了,检查元素后发现路径出错了. 图片路径是这样:background: url(/static/img/bg_camera_tip.bd37151.png),但该路径下文件并不存在. 打包后文件目录如下: 可以看到背景图片的路径应该是../../static而实际却是/static,找到原因后就好解决了 方法一 查看build目录下webpack.base.conf.js的配置,图片文件会经过url-loader处理. module: { rule

  • 详解webpack之图片引入-增强的file-loader:url-loader

    前言: 本文介绍了url-loader(增强的file-loader): url-loader作用:根据需求选择性的把某些小图片编码成base64格式写进页面:从而减少服务器请求.优化性能. url-loader解决的问题: 如果图片较多,会发很多http请求,会降低页面性能.url-loader会将引入的图片编码,生成dataURl.相当于把图片数据翻译成一串字符.再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了.当然,如果图片较大,编码会消耗性能.因此url-loader提供了

  • webpack图片转为base64的实现示例

    下载url-loader yarn add -D url-loader module: { rules: [ { test: /\.(jpeg|jpg|png|svg|gif)$/, use: { loader: 'url-loader', // 默认使用的是es6模块 options: { // 配置 esModule: false, // 使用common.js规范 outputPath: 'images', // 输出的文件目录 name: 'images/[contenthash:4].

  • java将图片转为base64返回给前端

    本文实例为大家分享了java将图片转为base64返回给前端的具体代码,供大家参考,具体内容如下 一.controller端代码 @RequestMapping(value = "/captcha") public void imagecode(HttpServletRequest request, HttpServletResponse response) throws Exception { JSONObject object = new JSONObject(); Captcha

  • Django 实现将图片转为Base64,然后使用json传输

    最近使用Django来进行图像的传输,由于要求需要使用Json格式进行请求,所以我们尝试了二进制编码放在json里,发现bytes格式不能打入json,于是转为了base64 将图片转为json 图片转为json有2中方法,一个是二进制后再转,一个是转为矩阵以后再转. import base64 import cv2 #通过opencv转base64 img_im= cv2.imread("D://32.png") aa=base64.b64encode(cv2.imencode('.

  • weui上传多图片,压缩,base64编码的示例代码

    记录一下在做一个报修功能的心路历程,需求功能很简单,一个表单提交,表单包含简单的文字字段以及图片 因为使用的是weui框架,前面的话去找weui的表单和图片上传组件,说实话,weui的组件写的还不错,作为一个不太懂前端的渣渣可以拿来开箱即用 主要是不用调那么多的样式问题,直接上代码: <div class="weui-cell"> <div class="weui-cell__bd"> <div class="weui-upl

  • java 图片与base64相互转化的示例

    需要导入: import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.util.UUID; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; /** * 图片转

  • C#实现字符串与图片的Base64编码转换操作示例

    本文实例讲述了C#实现字符串与图片的Base64编码转换操作.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; using System.IO; using System.Drawing

  • 利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解

    将图片转为base64的好处 将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页.编辑器中. 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地方. 将图片转换成base64编码的,在web网上一般用于小图片上,不仅可以减少图片的请求数量(集合到js.css代码中),还可以防止因为一些相对路径等问题导致图片404错误. 引言 假设一个应用场景:由于某些特殊原因从服务端请求到图片路径,要求通过该路径获取对应图片的 base64 dataURL

  • 解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题

    vue-quill-editor是个较为轻量级富文本框,相较于ueditor,开发更编辑,更加直观,如果大家伙在需求允许的情况下,还是会比较建议使用vue-quill-editor. vue-quill-editor的使用方法在这边就不多说了,大家网上查下,一抓一大把 但是在使用vue-quill-editor有一个致命的问题,vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大,即使图片不大,只要图片较为多,篇幅较长,富

  • js实现把图片的绝对路径转为base64字符串、blob对象再上传

    主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: 使用canvas.toDataURL()方法将图片的绝对路径转换为base64编码. 具体用法: 在这我们引用淘宝服务器上的一张图片举例: var imgSrc = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.j

  • Vue 设置图片不转为base64的方式

    目录 Vue设置图片不转为base64 vue-cli 3 .vue-cli 4  版本 vue-cli 2 版本 Vue项目base64转img 输入框 效果展示 Vue设置图片不转为base64 在使用 Vue.js 框架开发项目时,vue-cli创建的webpack模板默认会将10K以下的图片和字体文件转为base64. 好处:带来了更快的渲染,不会因为页面切换时还有加载图片的延迟感. 坏处:打包后的CSS,JS文件非常大,特别是图片数量多的情况下,这个问题尤为明显. vue-cli 3

随机推荐