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=" 200px"/> style=" 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=" 200px"/>

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