webpack打包图片资源

Posted 2021-09-24 Liane

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