在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,差不多就是这样了