怎么把图片做成静态html,关于webpack 静态html中 图片打包的问题

// 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再引用即可,比如某一张图片.