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打包图片问题

最新文章

热门文章