Webpack不喜欢你用标签介绍图片，但是我们前端的人特别热衷于这个写法，中国人为此开发了一个：html-withimg-loader。他能很好地处理将图片引入html的问题

项目安装：NPM安装-保存-开发网络包

全局安装：npminstall-gwebpack

**webpack不鼓励在全球安装webpack。如果webpack用于在终端中打包项目，将会有内部命令或外部命令。

我们需要在package.json中配置脚本选项。在前面的课程中，我们已经学习了配置webpack-dev-server命令。在这个命令下，我们添加另一个构建命令来打包项目

脚本' :{

服务器' :'webpack-dev-server - open '，

build':'webpack '

},

删除dist目录并用npmrunbuild打包

用html打包图片：

现在继续==npmrunbuild==打包的图片没有放在dist/images目录中，因此您需要配置url加载器选项

module : { rule 3360[

{

test:/\。css$/，

使用：提取文本插件。提取({

fallback:'style-loader '，

使用：'css-loader '

})

}，{test:/\。(png|jpg|gif)/，

use:[{

加载程序：'url加载程序'，

选项：{

limit:5000，

outputPath:'images/'，}

}]

}

]

},

删除dist目录，打包npmrunbuild，并将图片打包到images文件夹中

在src目录下的index.html插入一张图片

pimgsrc='。/images/10.jpg'/p

Install==html-withimg-loader==解决html中的问题

npminstallhtml-with img-loader保存

配置加载器(webpack-config.js)

{test:/\。(html | html)$/I，

使用：['html-withimg-loader']

}

再次打包，img图片将出现在dist/images目录中

Npmrunserver视图浏览器

本文转载自中文网站