typescript中加载img

2019独角兽企业重金招聘Python工程师标准>>>

在html标签中使用了img需要引用图片，需要将图片打包到输出目录，研究了很久，因为不熟悉webpack 也不熟悉typescript，因此花了很多天才搞定。

1、需要加载img文件需要使用url-loader，url-loader依赖file-loader

# 仅在编译中使用--save-dev
npm install file-loader --save-dev
npm install url-loader --save -dev

安装完成后:

2、完成后需要配置webpack的打包输出文件，在对应的webpack.config.js的module中添加如下代码

3、文件被hash处理，如果到这一步这样就比较适合，如果不行就需要另外处理使用html-withimg-loader

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

对应的webpack.config.js的module中添加如下代码

 test: /\.(htm|html)$/,
 loader: 'html-withimg-loader'

文件结构如下

OK，差不多就是这样了

转载于:https://my.oschina.net/u/615762/blog/1525800