webpack 打包图片资源

/**
* loader: 1. 下载 2. 使用(配置)
* plugins:1. 下载 2. 引入 3.使用
*/ // 用来拼接绝对路径的方法
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = {
// webpack 配置
// 入口起点
entry : './src/index.js',
// 输出
output : {
// 输出文件名
filename : 'built.js',
// 输出路径
path : resolve(__dirname, 'dist')
},
// loader 配置
module : {
rules : [
// 详细 loader 配置
{
// 问题:默认处理不了 html 中 img 图片
// 处理图片资源
test : /\.(jpg | png | gif)$/,
// 使用一个 loader, 可以不要use数组,可以直接指定
// 除了要下载 url-loader 还要下载 file-loader
loader : 'url-loader',
options : {
// 图片大小小于 8kb , 就会被base64 处理
// 优点:减少请求数量(减轻服务器压力)
// 缺点:图片体积会更大(文件请求速度更慢)
limit : 8 * 1024,
// 问题:因为url-loader 默认使用es6模块化解析,而html-loader引入图片是commonjs
// 解析是会出现问题:[object Module]
// 解决:关闭 url-loader 的es6模块化,使用commonjs解析
esModule : false,
// 给图片进行重命名
// [hash:10]取图片的hash的前10位
// [ext] 取文件原来拓展名
name : '[hash:10].[ext]'
}
},
{
test : /\.html$/,
// 处理 html 文件的img图片(负责引入img,从而能被url-loader进行处理)
loader : 'html-loader'
}
]
},
// plugins 的配置
plugins : [
// 详细 plugins 的配置
// html-webpack-plugin
// 功能:默认会创建一个空的html文件,自动引入打包输出的所有资源(js/css)
new HtmlWebpackPlugin({
// 增加一个配置
// 复制 './src/index.html' 文件,并自动引入打包输出的所有资源(js/css)
template : './src/index.html'
})
],
//模式
mode : 'development', // 生产模式
// mode : 'production' // 开发模式
}

webpack 打包图片资源的更多相关文章

  1. webpack打包图片资源找不到问题

    当我们进行前端打包时,需改成如下配置: 往常这样打包是没有问题的,可是今天进行项目打包的时候缺报图片找不到的错误,如图所示: 头部组件的图片资源找不到错误,后台发现因为头部组件的背景图片size过大, ...

  2. vue webpack打包

    webpack构建流程 从启动webpack构建到输出结果经历了一系列过程,它们是: 解析webpack配置参数,合并从shell传入和webpack.config.js文件里配置的参数,生产最后的配 ...

  3. webpack 打包

    React自发布以来吸引了越来越多的开发者,React开发和模块管理的主流工具webpack也被大家所熟知.那么webpack有哪些优势,可以成为最主流的React开发工具呢? webpack是什么 ...

  4. vue项目 webpack打包后,图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

  5. vue之webpack打包工具的使用

    vue之webpack打包工具的使用 一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个 ...

  6. webpack打包js,css和图片

    1.webpack打包默认配置文件webpack.config.js 2.打包js文件:有这个文件并配置可以直接在cmd上webpack打包,没有这个文件要在cmd上输入 webpack main.j ...

  7. 使用webpack打包ThinkPHP的资源文件

    使用webpack打包ThinkPHP的资源文件 利用自己的空余时间一直在维护http://www.wx2share.com这个小网站,全是一个人在弄,由于只租得起虚拟空间,所以后台采用了简单方便的T ...

  8. 【原】使用webpack打包的后,公共请求路径的配置问题

    在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量 公共变量是这样 在其他地方使用ajax时,我们就这样使用 这种 ...

  9. Webpack打包进阶

    说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...

随机推荐

  1. vue1.0,2.0区别 生命周期

    1.生命周期  删除 beforeCompile compiled ready,新增beforeMounted mounted beforeUpdate updated 2.for循环里取消了$ind ...

  2. P1251-餐巾计划问题【费用流】

    正题 题目链接:https://www.luogu.com.cn/problem/P1251 题目大意 \(N\)天,第\(i\)天需要\(a_i\)个餐巾. 每个餐巾价格为\(p\),使用完后有两种 ...

  3. ThreadLocal基本使用和内存泄漏分析

    ThreadLocal基础部分 ThreadLoal的作用 保存线程的独立变量,即每个线程维护一份.这种变量在线程的生命周期内起作用,减少同一个线程内多个函数之间公共变量传递麻烦. 使用场景 需要给不 ...

  4. 残差网络resnet理解与pytorch代码实现

    写在前面 ​ 深度残差网络(Deep residual network, ResNet)自提出起,一次次刷新CNN模型在ImageNet中的成绩,解决了CNN模型难训练的问题.何凯明大神的工作令人佩服 ...

  5. 1.JDBC编程六步走以及实现案例

    1.注册驱动:通知Java程序我们要连接的是哪个品牌的数据库 2.获取数据库连接:Java进程和Mysql进程之间的通道开启了 3.获取数据库操作对象:这个对象是用来执行sql语句的 4.执行SQL语 ...

  6. Java8新特性——Lambda 表达式

    Lambda 表达式 ​ ​ ​ ​ ​ ​ ​ ​ Lambda 表达式的实质属于函数式编程. ​ ​ ​ ​ ​ ​ ​ ​ 语法格式为:(parameters) -> expression ...

  7. node-pre-gyp以及node-gyp的源码简单解析(以安装sqlite3为例)

    title: node-pre-gyp以及node-gyp的源码简单解析(以安装sqlite3为例) date: 2020-11-27 tags: node native sqlite3 前言 简单来 ...

  8. Spring Boot引入Swagger并对界面进行美化

    Swagger是一个接口文档生成工具,在前后端分离的开发中经常会用到,下面就来介绍下Swagger的使用: 引入依赖 <dependency> <groupId>io.spri ...

  9. 关于 Binomial Coefficient is Fun

    题目传送门 Solution 应该这个做法不是很常见吧. 我们设 \(f_{i,j}\) 表示前面 \(i\) 个数,选出的数和为 \(j\) 的贡献之和.因为我们有以下式子: \[\sum_{i=a ...

  10. Vue3学习(二)之集成Ant Design Vue

    一.集成Ant Design Vue npm install ant-design-vue@2.0.0-rc.3 --save 兼容性 Ant Design Vue 2.x 支持所有的现代浏览器. 如 ...