1.webpack-----Module Loader and Packaging tool

first, the advantages of Webpack

1. Capable of modular JS.

2. Easy to develop, can replace part of GRUNT/GULP work, such as packing, compression confusion, picture turn base64 etc.

3. Strong extensibility, perfect plug-in mechanism, especially to support the React hot Plug and draw a bright

Second, webpack--How to install1. Global Installationnode. js

Webpack is based on the node environment and is only installed once in the node environment.

2. Global Installation Webpack

We want to be able to use Webpack in any folder in the system, using the Webpack command, which requires us to install the Webpack globally. This can only be installed once, and each project will not need to be re-installed globally.

Install webpack-g

3. Install Webpack in the project

It is best to include a separate Webpack in your project so that you can manage your project more easily. Why is it a global installation, but also a partial installation? Can be consulted, to be determined.

3.1 Confirming the creation of the NPM project file

First, you need to have created the NPM project file, and if not, use the init command to create it.

NPM Init

You need to answer a series of questions. Eventually you will get a NPM project file called Package.json, which is also good if you want to create it manually. You can even copy one directly over.

A newly created Package.json content should look like the following.

{  "name": "W1",  "version": "1.0.0",  "description": "",  "main" : "Index.js",  "dependencies": {},  "Devdependencies": {},  "Scripts" : {    "test": "Echo \" Error:no test specified\ "&& exit 1"  },  "keywords" : [],  " Author ":",  "license": "ISC"}

3.2 Installing Webpack in a project

Now you can install Webpack in your project and use NPM's install command directly.

Install Webpack--save-dev

When you check the Package.json file again, it should be three more rows.

{  "name":"W1",  "version":"1.0.0",  "Description":"",  "Main":"Index.js",  "Dependencies": {},   "devdependencies": {  "webpack": " ^1.13.2 "   },  "Scripts": {    "Test":"echo \ "Error:no test specified\" && exit 1"  },  "keywords": [],  "author":"",  "License":"ISC"}

4. Hello, Webpack

4.1 Packaging Plain script files

Write a common script, for example, a hellowrold script. Of course, this should be hello,webpack.

function Hello () {    alert ("Hello, webpack!") );}

Save to the root of your project, the filename is called Hello.js

4.2 Creating a Webpack configuration file

The Webpack is packaged according to the configuration file configuration, and the default profile name is Webpack.config.js.

Webpack's job is simply to pack, you need to tell it what to pack, and where to export. The entry is the entrance, which is obviously output.

We have Webpack to package the Hello.js file and output it to the Bundle.js file.

Module.exports = {  //  ingress  entry: "./hello.js",  //  Output filename   : {    ' bundle.js '}  };

In the Command window, enter Webpack carriage return to execute. You should see the following output.

>1.13.2time:59ms    Asset     Size  Chunks             Chunk namesbundle.js  1.44 KB       0  [emitted]  main   [0]./hello.js bytes {0} [built]>

The default portal file name is Index.js, and if you rename Hello.js to Index.js, you can also use the directory name directly without providing a file name.

Module.exports = {  //  ingress, the default portal file is named Index.js  Entry: "." ,   // the file name of the output   output: {    ' bundle.js '}  ;

Reference URL: 1.

2.Webpack website address

3.webpack Document Address

Note command: Webpack use a webpack.config.js configuration file named, to compile the JSX, first install the corresponding loader:npm install jsx-loader --save-dev

1.webpack-----Module Loader and Packaging tool