webpack4下url-loader打包图片问题
webpack.condig.js:
const path = require('path');
//导入插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');//加这句是为了避免报错：Module Error (from ./node_modules/vue-loader/lib/index.js):
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports={
entry:{
main:'./main'
},
output:{
path:path.join(__dirname,'./dist'),
publicPath:'/dist/',
filename:'main.js'
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader',
options:{
loaders:{
css:MiniCssExtractPlugin.loader
}
}
},
{
test:/\.js$/,
loader:'babel-loader',
exclude:/node_modules/
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
// {
// test: /\.(htm|html)$/i,
// use:[ 'html-withimg-loader']
// },
{
test: /\.(png|jpg|gif|bmp|jpeg|svg)$/,
use: [
{
loader: 'url-loader',
options:{
limit:1024,//限制打包图片的大小：
}
},
],
},
]
},
plugins:[
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css',
}),
]
}
webpack.config.prod.js:
//导入插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');//加这句是为了避免报错：Module Error (from ./node_modules/vue-loader/lib/index.js): const webpack= require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin');//用来对js文件进行压缩，从而减小js文件的大小，加速load速度 const merge=require('webpack-merge'); const webpackBaseConfig=require('./webpack.config.js'); //清空基本配置的插件列表
webpackBaseConfig.plugins=[]; module.exports=merge(webpackBaseConfig,{
output:{
publicPath:'./dist/',// /dist/前面要加一个.,这样才能找到css、js和图片的位置
//'[name].[hash].js' 将入口文件重命名为带有20位hash值的唯一文件
filename: '[name].js'
},
plugins:[
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
new webpack.DefinePlugin({
'process.env':{
NODE_ENV:'"production"'
}
}),
//提取模板，并保存入口html文件
new HtmlWebpackPlugin({
title: 'Custom template',
filename:'../index_prod.html',
// template: 'html-withimg-loader!'+'./index.ejs',
// Load a custom template (lodash by default see the FAQ for details)
template: './index.ejs',
inject:true
}) ],
optimization: {
minimizer: [new UglifyJsPlugin()],
}, }
)
index.ejs:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title> </head>
<body>
<div id="app"> </div>
<img src="./images/cmmn.jpg" style="width: 200px"/> style="width: 200px"/>
</body>
</html>
在html-webpack-plugin配置中的模板文件（如html或者ejs文件）中直接通过img标签的src属性引入图片路径，结果图片是不会被打包的，但是编译也不报错。
（奇怪的是在.vue文件中使用src直接引用路径就没问题）
网上有人提出可以安装html-withimg-loader插件，并配置对应的信息，就可以打包成功了。这么做确实会使得图片打包成功，但是会有一个问题，即webpack.config.prod.js文件中的HtmlWebpackPlugin中的title不会被编译到index.ejs（这个问题是因为使用html-withimg-loader后，正则表达式中被匹配到的文件中的<%= %> 会直接被当做字符串原样输出，而不会被编译）。
目前，正确的做法是，在模板文件中，img标签在引入src路径时，通过require的方式引入，即：
<img src="<%= require('./images/cmmn.jpg')%>" style="width: 200px"/>
然后运行命令 npm run build 就可以看到被打包的信息了
webpack4下url-loader打包图片问题的更多相关文章
- 记关于webpack4下css提取打包去重复的那些事
注意使用vue-cli3(webpack4),默认小于30k不会抽取为公共文件,包括css和js,已测试 经过2天的填坑,现在终于有点成果 环境webpack4.6 + html-webpack-pl ...
- webpack4 单独抽离打包 css 的新实现
webpack4 单独抽离打包 css 的新实现 前言 之前我们使用的打包 css 无非两种方式:① 将 css 代码打包进 入口 js 文件中:② 使用第三方插件(extract-text-webp ...
- JQuery实现无刷新下拉加载图片
最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...
- Java和Android Http连接程序：使用java.net.URL 下载服务器图片到客户端
Java和Android Http连接程序:使用java.net.URL 下载服务器图片到客户端 本博客前面博文中利用org.apache.http包中API进行Android客户端HTTP连接的例子 ...
- nodejs之获取客户端真实的ip地址+动态页面中引用静态路径下的文件及图片等内容
1.nodejs获取客户端真实的IP地址: 在一般的管理网站中,尝尝会需要将用户的一些操作记录下来,并记住是哪个用户进行操作的,这时需要用户的ip地址,但是往往当这些应用部署在服务器上后,都使用了ng ...
- webpack4 系列教程(一): 打包JS
webpack 本身就是为了打包js所设计,作为第一节,介绍怎么打包js. 1. 检验webpack规范支持 webpack支持es6, CommonJS, AMD. 创建vendor文件夹,其中mi ...
- 下载从网页里面提取出来的图片（将url指向的图片下载并保存、从命名）
import os #创建文件夹 from urllib import request #下载图片 if not os.path.exists('文件夹名字'): #创建文件夹名字 os.mkdir( ...
- 使用base64:url 来定义背景图片url
普通的背景图片css是这样的: background-image:url(http://www.zhangxinxu.com/wordpress/wp-content/themes/default/i ...
- 在python3.6环境下使用cxfreeze打包程序
在python3.6环境下使用cxfreeze打包程序 环境:python3.6 打包程序:aliens_invasion 原本想使用pyintaller 进行打包,使用pip的安装过程也没有问题,打 ...
随机推荐
- pyqt5-表格TableWidGet
from PyQt5.QtWidgets import QApplication,QTableWidget,QWidget,QHeaderView,QPushButton,QTableWidgetIt ...
- postman-变量
Variables 什么是变量 变量是一个符号,可以接受不同的值.你可能根据你的项目经验,对其他语言的变量比较熟悉.在postman 的工作原理也是一样的 为什么使用变量 变量允许你在不同的地方重复使 ...
- vue - 登录验证与权限控制
描述具体问题 需求 业务系统通常需要登录才能访问受限资源,在用户未登录情况下访问受限资源需要重定向到登录页面: 多个业务系统之间要实现单点登录,即在一个系统或应用已登录的情况下,再访问另一个系统时不需 ...
- linux下为已经编译好的php环境添加mysql扩展（php安装完成后如何添加mysql扩展）
问题背景 平常我们都是先安装mysql,然后才能去安装php.假如先安装php,后安装mysql,由于php需要连接mysql,因而在php引擎中需要配置使用mysql.so扩展.这时需要手动编译生成 ...
- MySQL_DQL操作
DQL(Data Query Language)简单的来说就是数据的查询语言. 1.最简单的查询(显示表中的所有信息) 语法: select * from 表名; 2.普通查询 语法: select ...
- QT 信号槽 异步事件驱动 单线程 多并发
利用好Qt 模块的异步信号槽,单线程同样可是实现很强悍的的并发能力.应付正常的功能是足够的. 需要注意的是:该模式本质上为 单线程 事件驱动异步模式,所以需要做的事优化你的业务代码构架以应付性能与并发 ...
- localstorage sessionstorage cookie的区别
一.基本概念 Cookie cookie比较小,大小限制在4kb左右,是网景公司的前雇员 LouMontulli 在1993年3月的发明.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记 ...
- linux 目录介绍
/boot: 系统启动相关的文件,如内核.initrd,以及grub(bootloader)/dev: 设备文件 /etc:配置文件/home:用户的家目录,每一个用户的家目录通常默认为/home/U ...
- lianjie3
http://7xj7xs.com1.z0.glb.clouddn.com/xiao-chengxu.mp4
- 模板引擎ejs的include方法
html无法include header.ejs footer.ejs 最后用 user.ejs在首尾include