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
            }
        }
    ]
},

原文地址:https://www.cnblogs.com/xiaoliwang/p/10687129.html

时间: 2024-11-05 18:27:34

Webpack 使用url-loader和file-loader打包资源文件的相关文章

Pyqt 打包资源文件

用打包工具将做好的Pyqt程序打包成exe后发现引用的资源图片都显示不了? 是否遇到了和我一样的问题呢.google之后找到了方法,一种方法是在程序中引用外部资源,另外一种方法是将资源文件转换为py文件,然后引用py.下面我们详细来实现后者方法实现的过程 一. 生成资源文件 要把资源文件转换为py文件首先要有资源文件,我们打开Qt Designer,添加资源文件 保存好资源文件后缀是以 .qrc  结尾的,用notepad++查看.qrc文件发现该文件其实为XML 1 <RCC> 2 <

pyinstall打包资源文件

相关代码 main.py import sys import os #生成资源文件目录访问路径 #说明: pyinstaller工具打包的可执行文件,运行时sys.frozen会被设置成True # 因此可以通过sys.frozen的值区分是开发环境还是打包后的生成环境 # # 打包后的生产环境,资源文件都放在sys._MEIPASS目录下 # 修改main.spec中的datas, # 如datas=[('res', 'res')],意思是当前目录下的res目录加入目标exe中,在运行时放在零

maven打包资源文件(转)

原文链接:http://blog.csdn.net/u012849872/article/details/51035938 maven工程标准目录结构: src    -main       –bin 脚本库       –java java源代码文件       –resources 资源库,会自动复制到classes目录里       –filters 资源过滤文件       –assembly 组件的描述配置(如何打包)       –config 配置文件       –webapp

pyinstaller打包资源文件及包含eyed3模块时提示找不到libmagic处理

这两天用python写了个小工具,用到了eyed3,用pyinstaller打包时提示找不到libmagic 版本信息: python 3.6.5 pyInstaller 3.4 python-magic-bin 0.4.14 eyeD3 0.88 wxpython 4.0.3 eyeD3 在Windows下使用时,文件名带有中文时乱码,提示找不到文件,解决办法(magic.py 230行左右): if is_unicode: return filename.encode('utf-8') el

打包资源文件到程序

#include <stdio.h> #include <stdlib.h> void FileToArray(const char *srcfile, const char *dstfile) { FILE *file = fopen(srcfile, "rb"); if (file) { FILE *save = fopen(dstfile, "w"); fseek(file, 0, SEEK_END); unsigned int fil

关于Laravel中使用Laravel-mix打包资源文件的一个坑

今天在尝试把写了一周的项目用laravel-mix中的 mix.version() 命令生成版本化文件时,遇到了一个报错,大概长这样: fs.js:675 return binding.read(fd, buffer, offset, length, postion); ^ Error: EISDIR: illegal operation on a directory, read at Object.fs.readSync (fs.js:675:18) at ..... 一开始还以为哪里写错了,

spring/boot 打包,资源/配置/业务文件分离

spring/boot打包,将业务jar包和资源配置文件进行分离打包,打包后的资源在target/release文件夹下面 注意:添加以下配置后,注意修改自己的入口类 <!--相关编译打包依赖--> <build> <plugins> <!--打包jar--> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-jar-p

使用loader打包静态文件-样式2

这篇我们了解下css-loader常用的配置项,要配置的话,use里面就不再是一个字符串了 // 打包模块不知道该怎么办,就去模块配置里面该怎么办 module: { // 规则 rules: [{ // 假设是以css结尾的,我需要一个load帮助我们去打包 test: /\.scss$/, // 需要两个loader,所以不能是个对象,需要是个数组 use: [ 'style-loader', 'css-loader', 'sass-loader', 'postcss-loader' ] }

webpack学习(三)配置loader

首先搞清楚两个问题: 1 什么是loader? 2 为啥要用各种loader 答: loader 就是各种打包规则,为什么要用是显而易见的,因为webpack还没智能到给它什么文件都能打包,对于js文件是完全ok的, 但是对于一些图片 .png .jpg .gif .vue等文件它并不能打包,直接打包肯定报错.因此需要制定一些对应的规则来告诉webpack如何 去打包. 如下图是关于图片的打包配置: 上图中增加module对象,对象中的rules是一个数组,说明可以定义很多条规则. 方法:使用什