首页 >web前端 >html教程 >html中的图片如何打包?html图片打包的方法

html中的图片如何打包?html图片打包的方法

不言
不言原创
2018-08-18 16:01:006308浏览

本篇文章给大家带来的内容是关于html中的图片如何打包?html图片打包的方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

项目安装:npm install –save-dev webpack

全局安装:npm install -g webpack

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

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

  "scripts": {    
  "server": "webpack-dev-server --open",    
  "build":"webpack"
  },

删除dist目录,npm run build进行打包

打包html中的图片:

现在进行==npm run build==打包图片并没有放入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目录,进行 npm run build 打包,可以把图片打包到images文件夹下

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

<p><img src="./images/10.jpg"></p>

安装==html-withimg-loader==解决html中html中的图片如何打包?html图片打包的方法的问题

 npm install html-withimg-loader –save

配置loader(webpack-config.js)

{    test: /\.(htm|html)$/i,
     use:[ &#39;html-withimg-loader&#39;] 
}

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

npm run server 查看浏览器

相关推荐:

图片路径导致webpack打包错误如何处理

有时css引用图片打包后找不到资源文件是什么原因

以上是html中的图片如何打包?html图片打包的方法的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关文章

查看更多