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的安装过程也没有问题,打 ...
随机推荐
- C标签的用法
今天做jsp页面,发现无法将后台传过来的时间戳转换成正常的时间格式,于是就想到了C标签,顺便把C标签总结一下 1.引入C标签 <%@ taglib uri="http://java.s ...
- tf.stack( )和tf.unstack( )
相同点:他们都增加了矩阵的维度,而split()不改变维度! tf.stack()这是一个矩阵拼接的函数,tf.unstack()则是一个矩阵分解的函数 c是拼接,而d和e则是不同维度的分解
- python4---打印长方形
1:方法1for i in range(6): for j in range(3): print("*", end=" ") print() 2:输入显示长方形 ...
- Power-Aware GateSim Debug
For PAG debug, the following steps may be useful. 1. Get correct netlists from PD which contain powe ...
- PCL智能指针疑云 <二> 使用同一智能指针作为PCL预处理API的输入和输出
问题介绍: slam构建地图,先进行降采样,再进行可视化或存储.然而经过降采样后,代码没有报错的情况下,点云数据散成一团.将代码和点云数据展示如下, pcl::VoxelGrid<Lidar:: ...
- [机器学习]Fine Tune
Fine Tune顾名思义,就是微调.在机器学习中,一般用在迁移学习中,通过控制一些layer调节一些layer来达到迁移学习的目的.这样可以利用已有的参数,稍微变化一些,以适应新的学习任务.所以说, ...
- 浅谈 Catalan number——卡特兰数
一.定义: 卡特兰数是一组满足下面递推关系的数列: 二.变形: 首先,设h(n)为Catalan数的第n+1项,令h(0)=1,h(1)=1,Catalan数满足递推式: h(n)= h(0)*h(n ...
- nginx下的负载均衡
负载均衡应用场景: 普通web应用部署到多台应用服务器上,客户端通过访问应用服务器发送请求,最简单的就是n对1模式,n个客户端访问同一个应用服务器,这种情况当并发量大了,就无法应对,而且,如果只有一台 ...
- 使用私有仓库（Docker Registry 2.0）管理镜像
1. 执行以下命令新建并启动一个Docker Registry 2.0 docker run -d -p 5000:5000 --restart=always --name registry2 reg ...
- Run nginx from Docker in Windows
1.首先, 使用 docker run hello-world 命令 确认 docker 在本地安装成功,若成功应如下所示(此处使用的是 Docker Toolbox 在Windows上安装Docke ...