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