Webpack Getting Started Tutorial 1

1. Create project, project name app

mkdir app

650) this.width=650; "Src=" https://s3.51cto.com/wyfs02/M01/8D/B8/wKiom1inuJeTYmP5AAAD8HMA04k625.png-wh_500x0-wm_ 3-wmp_4-s_2596626944.png "title=" 1.png "alt=" Wkiom1inujetymp5aaad8hma04k625.png-wh_50 "/>

2. Enter the app's directory

CD app

650) this.width=650; "Src=" https://s4.51cto.com/wyfs02/M02/8D/B6/wKioL1inuNaRZ73WAAACPV4oicY134.png-wh_500x0-wm_ 3-wmp_4-s_3157556581.png "title=" 2.png "alt=" Wkiol1inunarz73waaacpv4oicy134.png-wh_50 "/>

3. Create a runoob1.js file in the root directory of the project

echo document.write ("It works"); > Runoob1.js

650) this.width=650; "Src=" https://s1.51cto.com/wyfs02/M01/8D/B6/wKioL1inuSOS0nLYAAAE3Ub2EVE540.png-wh_500x0-wm_ 3-wmp_4-s_3529948353.png "title=" 3.png "alt=" Wkiol1inusos0nlyaaae3ub2eve540.png-wh_50 "/>

4. View the files generated in this directory

Dir

650) this.width=650; "Src=" https://s5.51cto.com/wyfs02/M00/8D/B8/wKiom1inuZXzBAAFAAAaGsTchnA084.png-wh_500x0-wm_ 3-wmp_4-s_366983062.png "title=" 4.png "alt=" Wkiom1inuzxzbaafaaaagstchna084.png-wh_50 "/>

5. View the contents of the Runoob1.js file

Type Runoob1.js

650) this.width=650; "Src=" https://s4.51cto.com/wyfs02/M00/8D/B6/wKioL1inud3indqlAAAGEWZzwME628.png-wh_500x0-wm_ 3-wmp_4-s_905216974.png "title=" 5.png "alt=" Wkiol1inud3indqlaaagewzzwme628.png-wh_50 "/>

6. Create a index.html file in the root directory of the project

echo ... > index.html

650) this.width=650; "Src=" https://s4.51cto.com/wyfs02/M02/8D/B6/wKioL1inuiugANRsAAAENojs9Jk675.png-wh_500x0-wm_ 3-wmp_4-s_3003111420.png "title=" 6.png "alt=" Wkiol1inuiuganrsaaaenojs9jk675.png-wh_50 "/>

7. Modify the contents of the index.html file as follows

<! DOCTYPE html>
8. View the contents of the modified index.html file
Type index.html
650) this.width=650; "Src=" https://s4.51cto.com/wyfs02/M02/8D/B8/wKiom1inupuhlohRAAAbsOE2KC8088.png-wh_500x0-wm_ 3-wmp_4-s_1172832643.png "title=" 8.png "alt=" Wkiom1inupuhlohraaabsoe2kc8088.png-wh_50 "/>
9. Installing Webpack
CNPM Install Webpack
650) this.width=650; "Src=" https://s5.51cto.com/wyfs02/M02/8D/B6/wKioL1inuv3DjN-aAAAmKslMA_M239.png-wh_500x0-wm_ 3-wmp_4-s_463453102.png "title=" 9.png "alt=" Wkiol1inuv3djn-aaaamkslma_m239.png-wh_50 "/>
10. Package Runoob1.js file for Bundle.js
Webpack Runoob1.js Bundle.js
650) this.width=650; "Src=" https://s4.51cto.com/wyfs02/M00/8D/B8/wKiom1inu03j9Z-4AAAQKHRCvAc169.png-wh_500x0-wm_ 3-wmp_4-s_595690845.png "title=" 10.png "alt=" Wkiom1inu03j9z-4aaaqkhrcvac169.png-wh_50 "/>
11. Open the index.html file in the browser, the output is as follows
650) this.width=650; "Src=" https://s1.51cto.com/wyfs02/M00/8D/B6/wKioL1inu6GylItYAAARr16jl6Q260.png-wh_500x0-wm_ 3-wmp_4-s_3573662853.png "title=" 11.png "alt=" Wkiol1inu6gylityaaarr16jl6q260.png-wh_50 "/>
This article is from the "Yan" blog, please be sure to keep this source http://suyanzhu.blog.51cto.com/8050189/1899006
Webpack Getting Started Tutorial 1