使用art-template渲染图片，不会被url-loader处理
const render = require('./template/product.art')
// 配置数据
const data = {
product: [
{
imgSrc: '1.png',
name: '产品1',
price: 100,
},
{
imgSrc: '2.png',
name: '产品2',
price: 200,
},
],
}
// 数据渲染
const html = render(data)
console.log(html)
// 渲染到页面
const proList = document.querySelector('.pro-list')
proList.innerHTML = html
{{each product}}
<li>
<img src="~@img/{{$value.imgSrc}}" />
<span>{{$value.name}}</span>
<span>{{$value.price}}</span>
</li>
{{/each}}
<body>
<div id="app">
<ul class="pro-list"></ul>
</div>
</body>
...
module: {
rules: [
{
test: /.art$/,
loader: 'art-template-loader',
},
{
test: /.html$/,
loader: 'html-loader',
},
{
test: /.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
// 关闭es6模块化
esModule: false,
outputPath: 'imgs',
},
},
],
},
...
resolve: {
alias: {
'@': resolve(__dirname, '../src'),
'@css': resolve(__dirname, '../src/css'),
'@img': resolve(__dirname, '../src/images'),
}
}
...
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
