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的安装过程也没有问题,打 ...
随机推荐
- java打分系统
package com.ioTest; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.Fil ...
- day_05 if条件判断和while循环作业题
1. 输入姑娘的年龄后,进行以下判断: 1. 如果姑娘小于18岁,打印“不接受未成年” 2. 如果姑娘大于18岁小于25岁,打印“心动表白” 3. 如果姑娘大于25岁小于45岁,打印“阿姨好” 4. ...
- GET和POST请求的区别和使用场景
本质上的区别: GET请求.处理.响应过程中只是产生一个TCP数据包,而POST请求会产生两个TCP数据包. 更具体地说,GET请求过程中头和请求正文数据一起到服务器端, 而POST请求过程中, ...
- Vue结合后台的增删改案例
首先列表内容还是与之前的列表内容类似,不过此处我们会采用Vue中数据请求的方式来实现数据的增删.那么我们使用的Vue第三方组件就是vue-resource,vue发起请求的方式与jQuery的ajax ...
- postgres select TOP X in group 查询每个组的前几名
参考: https://stackoverflow.com/questions/27415706/postgresql-select-top-three-in-each-group http://ch ...
- D2. Equalizing by Division (hard version)
D2. Equalizing by Division (hard version) 涉及下标运算一定要注意下标是否越界!!! 思路,暴力判断以每个数字为到达态最小花费 #include<bits ...
- C# walls
在学习C#的阶段中,我们一点一点的往前爬, 此代码需要添加selenium ,和 获取 引用. using Ivony.Html.Parser; using Ivony.Html; using Ope ...
- 解决运行webpack --config webpack.dev.config.js 报错ReferenceError: _dirname is not defined
控制台报错信息如下 将webpack.dev.config.js中的_dirname 改为 __dirname 注意这里是两个下划线谢谢!感觉好坑
- [BZOJ1059]:[ZJOI2007]矩阵游戏（二分图匹配）
题目传送门 题目描述 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏——矩阵游戏.矩阵游戏在一个N×N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种 ...
- OOM和SOF代码
OutOfMemoryError大数组,例如图片加载. public class MockOutOfMemoryError { public static void main(String[] arg ...