webpack的使用

本文目錄一覽：

• 1、webpack的配置文件

• 2、webpack配置之自定義loader

• 3、Three.js遊戲開發入門

• 4、webpack打包多個js時怎麼排序

webpack的配置文件

webpack 的默認配置文件是 webpack.config.js ,所以在我們的項目根目錄下(02webpack-demo)新建一個webpack.config.js的文件，裡面啥都不寫，這個時候我們在終端中運行 npx webpack ,就會在根目錄下生成一個 dist 文件夾，裡面有一個 main.js ，這是 webpack 利用默認的配置項為我們打包生成的文件,接下來我們來簡單配置一下這個文件裡面的內容:

配置好文件後，再次運行 npx webpack ,這個時候在我們的項目目錄下就生成了一個 bundle 文件夾，裡面有一個 bundle.js 就是 webpack 幫我們翻譯好的文件了，在我們的 demo.html 中引入 bundle.js ，在瀏覽器中打開 demo.html 文件，可以看到我們列印的內容已經正確的出現在了瀏覽器控制台中了。

我們已經知道了 webpack 的默認配置文件的名字是 webpack.config.js ，那麼有沒有辦法修改這個名字呢？比如我想把這個名字改為 test.config.js 或者其他什麼名字，答案是有的，比如我改成了 test.js ，那麼在利用 webpack 進行打包的時候就應該運行 npx webpack –config test.js ，打包結果和上面的還是一樣的.

在上面的打包過程中，每次打包的時候都要執行 npx webpack 或者 npx webpack –config test.js ,你可能會覺得有點繁瑣，我們可以在 package.json 中的 scripts 中配置一個腳本，如下所示:

配置好腳本之後，在終端中執行 npm run bundle 這個命令， webpack 就會重新幫我們打包文件，這裡涉及到的知識點是 npm scripts ,它的原理是當我們在終端中執行 npm run bundle 的時候，實際上在運行的就是 package.json 配置中的 bundle 這個命令，而 bundle 這個命令的底層就是在幫我們執行 webpack 這個命令，這裡有一個點需要注意，如果我們在 scripts 中以命令的形式去執行 webpack 的時候，首先會在工程目錄下的 node-modules 下去找是否安裝了 webpack ，如果安裝了的話就會直接使用 node-modules 中的 webpack ,但是如果 node-modules 下面沒有 webpack ,就會去全局尋找 webpack

1.全局安裝的 webpack ,打包的之後在終端中運行 webpack index.js

2.局部安裝的 webpack ，打包的之後在終端中運行 npx webpack index.js

3.通過配置 npm scripts 腳本，打包的之後在終端中運行 npm run 你配置的腳本的內容 ，比如我配置的腳本為:

那麼在打包的時候運行 npm run test 即可

webpack配置之自定義loader

自己編寫一個Loader的過程是比較簡單的

官方文檔:

介面文檔:

簡單案例

1.創建一個替換源碼中字元串的loader

2.在配置文件中使用loader，這裡用的絕對路徑

其他引入自定義loader方式，可參考另外一篇文章– webpack中resolveLoader的使用方法

4. this.callback :如何返回多個信息，不止是處理好的源碼，我們可以使用this.callback來處理

先用setTimeout處理下試試，發現會報錯

我們使用 this.async 來處理，會返回 this.callback

Three.js遊戲開發入門

就在不久前，創建和部署 遊戲 的唯一方法是選擇像 Unity 或 Unreal 這樣的 遊戲 引擎，學習語言，然後打包 遊戲 並將其部署到你選擇的平台上。

試圖通過瀏覽器向用戶提供 遊戲 的想法似乎是一項不可能完成的任務。

幸運的是，由於瀏覽器技術的進步和硬體加速在所有流行的瀏覽器中都可用，JavaScript 性能的改進以及可用處理能力的穩步提高，為瀏覽器創建互動式 遊戲 體驗變得越來越普遍。

在本文中，我們將了解如何使用 Three.js 創建 遊戲 。但首先，讓我們回顧一下 Three.js 是什麼以及為什麼它是 遊戲 開發的好選擇。

Three.js 在 GitHub 上的項目描述恰當地將 Three.js 描述為「……一個易於使用、輕量級、跨瀏覽器的通用 3D 庫」。

Three.js 讓我們作為開發人員可以相對簡單地在屏幕上繪製 3D 對象和模型。如果沒有它，我們將需要直接與 WebGL 交互，雖然這並非不可能，但即使是最小的 遊戲 開發項目也會花費大量時間。

傳統上，「 遊戲 引擎」由多個部分組成。例如，Unity 和 Unreal 提供了一種將對象渲染到屏幕上的方法，但也提供了大量其他功能，如網路、物理等等。

然而，Three.js 的方法更受限制，不包括物理或網路之類的東西。但是，這種更簡單的方法意味著它更容易學習和更優化以做它最擅長的事情：將對象繪製到屏幕上。

它還有一組很棒的示例，我們可以使用它們來了解如何在屏幕上繪製各種對象。最後，它提供了一種簡單且原生的方式將我們的模型載入到我們的場景中。

如果不希望用戶需要通過應用商店下載應用或進行任何設置來玩你的 遊戲 ，那麼Three.js 作為 遊戲 開發引擎可能是一個有吸引力的選擇。如果你的 遊戲 在瀏覽器中運行，那麼進入門檻最低，這隻能是一件好事。

今天，我們將通過製作一個使用著色器、模型、動畫和 遊戲 邏輯的 遊戲 來瀏覽 Three.js。我們將創建的內容如下所示：

這個概念很簡單。我們控制著一艘火箭飛船，穿越一個星球，我們的目標是拾取能量晶體。我們還需要通過增加護盾來管理飛船的 健康 狀況，並盡量不要因為撞擊場景中的岩石而嚴重損壞我們的船。

在我們的運行結束時，火箭飛船返回天空中的母艦，如果用戶點擊 NEXT LEVEL ，他們會再次嘗試，這一次火箭要經過更長的路徑。

隨著用戶玩 遊戲 ，火箭飛船的速度會增加，因此他們必須更快地躲避岩石並收集能量晶體。

要創建這樣的 遊戲 ，我們必須回答以下問題：

到我們製作這款 遊戲 時，我們將克服這些挑戰。

不過，在我們開始編碼之前，我們必須回顧一些簡短的理論，特別是與我們將如何在 遊戲 中創造運動感有關。

想像一下，你在現實生活中控制著一架直升機，並且正在跟蹤地面上的一個物體。物體以逐漸增加的速度繼續前進。為了跟上，你必須逐漸提高你所在直升機的速度。

如果對直升機或地面上的物體的速度沒有限制，只要你想跟上地面上的物體，這種情況就會持續下去。

當創建一個跟隨對象的 遊戲 時，正如我們在本例中所做的那樣，應用相同的邏輯可能很誘人。也就是說，在世界空間中隨著物體的加速移動物體，並更新後面跟隨的相機的速度。然而，這提出了一個直接的問題。

基本上，每個玩這個 遊戲 的人都會在他們的手機或台式電腦上玩它。這些設備資源有限。如果我們嘗試在相機移動時生成可能無限數量的對象，然後移動該相機，最終我們將耗盡所有可用資源，並且瀏覽器選項卡將變得無響應或崩潰。

我們還需要創建一個代表海洋的平面（一個平面 2D 對象）。當我們這樣做時，我們必須給出海洋的尺寸。

然而，我們不能創建一個無限大的平面，我們也不能創建一個巨大的平面，只是希望用戶永遠不會在我們的關卡中前進到足以讓他們離開平面的程度。

那是糟糕的設計，並且希望人們玩我們的 遊戲 不足以體驗錯誤似乎違反直覺。

我們不是在一個方向上無限期地移動我們的相機，而是讓相機保持靜止並移動它周圍的環境。這有幾個好處。

一是我們總是知道火箭飛船在哪裡，因為火箭的位置不會移到遠處；它只會左右移動。這讓我們很容易判斷物體是否在相機後面，並且可以從場景中移除以釋放資源。

另一個好處是我們可以選擇遠處的一個點來創建對象。這意味著當物體接近玩家時，新的物品或物體將不斷地在玩家視野之外的距離創建。

當它們從視野中消失時，無論是玩家與它們發生碰撞還是從玩家身後消失，這些物品都會從場景中移除，以降低內存使用量。

要創建這種效果，我們需要做兩件事：首先，我們需要在程序上沿深度軸移動每個項目，以將對象移向相機。其次，我們必須為我們的水面提供一個可以抵消的值，並隨著時間的推移增加這個偏移量。

這將產生水面移動越來越快的效果。

現在我們已經解決了如何在場景中向前移動火箭，讓我們繼續設置我們的項目。

讓我們開始製作 遊戲 吧！我們需要做的第一件事是設置構建環境。對於這個例子，我選擇使用 Typescript 和 Webpack。這篇文章不是要討論這些技術的有點，所以除了快速總結之外，我不會在這裡詳細介紹它們。

使用 Webpack 意味著當我們開發項目並保存文件時，Webpack 將看到我們的文件已更改，並使用保存的更改自動重新載入瀏覽器。

這意味著我們無需在每次進行更改時手動刷新瀏覽器，從而節省大量時間。這也意味著我們可以使用像three-minifier這樣的插件，它可以在我們部署它時減小我們的包的大小。

在我們的示例中使用 TypeScript 意味著我們的項目將具有類型安全性。我發現這在使用 Three.js 的一些內部類型時特別有用，比如Vector3s 和Quaternions. 知道我將正確類型的值分配給變數是非常有價值的。

我們還將在 UI 中使用Materialize CSS。對於我們將用作 UI 的幾個按鈕和卡片，這個 CSS 框架將有很大幫助。

要開始我們的項目，請創建一個新文件夾。在文件夾中，創建一個package.json並粘貼以下內容：

然後，在命令窗口中，鍵入npm i以將包安裝到新項目中。

我們現在需要創建三個文件，一個基本的 Webpack 配置文件，然後是我們項目的開發和生產配置文件。

在項目文件夾中創建一個webpack.common.js文件並粘貼以下配置：

然後，創建一個webpack.dev.js文件並粘貼這些詳細信息。這配置了 Webpack 開發伺服器的熱重載功能：

最後，創建一個webpack.production.js文件並粘貼這些詳細信息：

我們需要做的下一件事是配置 TypeScript 環境以允許我們使用來自 JavaScript 文件的導入。為此，請創建一個tsconfig.json文件並粘貼以下詳細信息：

我們的構建環境現在已經配置好了。現在是時候開始為我們的玩家創造一個美麗而可信的場景了。

我們的場景包含以下元素：

我們將在一個名為 game.ts的文件中完成大部分工作，但我們也會將部分 遊戲 拆分為單獨的文件，這樣我們就不會得到一個非常長的文件。我們現在可以繼續創建文件game.ts。

因為我們正在處理一個非常複雜的主題，所以我還將包含指向此代碼在 GitHub 上的項目中的位置的鏈接。這應該有望幫助你保持自己的方向，而不是在更大的項目中迷失方向。

我們需要做的第一件事是創建一個Scene，以便 Three.js 有一些東西可以渲染。在我們的game.ts中，我們將添加以下行來構建我們的並將 一個ScenePerspectiveCamera放置在場景中，這樣我們就可以看到發生了什麼。

最後，我們將為稍後分配的渲染器創建一個引用：

為了設置我們的場景，我們需要執行一些任務，比如創建一個新的WebGLRenderer和設置我們想要繪製的畫布的大小。

為此，讓我們創建一個init函數並將其也放入我們的game.ts中。此init函數將為我們的場景執行初始設置，並且只運行一次（當 遊戲 首次載入時）：

我們還需要為場景利用渲染和動畫循環。我們需要動畫循環來根據需要在屏幕上移動對象，並且我們需要渲染循環來將新幀繪製到屏幕上。

讓我們繼續在game.ts中創建render函數。 一開始，這個函數看起來很簡單，因為它只是請求一個動畫幀然後渲染場景。

我們請求動畫幀的原因有很多，但其中一個主要原因是如果用戶更改選項卡，我們的 遊戲 將暫停，這將提高性能並減少設備上可能浪費的資源：

好了，現在我們有了一個空的場景，裡面有一個相機，但沒有別的了。讓我們在場景中添加一些水。

幸運的是，Three.js 包含一個我們可以在場景中使用的水對象示例。它包括實時反射，看起來相當不錯；你可以在這裡查看。

對我們來說幸運的是，這種水將完成我們在場景中想要做的大部分事情。我們唯一需要做的就是稍微改變水的著色器，這樣我們就可以在渲染循環中更新它。

我們這樣做是因為如果隨著時間的推移，我們越來越多地抵消我們的水紋理，那麼它會給我們帶來速度的感覺。

作為演示，下面就是我們 遊戲 的開場場景，但我每幀都增加了偏移量。隨著偏移量的增加，感覺就像我們下方海洋的速度正在增加（即使火箭實際上是靜止的）。

水對象可以在 Three.js GitHub 上找到。我們唯一需要做的就是做一個小的改變，使這個偏移量可以從我們的渲染循環中控制（所以我們可以隨著時間的推移更新它）。

我們要做的第一件事是在 Three.js 存儲庫中獲取 Water.js 示例的副本。我們將把這個文件objects/water.js放在我們的項目中。如果我們打開water.js文件，大約一半，我們將開始看到如下所示的內容：

這是海洋材質的著色器。著色器本身的介紹超出了本文的範圍，但基本上，它們是我們的 遊戲 將向用戶的計算機提供的關於如何繪製此特定對象的說明。

這裡還有我們的著色器代碼，它是用 OpenGraph 著色器語言 (GLSL) 編寫的，併合併到一個原本是 JavaScript 的文件中。

這沒有什麼問題，但是如果我們將這個著色器代碼單獨移動到一個文件中，那麼我們可以將 GLSL 支持安裝到我們選擇的 IDE 中，我們將獲得語法著色和驗證之類的東西，這有助於我們自定義 GLSL .

要將 GLSL 分解為單獨的文件，讓我們在當前objects目錄中創建一個shader目錄，選擇 我們的vertexShader和 fragmentShader 的內容， 並將它們分別移動到waterFragmentShader.glsl和waterVertexShader.glsl文件中。

在我們waterFragmentShader.glsl文件的頂部，我們有一個getNoise函數。默認情況下，它看起來像這樣：

為了使這個偏移量可以從我們的 遊戲 代碼中調整，我們想在我們的 GLSL 文件中添加一個參數，允許我們在執行期間對其進行修改。為此，我們必須將此函數替換為以下函數：

你會注意到我們在這個 GLSL 文件中包含了一個新變數：speed變數。這是我們將更新以提供速度感的變數。

在我們的game.ts中，現在需要配置水的設置。在我們文件的頂部，添加以下變數：

然後，在我們的init函數中，必須配置水平面的旋轉和位置，如下所示：

這將為海洋提供正確的旋轉。

Three.js 帶有一個相當令人信服的天空，我們可以在項目中免費使用它。你可以在此處的 Three.js 示例頁面中查看此示例。

在我們的項目中添加天空非常容易；只需要將天空添加到場景中，設置天空盒的大小，然後設置一些參數來控制天空的外觀。

我們需要對初始場景初始化做的最後一件事是添加一些光照並添加我們的火箭模型和母艦模型：

現在我們有了一些漂亮的水和火箭的場景。但是，我們缺乏任何可以真正使它成為 遊戲 的東西。為了解決這個問題，我們需要構建一些基本參數來控制 遊戲 並允許玩家朝著某些目標前進。

在我們game.ts文件的頂部，我們將添加以下sceneConfiguration變數，這有助於我們跟蹤場景中的對象：

現在，我們必須為玩家所在的當前關卡執行初始化。這個場景設置函數很重要，因為每次用戶開始一個新的關卡時都會調用它。

因此，我們需要將火箭的位置設置回起點並清理所有正在使用的舊資產。我在代碼行內添加了一些注釋，以便你可以看到每一行在做什麼：

我們預計有兩種類型的設備可以玩我們的 遊戲 ：台式電腦和手機。為此，我們需要適應兩種類型的輸入選項：

現在讓我們配置這些。

在我們game.ts的開始，我們將添加以下變數來跟蹤鍵盤上是否按下了左鍵或右鍵：

然後，在我們的init函數中，我們將註冊keydownandkeyup事件來分別調用onKeyDownandonKeyUp函數：

最後，對於鍵盤輸入，我們將記錄按下這些鍵時要執行的操作：

我們的移動用戶沒有鍵盤可以輸入，因此，我們將使用nippleJS在屏幕上創建一個操縱桿，並使用操縱桿的輸出來影響火箭在屏幕上的位置。

在我們的init函數中，我們將通過檢查它在屏幕上是否有非零數量的觸摸點來檢查設備是否是觸摸設備。如果是，我們將創建操縱桿，但一旦玩家釋放操縱桿的控制，我們還將將火箭的運動設置回零：

在我們的animate函數中，我們會跟蹤此時按下左鍵或右鍵或操縱桿是否正在使用中的操作。我們還將火箭的位置夾在可接受的左右位置，這樣火箭就不能完全移出屏幕：

正如我們已經討論過的，火箭飛船在我們的場景中保持靜止，並且物體朝它移動。這些物體移動的速度隨著用戶繼續玩而逐漸增加，隨著時間的推移增加了關卡的難度。

仍然在我們的動畫循環中，我們希望逐步將這些對象移向玩家。當對象離開玩家的視野時，我們希望將它們從場景中移除，這樣我們就不會佔用玩家計算機上不必要的資源。

在我們的渲染循環中，我們可以像這樣設置這個功能：

我們可以看到有幾個函數是這個調用的一部分：

讓我們 探索 一下這些函數在我們的 遊戲 中完成了什麼。

碰撞檢測是我們 遊戲 的重要途徑。沒有它，我們將不知道我們的火箭飛船是否達到了任何目標，或者它是否撞到了岩石並應該減速。這就是我們想要在 遊戲 中使用碰撞檢測的原因。

通常，我們可以使用物理引擎來檢測場景中對象之間的碰撞，但是 Three.js 沒有包含物理引擎。

不過，這並不是說 Three.js 不存在物理引擎。他們當然可以，但是為了我們的需要，我們不需要添加物理引擎來檢查我們的火箭是否擊中了另一個物體。

本質上，我們想回答這個問題，「我的火箭模型目前是否與屏幕上的任何其他模型相交？」 我們還需要根據受到的打擊以某些方式做出反應。

例如，如果我們的玩家不斷將火箭撞到岩石上，我們需要在受到一定程度的傷害後結束關卡。

為了實現這一點，讓我們創建一個函數來檢查我們的火箭和場景中的對象的交集。根據玩家擊中的內容，我們會做出相應的反應。

我們將把這段代碼放在我們的game目錄中的一個collisionDetection.ts文件中：

對於碰撞檢測，我們唯一需要做的另一件事是添加一個短動畫，當用戶與對象碰撞時播放該動畫。此函數將獲取發生碰撞的位置並從該原點生成一些框。

完成的結果將如下所示。

為了實現這一點，我們必須在碰撞發生的地方創建一個圓圈中的盒子，並將它們向外設置動畫，這樣看起來它們就像從碰撞中爆炸一樣。為此，讓我們在collisionDetection.ts文件中添加此功能：

這就是我們整理出來的碰撞檢測，當物體被破壞時會有一個漂亮的動畫。

隨著場景的進行，我們希望在玩家的兩側添加一些懸崖，這樣感覺就像他們的運動在某個空間內得到了適當的限制。我們使用模運算符在程序上將岩石添加到用戶的右側或左側：

隨著場景的進行，我們還希望將「挑戰行」添加到場景中。這些是包含岩石、水晶或盾牌物品的物體。每次創建這些新行中的一個時，我們都會為每一行隨機分配岩石、水晶和盾牌。

因此，在上面的示例中，單元格 1、2 和 4 沒有添加任何內容，而單元格 3 和 5 分別添加了水晶和盾牌項目。

為了實現這一點，我們將這些挑戰行分為五個不同的單元格。我們根據隨機函數的輸出在每個單元格中生成某個項目，如下所示：

可以在這些鏈接中的任何一個查看岩石、水晶和盾牌創建功能。

我們需要在渲染循環中完成的最後一件事是：

在我們的渲染函數結束時，我們可以添加以下代碼來適應這個功能：

這就是我們的渲染循環完成了。

當人們載入我們的 遊戲 時，他們會看到一些讓他們能夠開始玩的按鈕。

這些只是簡單的 HTML 元素，我們根據 遊戲 中發生的情況以編程方式顯示或隱藏它們。問題圖標讓玩家對 遊戲 的內容有所了解，並包含有關如何玩 遊戲 的說明。它還包括我們模型的（非常重要的！）許可證。

並且，按下紅色按鈕開始 遊戲 。請注意，當我們點擊紅色的「播放」按鈕時，攝像機會移動並旋轉到火箭後面，讓玩家準備好開始場景。

在我們的場景init函數中，我們將要執行此操作的事件註冊到此按鈕的onClick處理程序。要創建旋轉和移動功能，我們需要執行以下操作：

為此，我們將在init函數中添加以下代碼，如下所示：

當我們的關卡結束時，我們還必須連接我們的邏輯，並且可以在此處查看執行此操作的代碼。

在 Three.js 中創建 遊戲 可以讓你接觸到數量驚人的潛在客戶。由於人們可以在瀏覽器中玩 遊戲 而無需下載或安裝到他們的設備上，因此它成為開發和分發 遊戲 的一種非常有吸引力的方式。

正如我們所見，為廣泛的用戶創造一種引人入勝且有趣的體驗是非常有可能的。所以，唯一需要解決的是，你將在 Three.js 中創建什麼？

原文鏈接：

webpack打包多個js時怎麼排序

寫頁面，大概都是這樣的結構： index.html css style.css js index.js ……….. 這樣我們的html里直接引用css和js，完成一個網頁應用。用webpack也類似，只是webpack把圖片、css和js都編譯打包成一個文件，我們只需要引用一個文件就可以了。 …