Webpack parsing image, file-loader; and the difference between url-loader parsing

Note: Before installing, make sure the webpack project works properly!

1. Install file-loader dependency
2. Create an img folder in the src directory and import a picture (the image file name is called logo.jpg)
3. Configure, add a new configuration under webpack.config.js:
4. Use, import images in search.js
5.file-loader and url-loader parse the difference between images

5.1 Installation url-loader
5.2 Under webpack.config.js, modify the file-loader configuration to url-loader

1. Install file-loader dependency

cnpm i file-loader -D

2. Create an img folder in the src directory and import a picture (the image file name is called logo.jpg)

3. Configure, add a new configuration under webpack.config.js:

module.exports = {
  // ...
  module:{
    rules:[
      // ...
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use:'file-loader'
      }
    ]
  }
}

4. Use, import images in search.js

import ReactDom from 'react-dom';
import './search.css';
import './search.less';
Import logo from './img/logo.jpg'; // introduction

class Search extends React.Component {
  render() {
    return <div className="search-txt">
      Search Text
             <img src={ logo } /> // use
    </div>;
  }
};

ReactDom.render(
  <Search/>,
  document.getElementById('root')
);

5.file-loader and url-loader parse the difference between images

In fact, the two functions are similar. The url-loader is actually packaged on the basis of the file-loader, and the base64 conversion is automatically performed for the picture and font files of the limit size.

5.1 Installation url-loader

cnpm i url-loader -D

5.2 Under webpack.config.js, modify the file-loader configuration to url-loader

module.exports = {
  // ...
  module:{
    rules:[
      // ...
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use:[
        	{
				loader: 'url-loader',
	        	options:{
	        		 Limit: 10240 // The unit of limit is byte. Only when it is less than 10k, it is allowed to automatically transfer to base64.
	        	}
			}
        ]
      }
    ]
  }
}

Intelligent Recommendation

15. Webpack configuration vue-loader, parsing vue file

Article Directory Install the loader related to the vue file webpack about Vue related configuration Define the main.js startup file and load the App.vue file Install the loader related to the vue fil...

webpack learning file-loader, url-loader, css-loader

Installation webpack Webpack command execution npx command that the implementation of the project in webpack node_modules commands executed directly webpack otherwise, you will need to install a globa...

The difference and use of url-loader and file-loader

Webpack is written in JS and runs in a node environment, so by default, only the dependencies between JS will be processed when webpack is packaged! ! ! If you don’t believe it, you can create a...

The difference between loader and plugin in webpack

Original address:Detailed webpack loader and plugin First, the common configuration of webpack Second, the packaging principle of webpack Identify entry files By layer-by-layer identification o...

The difference between the loader and plugin of webpack

Interview questions: Do you know the principle of webpack? What configuration did we use webpack in your project? What is the difference between loader and plugin? What are used in the project? 【Loade...