如何实现webpack图片转为base64

这篇文章将为大家详细讲解有关如何实现webpack图片转为base64，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

下载url-loader

 yarn add -D url-loadermodule: {  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.exportsconst path = require("path");let HtmlWebpackPlugin = require("html-webpack-plugin"); // 生成html模板const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 每次打包前,清除distconst MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 合并css// const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // 压缩cssconst CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin"); // 最新压缩cssconst TerserWebpackPlugin = require("terser-webpack-plugin"); // 压缩js 代替uglify 因为uglifyjs不支持es6语法，所以用terser-webpack-plugin替代uglifyjs-webpack-pluginconst 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就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。