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的安装过程也没有问题,打 ...
随机推荐
- 【LuoguP5280】[ZJOI2019] 线段树
题目链接 题目描述 略 Sol 显然不能直接暴力模拟. 观察这个东西本质在干什么,就是某一次操作可能进行可能不进行,然后求所有情况下被标记节点总数. 这个显然可以转化为概率问题,每次有二分之一的概率进 ...
- Vue结合webpack实现路由懒加载和分类打包
https://blog.csdn.net/weixin_39205240/article/details/80742723
- C# 、Java数组申明、初始化区别
一.数组申明 int[] a1 int a2[] C# 支持 不支持 Java 支持 支持 二.数组申明且初始化 int[] a1 = new int[] { 2, 31 } int a1[ ...
- void 运算符和 逗号运算符
一.void 运算符 void 运算符的作用目的是 执行一个表达式,但是不用返回任何值,或者是返回undefined void 本身就有 无效.空的 的意思. void运算符的用法: 1.不加括号的写 ...
- ROM和RAM的内存详细说明
1.首先是ROM 的读取是需要提前两个地址的读取,所以要想读取0地址的数据,你需要给地址是2 2.关于宽度,深度的计算 假设我们要存取如下取模的数据,该模的设置口语描述为:这是显示的2个字节,其中一个 ...
- php上传大文件
1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...
- （60） 结构体指针、结构体变量嵌套、结构体指针嵌套、函数指针、数组指针、指针数组、typedef 综合运用
#include<stdio.h> #include<iostream> #include<malloc.h> /* author : 吴永聪 program: 结 ...
- PO,BO,VO和POJO的区别
PO:persistent object 持久对象 1 ．有时也被称为Data对象,对应数据库中的entity,可以简单认为一个PO对应数据库中的一条记录. 2 ．在hibernate持久化框架中与i ...
- jquery.fileupload-image-editor.js
jquery.fileupload-image-editor.js中 _initEventHandlers: function () { this._super(); var handlers = { ...
- shell脚本之case用法
你会经常发现自己在尝试计算一个变量的值,在一组可能的值中寻找特定值.在这种情形下, 你不得不写出很长的if-then-else语句,就像下面这样. $ cat test25.sh #!/bin/bas ...