webpack--Simple Introduction (1) _ Development tools

1. Introduction Webpack is the most popular front-end resource modular management and packaging tools. It allows many loose modules to be packaged by dependencies and rules into front-end resources that conform to the deployment of the production environment. You can also code-separate modules that are loaded on demand, and then load them asynchronously when they are actually needed. With loader transformations, any form of resources can be viewed as a module, such as a COMMONJS module, AMD module, ES6 module, CSS, picture, JSON, Coffeescript, less, and so on.
2. Installation we need to install a node.js, node.js with the package Manager NPM, recommended the latest version of Node.js. Install Webpack through NPM:

$ NPM Install Webpack-g

See Help through webpack-h after successful installation
3. Use us to build a project to use the Webpack bar. Create a new Demo1 folder, creating a Package.json file via NPM init: (Can't read it all the time, it doesn't matter)
We install the Webpack to the current project dependencies:

NPM Install Webpack--save-dev
//abbreviation: 
npm i webpack-d
//–save: module names are added to dependencies and can be reduced to parameter-S.
//–save-dev: The module name is added to the devdependencies and can be reduced to parameter-D.

After installation Package.json:

{
  "name": "Demo1", "
  Version": "1.0.0",
  "description": "",
  "main": "Index.js",
  "scripts": {
    "Test": "Echo \" Error:no test specified\ "&& exit 1"
  },
  "author": "Mnixu",
  "license": "ISC",
  " Devdependencies ': {
    ' webpack ': ' ^1.13.1 '
  }
}

Create a new index.html:

 

Create a new Main.js (use Helloword based on tradition). ）：
document.write (' 
 

Create a new webpack.config.js:
Webpack.config.js
module.exports = {
  entry: './main.js ', 
  output: {
    filename: ' bundle.js '
  }
};
This file is meant to package the Main.js file as a bundle.js file. The Bundle.js file is Webpack generated, not created by us.

CMD Type the command:
$ webpack
 

 

Open index.html and you can see Hello World.

 

 

Webpack can also package dependent modules into a single file:

Create a new Main1 file
Main1.js
document.write (' 
Change the Main.js file
Main.js
document.write (' 
Repackage to see the page

Webpack parses the portal file and resolves the individual files that contain dependencies. These files (modules) are packaged into bundle.js. Webpack assigns a unique ID to each module and indexes and accesses the module through this ID. When the page is started, the code in the entry file is executed first, and the other modules are executed when the require is run.

 

 

 

Webpack can also package multiple portal files: Create a new folder under the original item, enter the folder: New main1.js main2.js file:
Main1.js
document.write (' 
New Webpack.config.js File:
Webpack.config.js
module.exports = {
  entry: {
    bundle1: './main1.js ',
    bundle2: './main2.js '
  },
  output: {
    filename: ' [name].js '
  }
}
New index.js:
Repackage to see the page

 

 

4. The conclusion of the recent learning Vue, for me this is not used to the front-end automation building tools to use Webpack build Vue project a little difficult. I hope this article can deepen my understanding and give some help to those in need.