Webpack Getting Started Tutorial 3

16. If we need to use CSS in our project, then we need to install the Css-loader and Style-loader modules

CNPM Install Css-loader Style-loader

650) this.width=650; "Src=" https://s4.51cto.com/wyfs02/M00/8D/B8/wKiom1inv-SD8E21AAATnaKAbpU449.png-wh_500x0-wm_ 3-wmp_4-s_2298425487.png "title=" 16.png "alt=" Wkiom1inv-sd8e21aaatnakabpu449.png-wh_50 "/>

17. Create the Style.css file in the root directory of the project with the following file contents

echo ... > Style.css

File contents in/*style.css */body{//Set background color to gray background: #ccc;}

650) this.width=650; "Src=" https://s2.51cto.com/wyfs02/M01/8D/B8/wKiom1inwKbxTRhnAAAJ25kOdw0132.png-wh_500x0-wm_ 3-wmp_4-s_2267074445.png "title=" 17.png "alt=" Wkiom1inwkbxtrhnaaaj25kodw0132.png-wh_50 "/>

18. Modify the Runoob1.js file as follows:

The contents of the file in/*runoob1.js */require ("!style-loader!css-loader!. /style.css ");d Ocument.write (Require ("./runoob2.js "));

19. RePack Runoob1.js to Bundle.js using Webpack

Webpack Runoob1.js Bundle.js

650) this.width=650; "Src=" https://s4.51cto.com/wyfs02/M00/8D/B8/wKiom1inwmXQEef3AAAmuOPtwHQ042.png-wh_500x0-wm_ 3-wmp_4-s_435157049.png "title=" 19.png "alt=" Wkiom1inwmxqeef3aaamuoptwhq042.png-wh_50 "/>

20. Run the index.html file in the browser and the output is as follows

650) this.width=650; "Src=" https://s3.51cto.com/wyfs02/M02/8D/B8/wKiom1inwsWz2WqdAAAf32WpSF0421.png-wh_500x0-wm_ 3-wmp_4-s_1183316214.png "title=" 20.png "alt=" Wkiom1inwswz2wqdaaaf32wpsf0421.png-wh_50 "/>

This article is from the "Yan" blog, please be sure to keep this source http://suyanzhu.blog.51cto.com/8050189/1899010

Webpack Getting Started Tutorial 3