目錄

  • Webpack
  • Webpack的安裝
  • Webpack的基本使用
  • Webpack的配置

Webpack

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。

當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle。

webpack為了可以正常運行，必須依賴node.js環境；npm（node packages manage）是為了管理node環境下的各種包。

Webpack的安裝

安裝Webpack首先要安裝node.js，node.js自帶了軟件包管理工具。

查看自己的node版本

C:\Users\shawn>node -v
v12.13.0

npm默認的倉庫地址是在國外網站，速度較慢，建議設置到淘寶鏡像。推薦一款切換鏡像的工具：nrm （切換鏡像的工具）。

我們首先安裝nrm，這裏-g代表全局安裝。可能需要一點兒時間

npm install 是npm安裝插件的固定寫法。

npm install nrm -g

然後通過nrm ls命令查看npm的倉庫列表,帶*的就是當前選中的鏡像倉庫：

前端workspace使用yarn和npm有區別嗎_json

通過nrm use taobao來指定要使用的鏡像源：

前端workspace使用yarn和npm有區別嗎_Webpack_02

全局安裝webpack 3.6.0版本，-g全局安裝

前端workspace使用yarn和npm有區別嗎_bundle_03

C:\Users\shawn>webpack -v
3.6.0

Webpack的基本使用

Webpack會將模塊化開發的js文件的依賴關係生成為一個最終的js文件，index.html只需要引用。

function add(num1, num2) {
  return num1 + num2;
}
function mul(num1, num2) {
  return num1 * num2;
}

export {add, mul};
import {add, mul} from './mathUtils.js'

console.log(add(1, 2));

console.log(mul(2, 3));

前端workspace使用yarn和npm有區別嗎_Webpack_04

Webpack的配置

在上一節，是需要手動webpack ./src/main.js ./dist/bundle.js輸出js文件的，現在通過配置的方式來實現。

webpack.config.js是手動創建的，用於配置webpack命令的入口和出口，其中出口output屬性是一個對象，path屬性必須動態獲取，這就需要node包中的"path"模塊，npm init命令，生成package.json文件。

如果package.json文件中有依賴一些文件，npm install命令進行安裝。

/* path屬性的值必須是絕對路徑，需要動態獲取
* 1、首先你要導入一個path模塊;(const path = require('path')),用到node相關的模塊,npm init;--->package.json文件生成,
* 如果package.json裏面有一些依賴時,npm install命令會安裝依賴。
* */


/* webpack.config.js作為一個模塊,導出打包入口和打包出口 */
const path = require('path');
module.exports = {
  /* 入口：指示 webpack 應該使用哪個模塊，來作為構建其內部依賴圖的開始 */
  entry: './src/main.js',
  /* 出口：告訴 webpack 在哪裏輸出它所創建的 bundles，以及如何命名這些文件 */
  output: {
    path: path.resolve(__dirname, 'dist'), /* resolve用於拼接路徑 */
    filename: 'my-first-webpack-bundle.js'
  }
}

前端workspace使用yarn和npm有區別嗎_json_05

npm run build 		"build": "webpack"
package.json中的scripts腳本在執行時，會按照一定順序尋找命令對應的位置，首先會尋找本地node_modules/.bin路徑下的webpack，依賴的是本地項目的webpack，如果沒有，使用全局的。
在本地命令行窗口安裝Webpack：
npm install webpack@3.6.0 --save-dev

package.json

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

devDependencies：開發時依賴

webpack的作用就是把js模塊的依賴關係打包到一個bundle.js文件，引入即可，所以在本地項目安裝完webpack後，只是開發時依賴，不是運行時依賴。