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打包图片问题的更多相关文章

  1. 记关于webpack4下css提取打包去重复的那些事

    注意使用vue-cli3(webpack4),默认小于30k不会抽取为公共文件,包括css和js,已测试 经过2天的填坑,现在终于有点成果 环境webpack4.6 + html-webpack-pl ...

  2. webpack4 单独抽离打包 css 的新实现

    webpack4 单独抽离打包 css 的新实现 前言 之前我们使用的打包 css 无非两种方式:① 将 css 代码打包进 入口 js 文件中:② 使用第三方插件(extract-text-webp ...

  3. JQuery实现无刷新下拉加载图片

          最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...

  4. Java和Android Http连接程序：使用java.net.URL 下载服务器图片到客户端

    Java和Android Http连接程序:使用java.net.URL 下载服务器图片到客户端 本博客前面博文中利用org.apache.http包中API进行Android客户端HTTP连接的例子 ...

  5. nodejs之获取客户端真实的ip地址+动态页面中引用静态路径下的文件及图片等内容

    1.nodejs获取客户端真实的IP地址: 在一般的管理网站中,尝尝会需要将用户的一些操作记录下来,并记住是哪个用户进行操作的,这时需要用户的ip地址,但是往往当这些应用部署在服务器上后,都使用了ng ...

  6. webpack4 系列教程(一): 打包JS

    webpack 本身就是为了打包js所设计,作为第一节,介绍怎么打包js. 1. 检验webpack规范支持 webpack支持es6, CommonJS, AMD. 创建vendor文件夹,其中mi ...

  7. 下载从网页里面提取出来的图片（将url指向的图片下载并保存、从命名）

    import os #创建文件夹 from urllib import request #下载图片 if not os.path.exists('文件夹名字'): #创建文件夹名字 os.mkdir( ...

  8. 使用base64:url 来定义背景图片url

    普通的背景图片css是这样的: background-image:url(http://www.zhangxinxu.com/wordpress/wp-content/themes/default/i ...

  9. 在python3.6环境下使用cxfreeze打包程序

    在python3.6环境下使用cxfreeze打包程序 环境:python3.6 打包程序:aliens_invasion 原本想使用pyintaller 进行打包,使用pip的安装过程也没有问题,打 ...

随机推荐

  1. 《Head First 软件开发》阅读六

    软件错误:专业排错 你编写的代码,你的责任.处理错误的方法和其他流程一样,准备好白板.让客户参与.满怀信心的估计.重构与预构. 首先是与客户加强沟通,不管是谁的代码,在自己的系统里就是自己的代码.使代 ...

  2. react在视频中截图,保存为base64位

    wq:之前看了网上很多教程,有点模糊,但是最后还是搞了出来 1  不要将视频放到canvas上面!  之前一直将video重新画到canvas上面,然后再次将第一个canvas放到第二个canvas上 ...

  3. VueJS简明教程(一)之基本使用方法

    简介:这是一篇超级简单的入门文章 如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优. Vue. ...

  4. mysql MAX()函数 语法

    mysql MAX()函数 语法 作用:返回一列中的最大值.NULL 值不包括在计算中.直线电机模组--BZD80N 语法:SELECT MAX(column_name) FROM table_nam ...

  5. Django 的 CBV&FBV

    Django FBV, function base view  视图里使用函数处理请求 url 1 url(r‘^users/‘, views.users), views 1 2 3 4 5 from ...

  6. 【Leetcode】二进制求和

    解题思路: 1. 首先在两个字符串前面补‘0’,使它们等长.否则要一直监督操作是否超出两个字符串的索引. 2. 从后向前遍历所有位数,同位相加.字符相加,利用ASCII码,字符在内部都用数字表示,我们 ...

  7. Qt 静态库与共享库(动态库)共享配置的一个小办法

    对于用 QtCreator 编写静态库,动态库,如何能够以最小的改动, 方便的实现两种形式的库文件生成:可以这麽做: 1)使用想到建立静态库 2)在项目配置文件*.pro  中: TARGET = n ...

  8. shell变量与运算

    shell变量与运算 @(0003 shell编程) 变量存在于内存中.假设变量str,设置或修改变量属性时,不带$号,只有引用变量的值时才使用$号.也就是说在内存中,标记变量的变量名称是str,而不 ...

  9. 3D Computer Grapihcs Using OpenGL - 14 OpenGL Instancing

    如果我们需要绘制两个(或者多个)一样的立方体(或者物体),只是位置.缩放.旋转不一样,那么我们可以不需要多次将这个物体的顶点信息.颜色信息等发送到显卡,而是发送一次,绘制多次,仅仅是每次绘制之前应用不 ...

  10. 【转】BYV--有向图强连通分量的Tarjan算法

    转自beyond the void 的博客: https://www.byvoid.com/zhs/blog/scc-tarjan 注:红色为标注部分 [有向图强连通分量] 在有向图G中,如果两个顶点 ...