前言

此内容是个人学习笔记,以便日后翻阅。非教程,如有错误还请指出

webpack打包图片和划分文件路径

使用图片的方式

  • 通过 new Image()
  • 在 css中设置 background-image
  • 在 html中使用img标签引用图片

需要一个合适的 loader,对图片进行处理

file-loader: 指示 webpack将所需对象作为文件发出并返回其公共URL
url-loader: 以base64编码的URL加载文件,减少http请求。

cnpm i file-loader url-loader --save-dev

weebpack配置:

  module.exports = {
    ...
    module: {
      rules: [
        {
          test: /.css$/,
          use: ['style-loader', 'css-loader']
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: {
            loader: 'url-loader',
            options: {
              limit: 10000,   // 小于 8kb的图片转换为base64编码,减少http请求
            }
          }
        }
      ]
    }
  }

划分文件路径

输出后的资源如 css文件,图片文件想要给他们划分文件夹。 如css的文件都方法 css的文件夹下, 图片都放在 images文件夹下

基上面代码,webpack配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    ...
    module: {
      rules: [
        {
          test: /.css$/,
          use: [ MiniCssExtractPlugin.loader, 'css-loader']
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: {
            loader: 'url-loader',
            options: {
              limit: 10000,   // 小于 8kb的图片转换为base64编码,减少http请求
              outputPath: '/images'
            }
          }
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: '/css/[name].css'
      })
    ]
  }

css、html等文件的引用路径会自动改变。

笔记地址

Webpack4 学习笔记五 图片解析、输出的文件划分目录的更多相关文章

  1. C++学习笔记之输入、输出和文件

    一.流的概念 数据从内存的一个地址移动到另一个地址称为数据流动——流操作 流操作是通过缓冲区(buffer)机制实现的. 缓冲区:内存的一块区域——用作文件与内存交换数据. 数据从文件中读出:文件 → ...

  2. Linux学习笔记之二————Linux系统的文件和目录

    一.Windows和Linux文件系统区别 1.在 windows 平台下,打开“计算机”,我们看到的是一个个的驱动器盘符: 每个驱动器都有自己的根目录结构,这样形成了多个树并列的情形,如图所示:  ...

  3. java之jvm学习笔记五(实践写自己的类装载器)

    java之jvm学习笔记五(实践写自己的类装载器) 课程源码:http://download.csdn.net/detail/yfqnihao/4866501 前面第三和第四节我们一直在强调一句话,类 ...

  4. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

  5. 【opencv学习笔记五】一个简单程序:图像读取与显示

    今天我们来学习一个最简单的程序,即从文件读取图像并且创建窗口显示该图像. 目录 [imread]图像读取 [namedWindow]创建window窗口 [imshow]图像显示 [imwrite]图 ...

  6. C++基础 学习笔记五:重载之运算符重载

    C++基础 学习笔记五:重载之运算符重载 什么是运算符重载 用同一个运算符完成不同的功能即同一个运算符可以有不同的功能的方法叫做运算符重载.运算符重载是静态多态性的体现. 运算符重载的规则 重载公式 ...

  7. LevelDB学习笔记 (3): 长文解析memtable、跳表和内存池Arena

    LevelDB学习笔记 (3): 长文解析memtable.跳表和内存池Arena 1. MemTable的基本信息 我们前面说过leveldb的所有数据都会先写入memtable中,在leveldb ...

  8. C#可扩展编程之MEF学习笔记(五):MEF高级进阶

    好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较常用 ...

  9. (转)Qt Model/View 学习笔记 (五)——View 类

    Qt Model/View 学习笔记 (五) View 类 概念 在model/view架构中,view从model中获得数据项然后显示给用户.数据显示的方式不必与model提供的表示方式相同,可以与 ...

随机推荐

  1. inventor安装失败怎样卸载安装inventor 2018?

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  2. [转]分享20佳好玩的 jQuery 游戏

    本文转自:http://www.cnblogs.com/lhb25/archive/2011/04/17/2001089.html jQuery是时下最流行的 JavaScript 库.现在,除了HT ...

  3. 用Jmeter 测试接口--需要登录怎么办?

    一.试用场景---当你测试的接口 需要登录,然后 你又不知道怎么让这测这个接口前登录?这篇文章写得是 用静态的Token 值,来测试需要登录的接口 二.步骤 1  首相用Jmeter   将要测试的接 ...

  4. apache2.2多域名绑定

    apache2.2多域名绑定不同目录,将代码放在httpd.conf最后 NameVirtualHost *:80 <VirtualHost *:80> ServerName wo.com ...

  5. git 摘要

    git使用摘记 git冲突的问题主要是在修改的部分而不是添加的部分, 如果merge的文件在同一个位置有不同的信息则git会报错 git push origin中的origin表示的是远程的仓库名为o ...

  6. 错误处理(Operation Result)方法

    自己开发的公众号,可以领取淘宝内部优惠券 问题 现在有一个FileStorageService类,继承自IStorageService,具体实现如下 public interface IStorage ...

  7. Akka探索第二个例子by fsharp

    本文重度借鉴了github上akkabootcamp教程. 先上代码 open Akka open Akka.Actor open System type Message = | ContinuePr ...

  8. Android学习记录帖

    1.OptionMenu的创建过程类图 2. OptionMenu的isActionBarMenu 在PhoneWindow的preparePanel中会根据设定的FEATURE来给变量isActio ...

  9. <Android开源库 ~ 1> GitHub Android Libraries Top 100 简介

    转载自GitHub Android Libraries Top 100 简介 本项目主要对目前 GitHub 上排名前 100 的 Android 开源库进行简单的介绍, 至于排名完全是根据 GitH ...

  10. 【起航计划 022】2015 起航计划 Android APIDemo的魔鬼步伐 21 App->Launcher Shortcuts 为某个非主Activity在Home Screen上建立一个快捷方式

    Android 操作系统对于<intent-filter>含有下列属性的Activity会在应用程序管理器(Launcher)显示一项,一般这个Activity对应于某个应用的主Activ ...