关于前端:webpack打包图片资源

1、下载url-loader和file-loader(url-loader依赖于file-loader)

npm i url-loader file-loader -D

2、webpack.config.js中配置

module: {    rules: [        {test: /\.(css|less)$/,use: [MiniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader']},/*打包css文件*/        {   /*只能解决css文件中的图片文件*/            test: /\.(png|jpg|gif|jpeg)$/,     /*匹配图片文件*/            loader:'url-loader',            options: {                publicPath: './images/',       /*指定引入门路*/                outputPath: 'images/',         /*指定打包文件夹*/                limit: 1024*8,                 /*不设置限定大小，会默认将图片转成base64编码格局*/                name: '[name][hash:10].[ext]'  /*不设置名称，会默认生成一个hash名，hash:10--留10位hash值*/            }        },        {   /*html种引入图片文件的解决*/            test: '/\.html$/',            loader: 'html-loader'        }    ]}