這裏用一個react例子來總結webpack~

安裝搭建node環境

下載node地址：https://nodejs.org/en/download/

測試環境是否安裝成功，安裝成功之後執行命令可以看到node的版本號。

1 node -v//查看node版本

查看npm版本

1 npm -v//查看npm版本

現在準備環境做好，開始webpack之旅。

首先利用npm生成一個package.json文件，這裏生成一個默認的就可以。

1 npm init -y

安裝之後的package.json

 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": [],
10   "author": "",
11   "license": "ISC"
12 }

安裝webpack

安裝webpack 有兩種方式，一種是全局安裝

1 npm install -g webpack

一種是依賴安裝，將webpack信息依賴到package.json中

1 npm install --save-dev webpack

這裏采用第二種安裝方式，安裝之後會發現在package.json中的變化，package.json中多了webpack的信息。

 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": [],
10   "author": "",
11   "license": "ISC",
12   "devDependencies": {
13     "webpack": "^4.1.0"
14   }
15 }

要基於react，所以還要安裝一些必要的包

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

安裝之後的package.json

 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": [],
10   "author": "",
11   "license": "ISC",
12   "devDependencies": {
13     "babel-core": "^6.26.0",
14     "babel-loader": "^7.1.4",
15     "babel-preset-es2015": "^6.24.1",
16     "babel-preset-react": "^6.24.1",
17     "react": "^16.2.0",
18     "react-dom": "^16.2.0",
19     "webpack": "^4.1.0"
20   }
21 }

查看webpack版本號

1 webpack -v

執行結果

這裏應該註意的是webpack在4.0.0以後cli這個包單獨分出來了，需要重新安裝一下，執行命令

1 npm install webpack-cli -D

然後查看版本號

發現還是不行，解決方法：npm i -g webpack-cli -D --save(來自stackoverflow)

webpack簡單總結