webpack中是不喜欢你使用标签来引入图片的，但是我们作前端的人特别热衷于这种写法，国人也为此开发了一个：html-withimg-loader。他可以很好的处理我们在html中引入图片的问题

 

　　项目安装：npminstall–save-devwebpack

 

　　全局安装：npminstall-gwebpack

 

　　**webpack不鼓励全局安装webpack,如果在终端中用webpack进行打包项目，就会出现不是内部命令或者外部命令。

 

　　需要配置package.json里面的script选项，我们以前的课程已经学习了配置webpack-dev-server命令，在这个命令下面我们再加一个build命令进行打包项目使用

 

　　"scripts":{

 

　　"server":"webpack-dev-server--open",

 

　　"build":"webpack"

 

　　},

 

　　删除dist目录，npmrunbuild进行打包

 

　　打包html中的图片：

 

　　现在进行==npmrunbuild==打包图片并没有放入dist/images目录下,需要配置url-loader选项

 

　　

 

　　module:{rules:[

 

　　{

 

　　test:/\.css$/,

 

　　use:extractTextPlugin.extract({

 

　　fallback:"style-loader",

 

　　use:"css-loader"

 

　　})

 

　　},{test:/\.(png|jpg|gif)/,

 

　　use:[{

 

　　loader:'url-loader',

 

　　options:{

 

　　limit:5000,

 

　　outputPath:'images/',}

 

　　}]

 

　　}

 

　　]

 

　　},

 

　　删除dist目录，进行npmrunbuild打包，可以把图片打包到images文件夹下

 

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

 

　　<p><imgsrc="./images/10.jpg"></p>

 

　　安装==html-withimg-loader==解决html中的问题

 

　　npminstallhtml-withimg-loader–save

 

　　配置loader(webpack-config.js)

 

　　{test:/\.(htm|html)$/i,

 

　　use:['html-withimg-loader']

 

　　}

 

　　再次进行打包，在dist/images目录下出现img图片

 

　　npmrunserver查看浏览器





本文转载自中文网