zoukankan      html  css  js  c++  java
  • Webpack 使用url-loader和file-loader打包资源文件

    在js中不仅可以通过import引入js文件,还可以引入图片、视频等资源文件,这样webpack打包时就会把所引入的资源文件也一起打包进来

    打包进来的文件会返回一个字符串:即文件的路径

    要做到这一点,需要一个工具,file-loader,使用方法很简单那

    1. 安装

    npm install file-loader --save-dev

    2. 配置

    {
        test: /.(png|jpg|jpeg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {
                    //配置公共资源路径
                    publicPath: './',
                    //配置输出路径
                    outputPath: 'images/'
                }
            }
        ]
    },

    配置其中的 publicPath 与 output 配置中的 publicPath 作用一直,如果两者都设置了,那么以 output 下的 publicPath 为准,上面配置最终文件输出位置为 /images/[hash].png

    为了优化小图片的加载,可以使用url-loader将小于一定尺寸的图片转成base64

    注意:url-loader是依赖于file-loader的,所以这两个包都必须安装

    {
        test: /.(png|jpg|jpeg|gif)$/,
        use: [
            {
                loader: 'url-loader',
                options: {
                    //小于这个尺寸的文件会转成base64,大于的会自动调用file-loader
                    limit: 8192
                }
            }
        ]
    },
  • 相关阅读:
    连接心跳问题
    超时时间已到
    CSS定位属性-position
    AJAX背景技术介绍
    mysql中length字符长度函数使用方法
    mysql常用函数
    php构造函数的继承方法
    属性选择器(通常用在input)
    input标签常用属性
    PHP程序如何debug?
  • 原文地址:https://www.cnblogs.com/xiaoliwang/p/10687129.html
Copyright © 2011-2022 走看看