Webpack Loader Loader

Configuring loader to process files via the loader, such as CSS sass Less, tells Webpack that each file needs to be handled by the loader.

1.node.js is installed automatically by default after installing NPM, so cmd CD entry under current project input NPM install Babel-loader Babel Babel-core css-loader style -loader URL-loader file-loader less-loader less --save-dev command to download these packages.

2. Modify the Webpack.config.js file to introduce the loader

Module.exports ={entry:'./src/js/entry.js', Output: {filename:'Index.js', Path: __dirname+' /Out'}, module: {rules: [{test:/.js$/, use: ['Babel-loader']}, {test:/.css$/, use: ['Style-loader','Css-loader']},/*parse CSS and add CSS to the HTML style tag*/            //{test:/.css$/, Use:ExtractTextPlugin.extract ({fallback: ' Style-loader ', use: ' Css-loader '})},/* parse CSS, And the CSS into a file through the link tag introduced * /{test:/. (jpg|png|gif|svg) $/, use: ['Url-loader?limit=8192&name=./[name]. [Ext]']},/*Parse Picture*/{test:/.less$/, use: ['Style-loader','Css-loader','Less-loader']}/*parse less to parse less into a CSS language that the browser can recognize*/        ]    },    }

3. Under the SRC folder under the project folder, create index.css under the CSS file, and modify the index.html file

// Index.css . demo1 {    width:100px;    height:100px;    background:red;}. Demo2 {    width:200px;    height:200px;    Background:orange;}

 // index.html  <! DOCTYPE html> " en   " >"  utf-8   "/><title>text</title>class  = " demo1   " ></div><div class  ="  demo2  Span style= "COLOR: #800000" > " ></div><script src="  ./out/index.js   " ></script></body >
Because all the files in Webpack are modules, you have to introduce CSS. Add the following code to the entry.js you just added.
Entry.jsrequire ('.. /css/index.css ');//introduce CSS file Console.log ("1234");
Pack Webpack look at the effect
4. Referencing multiple JS files
Create a new tool.js file under the src file
// Tool.js var tool = {// get DOM element     getdom:function (className) {        return Document.getelementsbyclassname (className) [0];     = Tool; // Module Exit
Src JS under Create a demo1.js file, Demo2.js similarly
varobj = require ('./tool.js'); varDemo1 ={init:function () { This. Bindevent (); }, Bindevent:function () {//var demo1 = document.getelementsbyclassname (' demo1 ') [0];        varDemo1 = Obj.getdom ('Demo1'); Demo1.onclick= This. Changestyle; }, Changestyle:function () { This. Style.width ='200px';  This. Style.height ='200px';  This. Style.background ='Green'; Console.log ('1'); }}module.exports= Demo1;
Modify the entry file Entry.js
Require ('.. /css/index.css'); var demo1 = require ('.. /js/demo1.js'); var demo2 = require ('.. /js/demo2.js');    Demo1.init ();    Demo2.init ();
Webpack, look at the effect.
Webpack Loader Loader