Webpack Packing First Knowledge

1. New project directory, directory name webpack-test

650) this.width=650; "Src=" https://s4.51cto.com/wyfs02/M01/8D/AD/wKioL1imXPCBQS-uAAAE-qeDF_U718.png-wh_500x0-wm_ 3-wmp_4-s_1833625277.png "title=" 1.png "alt=" Wkiol1imxpcbqs-uaaae-qedf_u718.png-wh_50 "/>

2. Go to the New project directory (webpack-test)

CD Webpack-test

650) this.width=650; "Src=" https://s1.51cto.com/wyfs02/M02/8D/B0/wKiom1imXSzRnk5cAAAFzfMSdNo110.png-wh_500x0-wm_ 3-wmp_4-s_3477414277.png "title=" 2.png "alt=" Wkiom1imxszrnk5caaafzfmsdno110.png-wh_50 "/>

3. Initializing a directory with commands

CNPM Init

650) this.width=650; "Src=" https://s3.51cto.com/wyfs02/M02/8D/AD/wKioL1imXVOB-BstAAAX17VNKEc252.png-wh_500x0-wm_ 3-wmp_4-s_1123523123.png "title=" 3.png "alt=" Wkiol1imxvob-bstaaax17vnkec252.png-wh_50 "/>

4. On the basis of the 3 steps, the output allows you to enter the initialization directory of the relevant information, you can input according to their actual situation, of course, you can go all the way down

650) this.width=650; "Src=" https://s1.51cto.com/wyfs02/M00/8D/B0/wKiom1imXXigA8MEAAApbwnpuE8202.png-wh_500x0-wm_ 3-wmp_4-s_3957503363.png "style=" Float:none; "title=" 4-1.png "alt=" Wkiom1imxxiga8meaaapbwnpue8202.png-wh_50 "/>

650) this.width=650; "Src=" https://s1.51cto.com/wyfs02/M00/8D/AD/wKioL1imXXiS6X8vAAAX0mEP2V8710.png-wh_500x0-wm_ 3-wmp_4-s_3146331194.png "style=" Float:none; "title=" 4-2.png "alt=" Wkiol1imxxis6x8vaaax0mep2v8710.png-wh_50 "/>

5. Install webpack using the command

CNPM Install Webpack--save-dev

650) this.width=650; "Src=" https://s2.51cto.com/wyfs02/M00/8D/AD/wKioL1imXbfBgDI6AAAqwqDl8lM458.png-wh_500x0-wm_ 3-wmp_4-s_3773798890.png "title=" 5.png "alt=" Wkiol1imxbfbgdi6aaaqwqdl8lm458.png-wh_50 "/>

6. View the generated directory structure

Dir

650) this.width=650; "Src=" https://s4.51cto.com/wyfs02/M02/8D/B0/wKiom1imXdjAgAO6AAAfeNXA-4k576.png-wh_500x0-wm_ 3-wmp_4-s_4074155649.png "title=" 6.png "alt=" Wkiom1imxdjagao6aaafenxa-4k576.png-wh_50 "/>

7. Create the appropriate catalog according to your project needs

Source file directory mkdir src static resource directory mkdir dist

650) this.width=650; "Src=" https://s5.51cto.com/wyfs02/M01/8D/AD/wKioL1imXg_iFlOqAAAe92_7X98893.png-wh_500x0-wm_ 3-wmp_4-s_806459363.png "style=" Float:none; "title=" 7-1.png "alt=" Wkiol1imxg_ifloqaaae92_7x98893.png-wh_50 "/>

650) this.width=650; "Src=" https://s1.51cto.com/wyfs02/M02/8D/AD/wKioL1imXhCDh2dpAAAlJMN3Aws129.png-wh_500x0-wm_ 3-wmp_4-s_2682274346.png "style=" Float:none; "title=" 7-2.png "alt=" Wkiol1imxhcdh2dpaaaljmn3aws129.png-wh_50 "/>

8. Enter the SRC directory and create the script directory and style directory in the source file directory

Scripting directory mkdir script style directory mkdir style

650) this.width=650; "Src=" https://s3.51cto.com/wyfs02/M02/8D/B0/wKiom1imXkGzz-wGAAAh5iwcgJs535.png-wh_500x0-wm_ 3-wmp_4-s_472473318.png "style=" Float:none; "title=" 8-1.png "alt=" Wkiom1imxkgzz-wgaaah5iwcgjs535.png-wh_50 "/>

650) this.width=650; "Src=" https://s3.51cto.com/wyfs02/M00/8D/B0/wKiom1imXkHjUeP0AAAh8myb9dc180.png-wh_500x0-wm_ 3-wmp_4-s_772167670.png "style=" Float:none; "title=" 8-2.png "alt=" Wkiom1imxkhjuep0aaah8myb9dc180.png-wh_50 "/>

9. Enter the dist directory and create the JS directory in the static resource directory to store the JS file of the package generation.

CD Distmkdir JS

650) this.width=650; "Src=" https://s4.51cto.com/wyfs02/M00/8D/AD/wKioL1imXnDic1KXAAADNQuC0UE956.png-wh_500x0-wm_ 3-wmp_4-s_2526436608.png "style=" Float:none; "title=" 9-1.png "alt=" Wkiol1imxndic1kxaaadnquc0ue956.png-wh_50 "/>

650) this.width=650; "Src=" https://s4.51cto.com/wyfs02/M01/8D/B0/wKiom1imXnGjrtaFAAAdzq5VZNU664.png-wh_500x0-wm_ 3-wmp_4-s_1868200336.png "style=" Float:none; "title=" 9-2.png "alt=" Wkiom1imxngjrtafaaadzq5vznu664.png-wh_50 "/>

10. Create a Main.js file in the script directory to write our business scripts

Cd.. CD SRCCD Scriptecho ... > main.jsmain.js contents are as follows: function HelloWorld () {}

650) this.width=650; "Src=" https://s4.51cto.com/wyfs02/M00/8D/B0/wKiom1imXqLj-QutAAAGw_6RSnE111.png-wh_500x0-wm_ 3-wmp_4-s_373660460.png "style=" Float:none; "title=" 10-1.png "alt=" Wkiom1imxqlj-qutaaagw_6rsne111.png-wh_50 "/>

650) this.width=650; "Src=" https://s5.51cto.com/wyfs02/M01/8D/AD/wKioL1imXqKgIejSAAAEndog_qs386.png-wh_500x0-wm_ 3-wmp_4-s_2864671584.png "style=" Float:none; "title=" 10-2.png "alt=" wkiol1imxqkgiejsaaaendog_qs386.png-wh_50 "/ >

650) this.width=650; "Src=" https://s1.51cto.com/wyfs02/M00/8D/AD/wKioL1imXubj5CTXAAAiNeZxsSU942.png-wh_500x0-wm_ 3-wmp_4-s_216338065.png "title=" 10-3.png "alt=" Wkiol1imxubj5ctxaaainezxssu942.png-wh_50 "/>

11. Create a Project initialization page in the root directory

echo ... > index.html file name: index.html content is as follows: <! DOCTYPE html>
650) this.width=650; "Src=" https://s2.51cto.com/wyfs02/M02/8D/B0/wKiom1imXtniXxO5AAAO6SUd84g297.png-wh_500x0-wm_ 3-wmp_4-s_4170238410.png "title=" 11.png "alt=" Wkiom1imxtnixxo5aaao6sud84g297.png-wh_50 "/>
12. Create a Webpack.config.js configuration file
echo ... > Webpack.config.jswebpack.config.js content as follows: Module.exports={entry: './src/script/main.js ', Output:{path: '. /dist/js ', filename: ' Bundle.js '}}
650) this.width=650; "Src=" https://s1.51cto.com/wyfs02/M00/8D/AD/wKioL1imX4yCp33KAAADh3Krb9k464.png-wh_500x0-wm_ 3-wmp_4-s_281931303.png "title=" 12.png "alt=" Wkiol1imx4ycp33kaaadh3krb9k464.png-wh_50 "/>
13. Run the webpack command at the command line
650) this.width=650; "Src=" https://s1.51cto.com/wyfs02/M01/8D/B0/wKiom1imX7GSL_0VAAAbSg1TWys100.png-wh_500x0-wm_ 3-wmp_4-s_1522739406.png "title=" 13.png "alt=" Wkiom1imx7gsl_0vaaabsg1twys100.png-wh_50 "/>
14. Open the Dist/js directory to view the generated bundle.js file, if the Bundle.js file exists, the Webpack.config.js file is already in effect
CD Dist/jsdir
650) this.width=650; "Src=" https://s1.51cto.com/wyfs02/M01/8D/AD/wKioL1imX8-AaYyJAAAhJFdCPBs465.png-wh_500x0-wm_ 3-wmp_4-s_3747841159.png "title=" 14.png "alt=" Wkiol1imx8-aayyjaaahjfdcpbs465.png-wh_50 "/>
15. If you modify the Webpack.config.js file name, rename it to another name, you can think of, I use Webpack.dev.config.js
ren webpack.config.js webpack.dev.config.jsdir
650) this.width=650; "Src=" https://s2.51cto.com/wyfs02/M02/8D/B0/wKiom1imYAri9pmUAAAnR5QonbM100.png-wh_500x0-wm_ 3-wmp_4-s_871631966.png "title=" 15.png "alt=" Wkiom1imyari9pmuaaanr5qonbm100.png-wh_50 "/>
16. Run the webpack command at the command line, the output will be different from the 12 steps, so how can I set the contents of the 12 steps?
Webpack
650) this.width=650; "Src=" https://s5.51cto.com/wyfs02/M02/8D/AD/wKioL1imYFHR5HsgAAAM54leIGU418.png-wh_500x0-wm_ 3-wmp_4-s_702623243.png "title=" 16.png "alt=" Wkiol1imyfhr5hsgaaam54leigu418.png-wh_50 "/>
17. Enter Webpack--config webpack.dev.config.js after the command line
Webpack--config Webpack.dev.config.js
650) this.width=650; "Src=" https://s4.51cto.com/wyfs02/M01/8D/AD/wKioL1imYIzC5xoEAAASyQaN1k0669.png-wh_500x0-wm_ 3-wmp_4-s_253406402.png "title=" 17.png "alt=" Wkiol1imyizc5xoeaaasyqan1k0669.png-wh_50 "/>
18. How do I use the other parameters of Webpack after customizing the Webpack.config.js file? 19. Modify the Package.json file
{"Name": "Webpack-test", "Version": "1.0.0", "description": "", "Main": "Index.js", "scripts": {"T EST ":" Echo \ "Error:no test specified\" && exit 1 "," Webpack ":" Webpack--config webpack.config.js--progre        SS--display-modules--colors--display-reason "}," Author ":", "License": "ISC", "devdependencies": { "Webpack": "^2.2.1"}}
20. Running Webpack
CNPM Run Webpack
650) this.width=650; "Src=" https://s3.51cto.com/wyfs02/M02/8D/AD/wKioL1imYR6TBrXUAAAkHJWQSQI749.png-wh_500x0-wm_ 3-wmp_4-s_1136999034.png "title=" 20.png "alt=" Wkiol1imyr6tbrxuaaakhjwqsqi749.png-wh_50 "/>
This article is from the "Yan" blog, please be sure to keep this source http://suyanzhu.blog.51cto.com/8050189/1898702
Webpack Packing First Knowledge