Webpack Simple Summary

Here is a react example to summarize webpack~

Install and build node environment

Download node Address: https://nodejs.org/en/download/

The test environment is installed successfully and the command can see the version number of node after the installation is successful.

1 node-v// View node version

View NPM Versions

1 npm-v// view NPM version

Now prepare the environment to do well and start the Webpack journey.

First use NPM to generate a Package.json file, where a default is generated.

1 npm init-y

Package.json after installation

1 {2"Name": "Webpacktest",3"Version": "1.0.0",4"description": "",5"Main": "Index.js",6"Scripts": {7"Test": "Echo \" Error:no test specified\ "&& exit 1"8   },9"keywords": [],Ten"Author": "", One"License": "ISC" A}

Installing Webpack

There are two ways to install Webpack, one of which is global installation

1 npm install-g webpack

One is to rely on the installation, to rely on the Webpack information in Package.json

1 npm install--save-dev webpack

Here the second installation method, after installation will find in the Package.json changes, Package.json more webpack information.

1 {2"Name": "Webpacktest",3"Version": "1.0.0",4"description": "",5"Main": "Index.js",6"Scripts": {7"Test": "Echo \" Error:no test specified\ "&& exit 1"8   },9"keywords": [],Ten"Author": "", One"License": "ISC", A"Devdependencies": { -"Webpack": "^4.1.0" -   } the}

To be based on react, you also need to install some necessary packages

1 npm install react react-dom babel-core babel-loader babel-preset-es2015 babel-preset-react--save-dev

Package.json after installation

1 {2"Name": "Webpacktest",3"Version": "1.0.0",4"description": "",5"Main": "Index.js",6"Scripts": {7"Test": "Echo \" Error:no test specified\ "&& exit 1"8   },9"keywords": [],Ten"Author": "", One"License": "ISC", A"Devdependencies": { -"Babel-core": "^6.26.0", -"Babel-loader": "^7.1.4", the"babel-preset-es2015": "^6.24.1", -"Babel-preset-react": "^6.24.1", -"React": "^16.2.0", -"React-dom": "^16.2.0", +"Webpack": "^4.1.0" -   } +}

View Webpack Version number

1 webpack-v

Execution results

It should be noted here that webpack after 4.0.0 CLI This package separately, need to reinstall, execute command

1 npm Install webpack-cli-d

Then view the version number

Find or not, Solution: NPM i-g webpack-cli-d--save (from StackOverflow)

Webpack Simple Summary