[Entry] webpack3 build from scratch

Preface:

This introductory chapter webpack only as a white, do not go to pull up the official document will look like hieroglyphics, I think it is to those who have a basic reference. We need to do comparison (whisper forced forced webpack official document really incomplete), summarize what can be considered after the entry Reviewing the Old

insert a picture looks too boring to keep the article, ha ha ha ha

text:

1. webpack packaging execution is dependent nodejs, so download first node environment: Download
2. Global webpack install packages, npm install [email protected] -g, on behalf of the [@ webpack to download version 3.12.0 is installed I specify, you can not write the version number, download the latest webpack. Global -g]
3. Create a project folder, with a small blackboard cmd, initial file: npm init -y (-y you can not confirm that one), the directory will generate package.json
4. Webpack local installation package, npm install [email protected] --save-dev. [-Save-dev] * -D can be abbreviated, after the installation of package.json see you appear "devDependencies" object, which will be written depend on you just installed, dependencies during package-lock-json lock download version the latest version can only guarantee a large state such as 3.x.
5. Creating a project in src place your static files, first create a file like the following figure, you do have a blog home page, details, generic list. Which were written [document.write ( "Home"), document.write ( "Article detail"), document.write ( "every page I"), document.write ( "article list")] what to write set their own:
   
6. Created in the root directory of a project webpack.config.js, js did not write the above figure has been corrected, is created, which is controlled static resource configuration information, do not worry take your time, as follows:
7. In order to realize just how complex do not need packing, but now they can try package webpack -p or npm run build, use the latter command needs to package.json the "scripts" add "build": "webpack", can be seen next to have a packaged file in dist under the js:
   
8. Good to delete just packed js file, make a dynamically generated html, you need to use html-webpack-plugin plugin:. Npm install html-webpack- plugin --save-dev.
   html-webpack-plugin on github: Address
   After installation required is dependent webpack.config.js in the configuration file:
   hash can effectively help us avoid server caching mechanism, no longer handwritten version number slightly. Understand people naturally understand, do not know will eventually understand the
   need to write a title index.html public property in the template:
   
   now project structure is:
   
   after the package has a good integration of html can be run directly in the dist / view, if completed also you should understand how the learning webpack the point.