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. 一文让你彻底理解SQL连接查询

    表结构 内连接 笛卡尔积问题 普通内连接:inner join on 隐式内连接: 外连接 内连接与外连接查询的区别 内连接查询是查询两张表交集的数据,主外键关联的数据. 左连接查询是查询左表中的所有 ...

  2. phpstoem破解

    https://blog.csdn.net/voke_/article/details/78794567

  3. web 阶段的一些简答题

    1.jsp 9个隐含对象 2. jsp 4大域对象 3.mybatis 中 #{} %{ } 的区别于联系 4. Servlet容器默认是采用单实例多线程的方式处理多个请求的: 5.Cookie 与S ...

  4. Python中Tk模块简单窗口设计

    Python中Tk和PyQt都可以设计小程序,区别在于:Tk界面美观度相对较差,但由于是Python的内置模块,最终生成的程序大小相比于PyQt较小. import tkinter # 导入TKint ...

  5. 定要过python二级 真题 第四套

    第一模块  基本操作 1.print("  {  }    " . format(s))         记住        "  {        }"    ...

  6. P4424-[HNOI/AHOI2018]寻宝游戏【结论】

    正题 题目链接:https://www.luogu.com.cn/problem/P4424 题目大意 \(n\)个\(m\)位二进制数,开始是一个\(0\). 然后依次对所有二进制数进行\(n\)次 ...

  7. Sentry 监控 - Snuba 数据中台架构简介(Kafka+Clickhouse)

    系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps Sentry For ...

  8. 服务注册中心之Eureka使用

    一.Eureka基础 Eureka是Netflix开发的服务发现框架,本身是一个基于REST的服务,主要用于定位运行在AWS域中的中间层服务,以达到负载均衡和中间层服务故障转移的目的.SpringCl ...

  9. 分布式锁Redission

    Redisson 作为分布式锁 官方文档:https://github.com/redisson/redisson/wiki 引入依赖 <dependency> <groupId&g ...

  10. 阿里云 Serverless 再升级,从体验上拉开差距

    差距都在细节上. Serverless 要成就云计算的下一个 10 年,不仅需要在技术上持续精进,也需要在产品体验上精耕细作. 近日,阿里云 Serverless 再度升级,发布了一系列围绕产品体验方 ...