webpack解析(1)

致愛麗絲發表於2021-05-25
Web

webpack是為現代js程式準備的靜態模組打包工具

一：關於對webpack的理解

可以將其認為是一個電腦主機板，由於使用js作為原始碼，因而其可以預設編譯js程式碼(別種型別的檔案可以依靠loaders或plugins)，因為其底層由node提供支援，因而其支援編譯common/esmodule的匯入方式。而其被三大框架使用的原因是生態————提供了近乎所有檔案的編譯工具，這也使得webpack對整個前端工程的支援近乎全面。

二：安裝

想要安裝使用webpack,應首先確保安裝node

截至當前，webpack更新到了5，筆者也使用的webpack5,node最低需12.x.x，可以命令列下使用node -v檢視node版本

命令列下輸入以下命令：

//全域性安裝
npm install webpack webpackcli -g  

//區域性安裝(推薦)
npm install webpack webpackcli -D
  • 問題1：推薦區域性安裝的原因

有時候可能專案的webpack版本不同，不同的webpack可能會存在不相容

  • 問題2：為什麼要安裝webpackcli，

webpackcli並不是必需的，三大框架並沒有安裝webpackcli，安裝webpackcli是由於當前命令列裡需要webpackcli執行webpack內的命令且需要一些引數時，換句話說，此刻webpack需要webpackcli執行帶引數的 命令，而webpackcli又依賴webpack(互相依存)

讀者也可以指定webpack版本：

// 如：npm install webpack@3.6.0
npm install webpack@xxxxx

三：嘗試寫一個小demo

  • 如果全域性安裝了webpack:
    全域性環境下，webpack命令可以在任一目錄中使用

為演示webpack同時支援es6匯入匯出和common匯入匯出，以下兩個非index.js檔案使用兩種方式

新建專案目錄：
—mydemo
______src
——————__index.js
——————__common.js
——————__esmodule.js
——index.html

//common.js
// node的匯出流
const common_export = function(){
  return '我是node的匯出流'
}
module.exports = {
  common_export
}


//esmodule.js
// es6的匯出流
export function es_export(){
  return '我是esmodule的匯出流'
}


// index.js
import { es_export  } from './esmodule'
const { common_export } = require('./common')
console.log(es_export(),common_export());

此時可以在mydemo目錄命令列下輸入webpack
即可生成一個dist目錄，且內部生成一個main.js的檔案，即如今專案結構顯示如下：
—mydemo
______dist
——————__main.js
______src
——————__index.js
——————__common.js
——————__esmodule.js
——index.html

假設讀者有live-server這個外掛且index.html中引入了./dist/main.js這個檔案，在live on browers以後控制檯會出現列印訊息：

此時可以做個總結：

  1. webpack天然支援js的兩種匯入匯出流
  2. 在輸入webpack後會預設將當前目錄下src目錄中的index.js作為入口，且會預設在當前目錄下生成dist目錄並將打包後的js檔案合併成./dist/main.js
  3. webpack天然支援生成靜態檔案，只需在index.html中引用打包後的main.js檔案即可
  • 區域性使用
    區域性環境下，想要執行webpack命令，需要將webpack作為node中的一個包使用，此時，需要使用npm包管理器，換句話說，需要node支援

想要使用node環境，需要使用npm init命令生成package.json目錄，這個目錄記錄當前npm的一些資訊，可以在這裡檢視已安裝的包目錄
如果目錄中有中文名，可以使用 npm init -y命令，這是由於node對中文的支援並不好
注：於全域性目錄此時保持一致

  1. 在新建目錄下進行npm初始化
    npm init -y
  2. 下載webpack包
    npm install webpack -D
    -D是指開發時要用到的依賴，-S是生產環境也要用到的依賴
    如果此時package.json中顯示有webpack包名，則說明區域性安裝成功

注意：此時此刻想要打包檔案，不應使用webpack命令，因為一但使用webpack命令，則會使用全域性的webpack進行打包————這與初衷不符
如何使用區域性webpack命令打包專案？

  1. 可以使用.bin

使用.bin預設查詢node-module下的webpack
.\node_modules\.bin\webpack

  1. 使用npx

使用npx將優先使用區域性webpack,同方法1一樣
npm webpack

  1. package.json的script欄位中，使用命令(推薦使用)

    如果是這種方式，可以使用npm run build命令，此時將預設執行區域性的webpack命令（本質上，所有區域性查詢的命令都是查詢node-modules裡的安裝的包並且執行這個包）

下一記：webpack本身的配置以及其loader配置

相關文章