Webpack Journey into the pit (i) Getting Started installation

Learn a new thing, the first step is to install, and sometimes encounter a variety of wonderful problems

As for what is webpack I do not introduce here, please refer to the official website: https://github.com/webpack/webpack

Installation

Premise: Because Webpack is a node-based project, you first need to make sure that your PC is already installed node.js , as well npm . The version I am using here is: node：v5.8.0 ，npm：3.7.3 If the issue of the version, please update to the latest version.
In the event that NPM is installed too slowly, you can use the NRM project to switch the NPM source address.

Let's start with a global installation and run the following command: npm install webpack -g it may take a little time.

After the installation is successful, enter it at the command line to webpack -h view the currently installed version information. And the instructions you can use.

Of course, we should all install WEBAPCK into the current project dependencies, so that we can use the project's local version of Webpack.

# Make sure that you have entered the project directory # OK already has Package.json, did not create through NPM init #, straight all the way to the right, back to the details of the contents. # Install Webpack dependent NPM install Webpack--save-dev# simple notation:-_-, abbreviated form NPM I webpack-d#–save: The module name is added to the dependencies and can be simplified to the parameter-S. #–save-dev: The module name is added to the devdependencies and can be simplified to the parameter-D.

　　

After the installation, our package.json catalogue should look like this:

{  "name": "Webpack-learn",  "version": "1.0.0",  "description": "Learn",  "main": "Index.js",  " Scripts ": {    " test ":" Echo \ "Error:no test specified\" && exit 1 "  },  " keywords ": [    " Learn "
    ],  "author": "Lanyan",  "license": "ISC"}

　　

First create a static page index.html and a JS entry file entry.js , (here you want to use any name can be, just need to read the file in the packaging when the name is good, but then know the meaning of the name!) ）：

　　
/*** entry.js ***/document.getelementbyid (' app '). Innerhtml= "This is my first successful package";
　　
Files have been created successfully, then start our packaging!
webpack entry.js bundle.js
Open in the browser index.html , you can see the text we set! : This is my first successful package.
Would it be nice to introduce this simple feature directly into the HTML? That's true, but we're just getting started, don't worry.
Now let's add a file with the following name first.js :
var h2= document.createelement ("H2") h2.innerhtml= "No, that's a quick second package!" ";d Ocument.body.appendChild (H2);
Change entry.js :
document.getElementById (' app '). Innerhtml= "This is my first successful package";//Add require ("./first.js");
Repeat the work again and pack it again. webpack entry.js bundle.js, if successful, the packaging process displays logs:
Hash:b1cfe7ff9d75ce235dc9Version:webpack 1.12.14time:54ms    Asset     Size  Chunks             Chunk namesbundle.js  1.82 kB       0  [emitted]  main   [0]./entry.js 208 bytes {0} [built]   [1]./first.js 145 bytes {0} [Bui Lt
　　
WebpackThe portal file is parsed and the individual files that contain dependencies are parsed . These files (modules) are packaged in bundle.js . WebpackEach module is assigned a unique id and pass through this id index and Access module. When the page starts, the code is executed first entry.js , and the other modules are executed at run require time.
Refresh the browser, you can find that our code has been in effect, and new text appears.
Webpack Journey into the pit (i) Getting Started installation