如何實(shí)現(xiàn)webpack圖片轉(zhuǎn)為base64

這篇文章將為大家詳細(xì)講解有關(guān)如何實(shí)現(xiàn)webpack圖片轉(zhuǎn)為base64，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

下載url-loader

 yarn add -D url-loader
module: {
  rules: [
       {
        test: /\.(jpeg|jpg|png|svg|gif)$/,
        use: {
          loader: 'url-loader', // 默認(rèn)使用的是es6模塊
          options: { // 配置 
            esModule: false, // 使用common.js規(guī)范
            outputPath: 'images', // 輸出的文件目錄
            name: 'images/[contenthash:4].[ext]',
            limit: 20*1024 // 小于20k轉(zhuǎn)為base64
          }
        }
      }
  ]
}

可以看到小圖片被轉(zhuǎn)為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 因?yàn)閡glifyjs不支持es6語(yǔ)法，所以用terser-webpack-plugin替代uglifyjs-webpack-plugin

const webpack = require("webpack"); // 里邊有個(gè)ProvidePlugin,可以提供全局的變量

const commonCssConfig = [ // 公共的css配置
  MiniCssExtractPlugin.loader,
  "css-loader",
  {
    loader: "postcss-loader",
    options: {
      //css兼容性配置
      postcssOptions: {
        plugins: [[require("postcss-preset-env")()]],
      },
    },
  },
];
// 公共的babel轉(zhuǎn)碼器配置
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(), // 使用這個(gè)插件在每次生成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, //使用多進(jìn)程并發(fā)運(yùn)行
    terserOptions: {
      //Terser 壓縮配置
      output: { comments: false },
      compress: {
        // pure_funcs: ["console.log"], // 去除console.log
      },
    },
    extractComments: true, //將注釋剝離到單獨(dú)的文件中
  }),
  // 注入全局變量，在全局中使用，不需要引入
  new webpack.ProvidePlugin({
    $:"jquery"
  })
]

module.exports = {
  // 老版壓縮css
  // optimization: {
  //   minimizer: [new OptimizeCssAssetsWebpackPlugin]
  // },
  // 入口配置
  entry: "./src/index.js",
  // 模式配置
  mode: "production", // 指定模式，默認(rèn)是生產(chǎn)模式，開發(fā)模式便于查看代碼
  // 出口配置
  output: {
    path: path.resolve(__dirname, "dist"), // __dirname 代表的是根目錄  M:\47-webpack-study\01-webpack\dist
    filename: "js/[name].[hash:4].js", // 指定輸出的文件名 // [name]是動(dòng)態(tài)名字,加上hash值，避免緩存,默認(rèn)是20位的hash值
    /* 
     hash的作用：
     比如第一次打包的時(shí)候，文件會(huì)被瀏覽器緩存下來(lái)
     第二次打包的時(shí)候，如果文件名不變，瀏覽器不會(huì)下載最新的代碼，所以hash就有作用了
     hash也叫做內(nèi)容hash值，只要內(nèi)容發(fā)生該變，hash就會(huì)變,就不會(huì)被緩存下來(lái)，時(shí)刻保持更新的狀態(tài)
    */
  },
  // webpack-dev-server配置
  devServer: {
    host: "localhost", // 主機(jī)
    port: "9527", // 端口
    open: true, // 自動(dòng)打開
    historyApiFallback: true, //找不到頁(yè)面默認(rèn)跳index.html
    compress: true, //一切服務(wù)都啟用gzip 壓縮
    hot: true, //啟動(dòng)熱更新
    proxy: {
      // 代理配置
      "/api": {
        target: "http:localhost:5000",
        changeOrigin: true,
      },
    },
  },
  // 裝載器配置
  module: {
    rules: [
      {
        test: /\.html$/,
        use: 'html-withimg-loader', //在html中使用圖片的插件
       },
      {
        test: /\.js$/,
        use: babelConfig // babel轉(zhuǎn)碼器配置
      },
      {
        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', // 默認(rèn)使用的是es6模塊
      //     options: { // 配置 
      //       esModule: false, // 使用common.js規(guī)范
      //       outputPath: 'images', // 輸出的文件目錄
      //       name: 'images/[contenthash:4].[ext]',
      //     }
      //   }
      // }
      {
        test: /\.(jpeg|jpg|png|svg|gif)$/,
        use: {
          loader: 'url-loader', // 默認(rèn)使用的是es6模塊
          options: { // 配置 
            esModule: false, // 使用common.js規(guī)范
            outputPath: 'images', // 輸出的文件目錄
            name: 'images/[contenthash:4].[ext]',
            limit: 20*1024 // 小于20k轉(zhuǎn)為base64
          }
        }
      }
    ],
  },
  // 插件配置
  plugins: [...commonPlugin],
  // 排除第三方包
  externals: {
    jquery: '$',
  }
};

Webpack中設(shè)置圖片不轉(zhuǎn)base64格式

在開發(fā)過程中，圖片轉(zhuǎn)成base64是常有的事，如上傳圖片，但是有些情況下確不希望將圖片轉(zhuǎn)成base64，因?yàn)檗D(zhuǎn)成base64后圖片不容易區(qū)分，也就不能根據(jù)圖片名稱去做一些其它的操作，那么如何才能在Webpack中禁止圖片轉(zhuǎn)成base64呢？

其實(shí)很簡(jiǎn)單，只需要修改Webpack的配置文件webpack.base.conf.js即可，將里面module下的rules中的圖片處理的 options 的 limit改為1，如下圖所示。

關(guān)于如何實(shí)現(xiàn)webpack圖片轉(zhuǎn)為base64就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。