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',          }),       ]  }

View Code

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()],     },       }  )

View Code

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属性引入图片路径，结果图片是不会被打包的，但是编译也不报错。

网上有人提出可以安装html-withimg-loader插件，并配置对应的信息，就可以打包成功了。这么做确实会使得图片打包成功，但是会有一个问题，即webpack.config.prod.js文件中的HtmlWebpackPlugin中的title不会被编译到index.ejs。

目前，正确的做法是，在模板文件中，img标签在引入src路径时，通过require的方式引入，即：

 <img src="<%= require('./images/cmmn.jpg')%>" style="width: 200px"/>

　　然后运行命令 npm run build 就可以看到被打包的信息了

标签

require

const

Webpack

vue-loader