webpack踩坑系列之基礎篇

必備基礎

工欲善其事，必先利其器，在學習 webpack以前，須要先了解一些關於 nodejs以及 npm的基礎知識。

安裝nodejs

1. 打開nodejs官網（https://nodejs.org/en/）下載.msi裝文件，根據提示點擊下一步便可完成安裝；
2. 安裝完成後，打開命令行，執行node -v，若出現版本號，說明安裝成功。

利用npm初始化項目

npm是隨同 nodejs一塊兒安裝的包管理工具。

新建文件夾test-npm，進入test-npm文件夾（如下簡稱根目錄），打開命令行執行npm init -y即完成了項目的初始化，此時在test-npm文件夾下會生成package.json文件；

package.json定義了test-npm這個項目所須要的各類模塊，以及項目的配置信息，詳細內容以下：

{
  "name": "test-npm",  // 項目名稱
  "version": "1.0.0",  // 版本號
  "description": "",  // 項目描述
  "main": "index.js",  // 入口文件，當執行`require('test-npm')`時會執行`index.js`的代碼
  "scripts": {  // 當執行`npm run xxx`時會執行此處的命令，後面詳細介紹
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],  // 關鍵字
  "author": "",  // 做者
  "license": "ISC"  // 項目許可證
}

在根目錄下新建index.js，在index.js中輸入console.log(111)。修改package.json文件，在scripts屬性末尾添加"dev": "node index.js"，修改後package.json文件的內容以下：

{
  "name": "test-npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "node index.js"  // 當執行`npm run dev`時會執行`index.js`的代碼
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

打開命令行，執行npm run dev，此時控制檯會打印111。

安裝webpack

打開控制檯，在根目錄下執行npm install webpack webpack-cli -D，npm install xxx後面能夠跟--save（簡寫-S）或者--save-dev（簡寫-D），其中-S表明在線上環境會用到的模塊，-D表明本地開發須要依賴的模塊，不須要在線上運行。由於webpack只須要在本地運行，因此執行-S。同理，當咱們須要的模塊要在線上運行，那麼須要執行-S，例如：執行npm install express這裏的express須要在線上運行，因此執行-S；

等待安裝完成，package.json文件內容以下：

{
  "name": "test-npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {  // 本地開發須要依賴的模塊，線上環境不須要
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.5"
  },
  "dependencies": {  // 線上環境須要依賴的模塊
    "express": "^4.17.1"
  }
}

總結

以上即是npm常見的基礎知識，從下一節開始踩坑webpack的相關內容