logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

webpack 处理图片资源

 昵称70680357 2020-07-01

图片的引入方式

图片是前端项目必不可少的静态资源，在日常开发中，我们可能会在下面三种情况使用图片：

1.HTML 中通过img标签等方式引入；

2.CSS 中通过src等方式引入；

3.JavaScript 中使用图片的 URL 或者内容（比如 Canvas 等）；

最笨最直接的方式就是直接写死线上的地址，例如在页面中，我们引入 如下:

<img src=”http://cdn./public/logo.png” />

上面地址的是一个 CDN 静态域名，后面是我们完整的路径，这样我们上线的时候地址就可以直接看了，我们线下开发的时候可以提前将静态资源打包好上传到线上。这样操作想想就很费劲，而且 CDN 每次静态资源更新都要需要刷新缓存，如果我们使用 MD5 命名图片的时候就更麻烦了。

我们在 Webpack 中，则可以使用 loader 的方式完成图片的引入。例如在 CSS 文件中，直接相对路径使用背景图片：

.bg-img{
    backgroud: url('./public/logo.png') no-repeat;
}

在 HTML 中也可以直接使用相对路径：

<img src=”./public/logo.png” />

还记得我们之前学过的resolve.alias方式创建一个目录的alias引用，这种方式不仅仅可以在 JavaScript 中使用，在 HTML 和 CSS 中也可以使用的：

// webpack.config.js
module.exports = {
    resolve: {
        alias: {
            '@assets': Path2D.resolve('./src/assets')
        }
    }
}

<img src=”@assets/public/logo.png” />

使用 loader 来加载图片资源

怎么使用图片我们了解了，但是怎么让 Webpack 识别图片，并且能够打包输出呢？这时候就需要借助 loader 了，这里有两个 loader 可以使用：file-loader 和 url-loader 。

file-loader和url-loader是经常在一些 Webpack 配置中看到的两个 loader，并且两个 loader 在一定应用场景上是可以相互替代的，但是对于两者的区别，很少有人能够说得清楚，下面介绍下两者的区别。

  • file-loader：能够根据配置项复制使用到的资源（不局限于图片）到构建之后的文件夹，并且能够更改对应的链接；
  • url-loader：包含 file-loader 的全部功能，并且能够根据配置将符合配置的文件转换成 Base64 方式引入，将小体积的图片 Base64 引入项目可以减少 http 请求，也是一个前端常用的优化方式。

下面以url-loader为例说明下 Webpack 中使用方法。首先是安装对应的 loader：

npm install -D url-loader

下面我们创建一个项目，目录结构如下：

|---- package.json    # npm package.json
|---- src
|    |---- assets      # 静态资源
|        |---- img     # 图片资源
|             |---- large.png  # 大图片 超过 1M
|             |---- small-01.png  # 小图图片
|             |---- small-02.png  # 大图片 超过 1M
|             |---- small-03.png  # 大图片 超过 1M
|    |---- index.css      # css 文件




语言
方法




5939
抖音创业网



YVzjZ


  • 抖音怎么恢复播放量「视频教程」教你轻松上热门
    • 

    
7402
2005-07-23 15:27:17
    
|    |---- index.html     # html
|    |---- index.js  # js
|---- webpack.config.js    # webpack 配置

    首先我们在index.css中引入 small-01.png:

    .bg-img{
    backgroud: url(./assets/img/small.png) no-repeat;
}

    然后在index.js中引入了index.css和large.png：

    import img from './assets/img/large.png'
import style from './index.css'
console.log(img, style);

    最后我们在index.html中通过 img 引入large.png：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <img src="./assets/img/large.png" alt="背景图">
</body>
</html>

    这时候我们修改webpack.config.js：

    const HTMLPlugin = require('html-webpack-plugin');
 
module.exports = {
    mode: 'development',
    entry: './srcindex.js',
    devtool: false,
    module: {
        rules: [
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: {
                    loader: 'url-loader'
                }
            }
        ]
    },
    plugins: [
        new HTMLPlugin({
            template: './src/index.html'
        })
    ]
 
}

    执行webpack后发现，打包出来的文件都比较大，通过查看内容发现，我们的图片被Base64处理了，然后直接引入了。

    这是因为url-loader本身优先是将资源Base64引入的。虽然图片Base64可以减少 http 请求，但是对于1M+这么大的图片都Base64处理，范围增加了 CSS、JavaScript 等文件的大小，而且将这么大的Base64反解成可以使用的图片渲染出来，时间消耗也是很大的。

    所以这时候需要使用url-loader的limit选项来控制不超过一定限制的图片才使用Base64：

    {
     test: /\.(png|svg|jpg|gif)$/,
     use: {
         loader: 'url-loader'，
         options: {
            imit: 3*1024
         }
     }
 }

    这时候再执行webpack，发现多打出一个ad19429dc9b3ac2745c760bb1f460892.png的图片，这张图片就是large.png的图片，因为超过了limit=3*1024显示所以没有被处理成Base64。

    继续查看index.html和main.js（index.js打包出来的文件），发现我们使用large.png的地址都被 Webpack 自动替换成了新的路径ad19429dc9b3ac2745c760bb1f460892.png。

    配置 CDN 域名

    一般静态资源上线的时候都会放到 CDN，假设我们的 CDN 域名和路径为，这时候只需要修改output.publicPath即可。

      本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
      转藏 分享 献花（0）

      来自： 昵称70680357 > 《待分类》

      举报/认领

      0条评论

      发表

      请遵守用户 评论公约

      类似文章 更多