webapck 打包图片

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const {resolve} = require(‘path’);

module.exports = {
entry:"./src/index.js",
output:{
filename:‘built.js’,
path: resolve(__dirname,‘build’),
},
module:{
rules:[
{
test:/.lessKaTeX parse error: Expected 'EOF', got '}' at position 123: … ] }̲, { …/i,
// 使用一个laoder
// 下载 ul-loader file-loader
loader: ‘url-loader’,
// 图片大小小于8kb，就会被 base64 处理
// 有点： 减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大（文件请求速度更慢）
options:{
// 问题：因为 url-loader 默认使用es6模块化解析，而html-loader引入图片是common.js
// 解析时会出问题：[object Module]
// 解决：关闭url-loader的 es6 模块化，使用commonjs解析
esModule: false,
limit: 8192,
// 给图片进行命名
// [ext]取文件原来扩展名
name:’[hash:10].[ext]’
},
type: ‘javascript/auto’,
},
{
test: /.html$/,
// 处理 html 文件的 img 图片（负责引入img,从而能被 url-loader 进行处理）
loader:‘html-loader’,
options:{
esModule:false
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:’./src/index.html’
})
],
mode:‘development’
}