Webpack--loader

Webpack itself can only handle JavaScript modules, and if you want to work with other types of files, you need to convert using loader.

So if we need to add CSS files to the app, we need to use the Css-loader and Style-loader, they do two different things, Css-loader will traverse the CSS file, then find the URL () expression and then process them, Style-loader will insert the original CSS code into a style tag on the page.

Next we use the following command to install Css-loader and Style-loader (as if these two commands only support partial installation).

CNPM Install Css-loader Style-loader
After executing the above command, the current directory will be generated Node_modules directory, which is the installation directory of Css-loader and Style-loader.

Next, create a style.css file with the following code:

APP/STYLE.CSS file
Body {
Background:yellow;
}
Modify the Runoob1.js file with the following code:

App/runoob1.js file
Require ("!style-loader!css-loader!. /style.css ");
document.write (Require ("./runoob2.js"));
Next we use the Webpack command to package:

Webpack Runoob1.js Bundle.js

Require CSS files to write loader prefix!style-loader!css-loader!, of course, we can according to the module type (extension) to automatically bind the required loader. Runoob1.js the Require ("!style-loader!css-loader!. /style.css ") modified to require ("./style.css "):

App/runoob1.js file
Require ("./style.css");
document.write (Require ("./runoob2.js"));
Then execute:

Webpack runoob1.js bundle.js--module-bind ' Css=style-loader!css-loader '

The effect is the same

Webpack--loader