html中的图片怎样打包？html图片打包的办法

本篇文章给大家带来的内容是关于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中插入图片

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

安置==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 查看阅读器

相关引荐：

图片途径致使webpack打包错误怎样处置

有时css援用图片打包后寻不到资源文件是啥缘由

以上就是html中的图片怎样打包？html图片打包的办法的具体内容，更多请关注百分百源码网其它相关文章！