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

6次阅读

共计 555 个字符，预计需要花费 2 分钟才能阅读完成。

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

正文完