关于webpack 静态html中 图片打包的问题

Question

使用file-loader 可以打包css中url的图片 但是对于html中src的图片要怎么打包昵？求各位大神指导

Answer 1

比较不帅的做法可以这样，在javascript引入图片：

//ES2015
import imgUrl from 'path/to/xxxx.png';

//CommonJS
var imgUrl = require('path/to/xxxx.png');

然后再在javascript里把html里img的src属性值换成上面拿到的imgUrl就好了。

这种方式简单粗暴，而且解决问题；缺点就是不太帅

相对帅点的做法：

直接使用html-loader加载你的html片段，她会检查你引入的html片段里对图片的引用，都自动替换成上面那种方式。

Answer 2

才解决了这个问题，
这个loader：html-withimg-loader

Answer 3

            // html中引用的静态资源在这里处理,默认配置参数attrs=img:src,处理图片的src引用的资源.
            {
                test: /\.html$/,
                loader: 'html-loader',
                options: {
                    // 除了img的src,还可以继续配置处理更多html引入的资源
                    attrs: ['img:src', 'img:data-src', 'audio:src']
                }
            },
            // 处理图片(雷同file-loader，更适合图片)
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000, // 小图转成base64
                    name: 'assets/img/[name].[hash:7].[ext]'
                }
            },
            // 处理多媒体文件
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'assets/media/[name].[hash:7].[ext]'
                }
            },
            // 处理字体文件
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'assets/fonts/[name].[hash:7].[ext]'
                }
            }

手动配了下webpack, 图片/字体/多媒体文件都可以通过url-loader处理,小体积文件转成base64; 所有在html中引入的资源,通过html-loader处理,注意在attrs参数里加配置.
不想在html中直接引入,需要在js中写入的,直接require再引用即可,比如某一张图片.

Answer 4

只有两种方式：

一：直接在JS中require
二：html-loader的时候替换