html中的图片怎么打包-创新互联

这篇文章主要介绍html中的图片怎么打包,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

成都创新互联公司专注骨干网络服务器租用十年,服务更有保障!服务器租用,遂宁托管服务器 成都服务器租用,成都服务器托管,骨干网络带宽,享受低延迟,高速访问。灵活、实现低成本的共享或公网数据中心高速带宽的专属高性能服务器。

webpack中是不喜欢你使用标签来引入图片的,但是我们作前端的人特别热衷于这种写法,国人也为此开发了一个: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中插入图片

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


 npm install html-withimg-loader –save

配置loader(webpack-config.js)

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

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

npm run server 查看浏览器

以上是html中的图片怎么打包的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章标题:html中的图片怎么打包-创新互联
当前网址:http://pwwzsj.com/article/gehhp.html