YOU'VE MADE A BRAVE DECISION, WELCOME.

每一个不曾起舞的日子都是对生命的辜负。

webpack打包html中图片

1. 通过javascript引入图片

1
2
3
4
5
//ES2016
import imgUrl from 'path/to/xxxx.png';
//CommonJS
var imgUrl = require('path/to/xxxx.png');

js:

1
2
imgTempl = '<img src="'+imgUrl+'" />';
document.body.innerHTML = imgTempl;

react

1
2
3
render() {
return (<img src={imgUrl} />);
}

2. 通过html-withimg-loader打包

1
$ npm install html-withimg-loader --save-dev

webpack.config.js添加配置

1
2
3
4
5
6
7
8
module: {
  loaders: [
    {
      test: /\.html$/,
      loader: 'html-withimg-loader'
    }
  ]
}

img中src的路径必须为相对路径

1
2
3
render() {
return (<img src='./images/bg.jpg' />);
}