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