下載url-loader

 yarn add -D url-loader
module: {
  rules: [
       {
        test: /\.(jpeg|jpg|png|svg|gif)$/,use: {
          loader: 'url-loader',// 預設使用的是es6模組
          options: { // 配置 
            esModule: false,// 使用common.規範
            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 MiniExtractPlugin = require("mini-css-extract-plugin"); // 合併css

// const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // 壓縮css

const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin"); // 最新壓縮c
 
ss

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: "./www.cppcns.com
 
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({
    $:""
  })
]

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$/,"sass-loader"],// sass順序是從右到左，從下到上
      },// {
      //   tehttp://www.cppcns.comst: /\.(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-loadwww.cppcns.comer',// 使用common.js規範
            outputPath: 'images',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內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！