After a while, record the learning process. Please be patient to point out any inaccuracies. (Self-cultivation of vegetable chicken)
What is the loader
Webpack is a common module packaging tool on the front end, but WebPack can only be used to deal with JS code and dependencies between them.
In addition to JS, there are many front-end files, including CSS, pictures and so on. The packaging of these files needs to be realized by the extension of Webpack, which is loader.
How to find the corresponding loader
Search webpack, go to the official website – “documentation -” loaders
For example, if I want to load the LOADER of CSS, go to the style – CSS-loader to see its installation and configuration
Loader Version Problem
If we install the webpack according to the installation method provided on the official website, it is inevitable that the webpack version does not match the current webpack version. It is impossible to change the Webpack version, so we need to install a loader of a lower version.
How do you know which version of loader is suitable for your webpack version
- Start by looking at your Webpack version number.
- Specify what loader you want to find. Here I use urL-loader as an example.
- Go to Github to search for url-loader.
- Select different versions by tag, for example, V1.1.2
You can see that this version supports webpack starting with 3 and 4, which fits the webpack version number of your host. Successful adaptation
- Finally use NPM install –save-dev [email protected] to install (–save-dev means only used in development environment)