How to package images in html? How to package html images

The content of this article is about how to package images in html? The method of packaging html images has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Webpack does not like you to use the tag to introduce images, but our front-end people are particularly keen on this writing method, and the Chinese have also developed one for this: html-withimg- loader. He can handle the problem of introducing images into html very well

Project installation: npm install –save-dev webpack

Global installation: npm install -g webpack

** Webpack does not encourage global installation of webpack. If you use webpack to package projects in the terminal, there will be commands that are not internal or external.

• You need to configure the script option in package.json. We have learned to configure the webpack-dev-server command in previous courses. Under this command, we will add a build command to package the project. Use

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

to delete the dist directory and npm run build to package

Package images in html:

Now proceed ==npm run build== The packaged images are not placed in the dist/images directory. You need to configure the url-loader option

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/',                   }
               }]
            }
          ]
    },

Delete the dist directory and perform npm run build packaging. You can package the images into the images folder.

Insert pictures into index.html in the src directory

<p><img  src="/static/imghwm/default1.png"  data-src="./images/10.jpg"  class="lazy"   alt="How to package images in html? How to package html images" ></p>

Install==html-withimg-loader==solve the problem in html

 npm install html-withimg-loader –save

Configuration loader (webpack-config.js)

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

Package again, img images appear in the dist/images directory

npm run server View browser

Related Recommended:

How to deal with webpack packaging errors caused by image paths

Sometimes the resource file cannot be found after css references the image package

The above is the detailed content of How to package images in html? How to package html images. For more information, please follow other related articles on the PHP Chinese website!