美文网首页webpack4
webpack4系列第四篇(图片处理)

webpack4系列第四篇(图片处理)

作者: Rosa_Lv | 来源:发表于2019-06-18 11:39 被阅读0次

    在前端开发中,一般会有三种方式来引用图片,我们假设在src目录下img文件夹下有一个logo.jpg的图片
    一种是在css中当作背景图引入:
    style.css(根目录下,项目结构看第二篇)

    body{
        background: url('./img/logo.jpg')
    }
    

    另一种是在js中通过创建Image标签再引入:
    index.js

    import logo from './img/logo.jpg'
    
    let img = new Image()
    img.src = logo
    
    

    第三种方式是在html标签中引入。

    <img src="./img/logo.jpg" alt="">
    

    如果不进行任何处理,在打包的时候这些图片文件是不会被打包的,以至于打包出来的图片找不到,下面看下该怎么处理。
    前两种方式用url-loader来处理,它会在内部生成一张图片,并返回图片文件名。
    安装:
    npm install url-loader file-loader
    在webpack.config.js里做一下配置:

      module: {
        rules: [
        ...
          {
            test: /\.(png|jpe?g|gif)$/,
            use: [
                {
                    test: /\.(png|jpe?g|gif)$/,
                    use: [
                      {
                        loader: 'url-loader',
                        options: {
                            //图片大小小于等于limit值,则会以base64形式加载,不会发请求,大于这个值则用file-loader加载
                            limit: 200*1024
                        },
                      },
                    ],
                },
            ],
          },
        ...
        ],
      },
    

    第三种需要用html-withimg-loader来处理,还是先安装,然后配置。
    npm install html-withimg-loader

      module: {
        rules: [
        ...
          {
            test: /\.(png|jpe?g|gif)$/,
            use: [
                {
                    test: /\.html$/,
                    use: [
                      {
                        loader: 'html-withimg-loader',
                        options: {},
                      },
                    ],
                },
            ],
          },
        ...
        ],
      },
    

    图片处理就写到这啦

    相关文章

      网友评论

        本文标题:webpack4系列第四篇(图片处理)

        本文链接:https://www.haomeiwen.com/subject/jzqzfctx.html