webpack 图片打包成base_webpack 打包背景图转 base64 - CSDN
精华内容
参与话题
  • 4. webpack处理图片资源

    2020-08-17 16:38:35
    file-loader:可以用来帮助webpack打包处理一系列的图片文件;比如:.png 、 .jpg 、.jepg等格式的图片。 url-loader:功能类似于 file-loader,但是在文件大小(单位 byte)低于指定的限制时,可以返回一个 ...

    常用的样式loader

    • file-loader:可以用来帮助webpack打包处理一系列的图片文件;比如:.png 、 .jpg 、.jepg等格式的图片。

    • url-loader:功能类似于 file-loader,但是在文件大小(单位 byte)低于指定的限制时,可以返回一个 DataURL。

    • html-loader:处理html中的img,结合url-loader可以将html中的img的路径正确打包

    • 注意点:因为url-loader默认使用es6模块化解析,而html-loader引入图片是commonjs,解析时会出现图片路径变为 [object Module],解决方法,关闭url-loader的es6模块化,使用commonjs解析。

    一般图片小于8k-12k都可以使用url-loader处理成base64的图片。url-loader基于file-loader。

    当图片大于自己设定limit的值时会自动交给file-loader处理。

    将图片使用base64处理的优点是减少请求数量(减轻服务器压力),缺点是图片的体积会变大(文件请求速度变慢)

    为什么html文件还需要html-loader处理:https://blog.csdn.net/logan_LG/article/details/82082442

    1. 安装 url-loader,file-loader, html-loader

      npm i url-loader file-loader html-loader -D
      
    2. 新建base.css文件,其中vue.jpg为5KB

      .angular{
      	width: 400px;
          height: 400px;
          background: url(./imgs/angular.jpg) no-repeat center;
      }
      .react{
      	width: 400px;
      	height: 400px;
          background: url(./imgs/react.png) no-repeat center;
      }
      .vue{
      	width: 400px;
          height: 400px;
          background: url(./imgs/vue.jpg) no-repeat center;
      }
      
    3. 在入口文件(src/index.js)文件夹中引入base.css文件

      import './base.css'
      
    4. 在src目录下创建index.html文件作为html-webpack-plugin的模板文件。

      <div class="angular"></div>
      <div class="react"></div>
      <div class="vue"></div>
      <img src="./imgs/angular.jpg" alt="">
      <!-- 被处理成base64 -->
      <img src="./imgs/vue.jpg" alt="">
      
    5. 在webpack配置文件webpack.config.js中设置

      const path = require('path');
      
      const HtmlWebpackPlugin = require('html-webpack-plugin')
      
      module.exports = {
          mode: 'development',
          entry: './src/index.js',
          output: {
              filename: 'built.js',
              path: path.resolve(__dirname, 'build')
          },
          module: {
              rules: [{ //处理css文件
                      test: /\.css$/,
                      //多个loader使用use加载,单个使用loader
                      use: ['style-loader', 'css-loader']
                  },
                  { //处理css/less等文件中的图片
                      test: /\.(png|jpg|gif)$/,
                      loader: 'url-loader',
                      options: {
                          //当图片小于8KB时,用url-loader处理,否则用file-loader处理
                          //配置过url-loader后就不用配置file-loader
                          limit: 8 * 1024,
                          name: '[hash:8].[ext]'
                          //如果html中的图片路径变为[object Module],则开启下边配置
                          //esModule: false
                      }
                  },
                  {
                      test: /\.html$/,
                      //处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
                      loader: 'html-loader'
                  }
              ]
          },
          plugins: [
              new HtmlWebpackPlugin({
                  template: './src/index.html'
              })
          ]
      }
      
    展开全文
  • webpack之html中的图片打包方案一:url-loader方案二:html-loader(推荐) 方案一:url-loader 安装url-loader,并在webpack的module.rules中加入配置如下: { test: /\.(png|jp?g|gif|svg|ico)$/, use: [ { ...


    方案一:url-loader

    安装url-loader,并在webpack的module.rules中加入配置如下:

    {
        test: /\.(png|jp?g|gif|svg|ico)$/,
        use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192,        // 小于8192字节的图片打包成base 64图片
                  name: 'images/[name].[hash:8].[ext]',
                  esModule: false,  
                  // 忽略esModule,html中的图片打包会出错,显示[object Module]
                  publicPath: ''
                }
              },
         ]
    },
    

    在html中使用如下方式引入图片地址:

    <img src="<%= require('../../assets/images/logo.png') %>" />
    


    方案二:html-loader(推荐)

    只用url-loader,图片的引入方式会显得有些繁琐。如果想要以html常规的方式引入图片,还需要安装一个html-loader插件,和url-loader配合使用。

    在url-loader下方,添加如下配置:

    {
        test: /\.(png|jp?g|gif|svg|ico)$/,
        use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192,        // 小于8192字节的图片打包成base 64图片
                  name: 'images/[name].[hash:8].[ext]',
                  esModule: false,  
                  // 忽略esModule,html中的图片打包会出错,显示[object Module]
                  publicPath: ''
                }
              },
         ]
    },
    {
       test: /\.html$/,
       use: {
           loader: "html-loader",
       }
    }
    

    这样,html就可以已常规方式引入图片啦。

    <img src="../../assets/images/logo.png" />
    
    展开全文
  • 我们知道,在打包图片的时候,名字是被file-loader重新命名过的。那如果我想使用图片本身的名字该怎么办呢?同样的,可以在webpack.config.js里配置。 const path = require('path'); module.exports ={ entry: '....

    占位符

    我们知道,在打包图片的时候,名字是被file-loader重新命名过的。那如果我想使用图片本身的名字该怎么办呢?同样的,可以在webpack.config.js里配置。

    const path = require('path');
    
    module.exports ={
        entry: './src/index.js',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
        mode: 'development',
        module: {
            rules: [
                {
                    test: /\.(webp|jpg|png)$/,
                    use:{
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]'
                        }
                }
            }]
        }
    };
    

    use字段内可以再定义一个options字段,这个字段对应的对象内有个name属性,值为[name].[ext]

    [name][ext]就是占位符,我们可以到Webpack官网看到fileloader的占位符的定义。

    在这里插入图片描述

    [name].[ext]的意思就是使用图片本身的文件名和拓展名。

    更改输出目录

    现在的配置,打包后的图片是默认放在配置文件中指定的输出目录之中的。那如果我想放到输出目录下的images文件中该怎么配置?

    答案就是在options内新增一个outputPath的字段,将值设置为images/

    const path = require('path');
    
    module.exports ={
        entry: './src/index.js',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
        mode: 'development',
        module: {
            rules: [
                {
                    test: /\.(webp|jpg|png)$/,
                    use:{
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images/'
                        }
                    }
            }]
        }
    };
    

    url-loader

    url-loader与之前使用的file-loader非常相像,它在options内没有设置limit之前是直接将图片变为base64的形式的。

    那么这样做有利也有弊,对于较小的图片,直接将其变为base64的形式写在JS文件之中有利于减少http请求,但是对于较大的图片,就会导致JS文件加载时间过长,页面长时间空白。

    于是我们能想到一个最佳的实践就是小图片转换成base64写在JS文件中,而大文件依旧是跟之前使用file-loader时一样。

    我们只需为options添加limit就可以做到这一点。limit的值是一个数字,代表了多少比特。当图片大小小于这个值时就会转换成base64。

    const path = require('path');
    
    module.exports ={
        entry: './src/index.js',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
        mode: 'development',
        module: {
            rules: [
                {
                    test: /\.(webp|jpg|png)$/,
                    use:{
                        loader: 'url-loader',
                        options: {
                            limit: 2048,
                            name: '[name].[ext]',
                            outputPath: 'images/'
                        }
                    }
                }
            ]
        }
    };
    
    展开全文
  • webpack打包图片资源说明

    千次阅读 2018-08-21 10:58:43
    npm run build打包后,一些图是转为base64了,一些是在static/img文件夹。 路径问题: 1、直接&lt;img :src=''&gt;引用修改方法: 首先修改config目录下的index.js文件,将其中build的配置项...

    npm run build打包后,一些图是转为base64了,一些是在static/img文件夹。

    路径问题:

    1、直接<img :src=''>引用修改方法:

    首先修改config目录下的index.js文件,将其中build的配置项assetsPublicPath进行修改,改为assetsPublicPath: './',目的是将资源文件的引入路径,改为相对地址(相对index.html)

     

    module.exports = {
      build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
        productionSourceMap: true,    
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],    
        bundleAnalyzerReport: process.env.npm_config_report
      },
      dev: {
        env: require('./dev.env'),
        port: 8080,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
          // 代理所有的以 /api 开头的请求到 http://172.69.8.48:8080
          '/api': {
            target: 'http://172.69.8.48:8080',
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        },    
        cssSourceMap: false
      }
    }
    assetsPublicPath: './',
        productionSourceMap: true,    
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],    
        bundleAnalyzerReport: process.env.npm_config_report
      },
      dev: {
        env: require('./dev.env'),
        port: 8080,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
          // 代理所有的以 /api 开头的请求到 http://172.69.8.48:8080
          '/api': {
            target: 'http://172.69.8.48:8080',
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        },    
        cssSourceMap: false
      }
    }
    

     

     

     

     

     

    2、css样式引用修改方法:

    此时的修改方法是,修改build文件夹中的utils.js文件,修改如下这一行:

     

    if (options.extract) {
          return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader',
            publicPath:'../../'
          })
        } else {
          return ['vue-style-loader'].concat(loaders)
        }publicPath:'../../'
          })
        } else {
          return ['vue-style-loader'].concat(loaders)
        }

     

     

     

     

     

    展开全文
  • limit = 后面跟的是数字,加上这个参数,图片文件大小(单位为byte)将小于8192byte的图片成base64编码的形式,减少http请求。2. name 是表示文件被处理之后再目录中的路径和图片生成规则3. 以下三个参数可以自由...
  • webpack打包图片显示问题

    千次阅读 2018-05-04 13:22:42
    test是正则匹配规则,匹配项目中所有的以正则规则结尾的格式的文件,然后通过url-loader进行处理,不大于10kb就会进行base64转码,就是将图片转为base65格式,如果超过10KB的图片就单独打包到utils.assetsPath(‘img...
  • webpack压缩图片

    千次阅读 2018-05-14 11:39:49
    通常用webpack打包时,会根据webpack.config.js 中url-loader中设置的limit大小来对图片进行处理,小于limit的图片转化成base64格式,其余的不做操作。对于比较大的图片我们可以用image-webpack-loader 来压缩图片。...
  • webpack打包css中背景图路径报错问题

    千次阅读 2018-02-27 14:43:52
    这是webpack打包后的图片存储路径 通过查找原因,我们可以在浏览器运行的HTML代码中发现,背景图的路径不正确,因此我们需要在webpack重新设置你的css-loader路径,只需要添加publicPath 公共路径即可。 limit,代
  • webpack.base.config.js webpack.config.js  webpack.production.js webpack.devserver.js webpack......... 查询了一下才知道:原来是随便命名的.......... 答案: 1.这些文件都是有什么不同 ,还是随意...
  • vue正常打包之后一些图片文件很大,使打包体积很大,通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积 step1:npm install image-webpack-loader --save-dev step2:在build/webpack.base.conf....
  • 图片处理 1.css背景图片的处理 我们设置一张图片背景 //a.css body { background: url(../images/timg.jpg) repeat-y; } #root { color: yellow; } 运行npm run dev,我们发现又报错,提示我们缺少一个...
  • webpack可以通过url-loader(file-loader)来完成对符合要求图片资源进行base64编码转换的功能。 参考文档:http://www.cnblogs.com/coco1s/p/4375774.html 下面直接上webpack.config(即通过url-loader的limit配置...
  • 早上遇到一个问题,项目有至少5个版本,希望通过给打包命令加一个参数就能打包对应版本。 process.env配置生产环境 在/config/目录下有prod.env.js、dev.env.js、test.env.js这三个分别是生产环境、开发环境、...
  • webpack自动压缩打包文件生成zip包

    千次阅读 2020-04-08 18:14:59
    应用场景 我们经常需要在执行npm run build之后把生成的static和index.html打包压缩一个压缩包发送给后端进行项目部署,每次都需要手动...在build/webpack.base.config.js里加上如下代码 const FileManagerWeb...
  • Vue项目中Webpack打包排除Element-UI

    千次阅读 2019-03-05 10:13:15
    1. webpack.base.conf.js 中 externals部分配置: externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'axios':'axios', 'element-ui': 'ElementUI', } 2. 在 main.js 中去除Vue.use(ElementUI) ...
  • webpack打包之后,图片无法显示问题

    千次阅读 2019-05-20 21:13:27
    编译打包之后,图片显示不出来? 若图片在公共css样式中引入,打包之后将css抽离,引入路径发生改变,故图片显示不出。 解决方法:将图片引入写在代码里面
  • 配置 webpack打包路径

    万次阅读 2018-11-17 15:12:32
    配置完成以后,直接在终端 输入 webpack 就会实现自动打包,小伙伴赶紧动手试一下 如果说 我们想要 我们一修改文件,不用我们手动打包,就想让我们 修改的文件生效 1、可以在 package.json 文件中配置 dev: webpa....
  • 打包好的项目部署到服务器,发现报错说图片找不到。 静态资源如js访问不到 分析并且解决问题 明确一点的就是,看到报错404,找不到静态资源,很明显,路径错误了。  静态资源找不到如js文件 资源打包路径...
  • webpack打包后的图片无法显示问题

    千次阅读 2020-03-19 00:16:48
    使用图片作为背景图片,用webpack(前端模块化打包工具)进行打包,结果背景图片没有显示出来。在终端输入命令后没有显示任何错误, 看到浏览器这里提示找不到背景图片的所在地址!!! 解决方案: webpack要将...
  • webpack面试题总结

    万次阅读 2018-11-10 11:49:00
    1.webpack打包原理 把所有依赖打包成一个 bundle.js 文件,通过代码分割单元片段并按需加载。 2.webpack的优势 (1) webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目...
1 2 3 4 5 ... 20
收藏数 14,792
精华内容 5,916
关键字:

webpack 图片打包成base