耀极客论坛

 找回密码
 立即注册
查看: 426|回复: 0

webpack图片转为base64的实现示例

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 01:43:30 | 显示全部楼层 |阅读模式
  在开发过程中,图片转成base64是常有的事,本文主要介绍了webpack图片转为base64的实现示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
下载url-loader
  1. yarn add -D url-loader
  2. module: {
  3.   rules: [
  4.        {
  5.         test: /\.(jpeg|jpg|png|svg|gif)$/,
  6.         use: {
  7.           loader: 'url-loader', // 默认使用的是es6模块
  8.           options: { // 配置
  9.             esModule: false, // 使用common.js规范
  10.             outputPath: 'images', // 输出的文件目录
  11.             name: 'images/[contenthash:4].[ext]',
  12.             limit: 20*1024 // 小于20k转为base64
  13.           }
  14.         }
  15.       }
  16.   ]
  17. }
复制代码
  可以看到小图片被转为base64了


完整的代码
  1. // webpack是基于node,所以使用module.exports
  2. const path = require("path");
  3. let HtmlWebpackPlugin = require("html-webpack-plugin"); // 生成html模板
  4. const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 每次打包前,清除dist
  5. const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 合并css
  6. // const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css
  7. const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin"); // 最新压缩css
  8. const TerserWebpackPlugin = require("terser-webpack-plugin"); // 压缩js 代替uglify 因为uglifyjs不支持es6语法,所以用terser-webpack-plugin替代uglifyjs-webpack-plugin
  9. const webpack = require("webpack"); // 里边有个ProvidePlugin,可以提供全局的变量
  10. const commonCssConfig = [ // 公共的css配置
  11.   MiniCssExtractPlugin.loader,
  12.   "css-loader",
  13.   {
  14.     loader: "postcss-loader",
  15.     options: {
  16.       //css兼容性配置
  17.       postcssOptions: {
  18.         plugins: [[require("postcss-preset-env")()]],
  19.       },
  20.     },
  21.   },
  22. ];
  23. // 公共的babel转码器配置
  24. const babelConfig = {
  25.   loader: 'babel-loader',
  26.   options: {
  27.     presets: [
  28.       "@babel/preset-env"
  29.     ],
  30.     "plugins": [
  31.       ["@babel/plugin-proposal-decorators", { "legacy": true }],
  32.       ["@babel/plugin-proposal-class-properties"]
  33.     ]
  34.   }
  35. }
  36. // 公共的plugin插件配置
  37. const commonPlugin = [
  38.   // html-webpack-plugin
  39.   new HtmlWebpackPlugin({
  40.     template: "./src/index.html", // 指定模板
  41.     filename: "index.html", // 指定输出的文件名
  42.   }),
  43.   // new HtmlWebpackPlugin({ // 多模板
  44.   //   template: './src/index.html', // 指定模板
  45.   //   filename: 'main.html', // 指定输出的文件名
  46.   // }),
  47.   // clean-webpack-plugin
  48.   new CleanWebpackPlugin(), // 使用这个插件在每次生成dist目录前,先删除dist目录
  49.   // mini-css-extract-plugin
  50.   new MiniCssExtractPlugin({
  51.     // 抽取css放在公共文件夹
  52.     filename: "css/[name].[hash:4].css", // 合并css的公共文件
  53.   }),
  54.   // css-minimizer-webpack-plugin
  55.   new CssMinimizerWebpackPlugin(), // 新版压缩css
  56.   // terser-webpack-plugin
  57.   new TerserWebpackPlugin({
  58.     // 压缩js
  59.     test: /\.js(\?.*)?$/i, //匹配参与压缩的文件
  60.     parallel: true, //使用多进程并发运行
  61.     terserOptions: {
  62.       //Terser 压缩配置
  63.       output: { comments: false },
  64.       compress: {
  65.         // pure_funcs: ["console.log"], // 去除console.log
  66.       },
  67.     },
  68.     extractComments: true, //将注释剥离到单独的文件中
  69.   }),
  70.   // 注入全局变量,在全局中使用,不需要引入
  71.   new webpack.ProvidePlugin({
  72.     $:"jquery"
  73.   })
  74. ]
  75. module.exports = {
  76.   // 老版压缩css
  77.   // optimization: {
  78.   //   minimizer: [new OptimizeCssAssetsWebpackPlugin]
  79.   // },
  80.   // 入口配置
  81.   entry: "./src/index.js",
  82.   // 模式配置
  83.   mode: "production", // 指定模式,默认是生产模式,开发模式便于查看代码
  84.   // 出口配置
  85.   output: {
  86.     path: path.resolve(__dirname, "dist"), // __dirname 代表的是根目录  M:\47-webpack-study\01-webpack\dist
  87.     filename: "js/[name].[hash:4].js", // 指定输出的文件名 // [name]是动态名字,加上hash值,避免缓存,默认是20位的hash值
  88.     /*
  89.      hash的作用:
  90.      比如第一次打包的时候,文件会被浏览器缓存下来
  91.      第二次打包的时候,如果文件名不变,浏览器不会下载最新的代码,所以hash就有作用了
  92.      hash也叫做内容hash值,只要内容发生该变,hash就会变,就不会被缓存下来,时刻保持更新的状态
  93.     */
  94.   },
  95.   // webpack-dev-server配置
  96.   devServer: {
  97.     host: "localhost", // 主机
  98.     port: "9527", // 端口
  99.     open: true, // 自动打开
  100.     historyApiFallback: true, //找不到页面默认跳index.html
  101.     compress: true, //一切服务都启用gzip 压缩
  102.     hot: true, //启动热更新
  103.     proxy: {
  104.       // 代理配置
  105.       "/api": {
  106.         target: "http:localhost:5000",
  107.         changeOrigin: true,
  108.       },
  109.     },
  110.   },
  111.   // 装载器配置
  112.   module: {
  113.     rules: [
  114.       {
  115.         test: /\.html$/,
  116.         use: 'html-withimg-loader', //在html中使用图片的插件
  117.        },
  118.       {
  119.         test: /\.js$/,
  120.         use: babelConfig // babel转码器配置
  121.       },
  122.       {
  123.         test: /\.css$/,
  124.         use: [...commonCssConfig], // css顺序是从右到左,从下到上
  125.       },
  126.       {
  127.         test: /\.less$/,
  128.         use: [...commonCssConfig,'less-loader'], // less顺序是从右到左,从下到上
  129.       },
  130.       {
  131.         test: /\.scss$/,
  132.         use: [...commonCssConfig,"sass-loader"], // sass顺序是从右到左,从下到上
  133.       },
  134.       // {
  135.       //   test: /\.(jpeg|jpg|png|svg|gif)$/,
  136.       //   use: {
  137.       //     loader: 'file-loader', // 默认使用的是es6模块
  138.       //     options: { // 配置
  139.       //       esModule: false, // 使用common.js规范
  140.       //       outputPath: 'images', // 输出的文件目录
  141.       //       name: 'images/[contenthash:4].[ext]',
  142.       //     }
  143.       //   }
  144.       // }
  145.       {
  146.         test: /\.(jpeg|jpg|png|svg|gif)$/,
  147.         use: {
  148.           loader: 'url-loader', // 默认使用的是es6模块
  149.           options: { // 配置
  150.             esModule: false, // 使用common.js规范
  151.             outputPath: 'images', // 输出的文件目录
  152.             name: 'images/[contenthash:4].[ext]',
  153.             limit: 20*1024 // 小于20k转为base64
  154.           }
  155.         }
  156.       }
  157.     ],
  158.   },
  159.   // 插件配置
  160.   plugins: [...commonPlugin],
  161.   // 排除第三方包
  162.   externals: {
  163.     jquery: '$',
  164.   }
  165. };
复制代码
Webpack中设置图片不转base64格式
  在开发过程中,图片转成base64是常有的事,如上传图片,但是有些情况下确不希望将图片转成base64,因为转成base64后图片不容易区分,也就不能根据图片名称去做一些其它的操作,那么如何才能在Webpack中禁止图片转成base64呢?
  其实很简单,只需要修改Webpack的配置文件webpack.base.conf.js即可,将里面module下的rules中的图片处理的 options 的 limit改为1,如下图所示。

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


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 19:06 , Processed in 0.083354 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表