Webpack 簡介

Home >> Blog >> Webpack 簡介

Webpack 簡介

介紹

假設您聽說過 webpack — 這就是您找到這裡的原因，對吧？真正的問題是你對它了解多少？你可能知道一些關於webpack的事情，比如它是如何工作的，或者你可能完全不知道。不管怎樣，我可以向你保證，在閱讀完這篇文章之後，你可能會對整個webpack 的情況感到滿意。

畢竟——"需要"是發明之母……

一個完美的方式來說明為什麼 webpack 存在是上面的引用。但是為了更好地理解它，我們需要回到過去，回到 JavaScript 還不是新的性感事物的時候，在那個古老的時代，一個網站只是一小撮舊的. html、CSS，在某些情況下可能還有一個或幾個 JavaScript 文件。但很快這一切都將改變。

出了什麼問題？

整個開發社群都在不斷尋求改善使用和構建 javascript/Web 應用程式的整體用戶和SEO搜尋引擎優化開發人員體驗。因此，我們看到引入了很多新的庫和框架 。

一些設計模式也隨著時間的推移而發展，為開發人員提供了一種更好、更強大但非常簡單的方式來編寫複雜的 JavaScript 應用程式。以前的網站不再只是一個包含奇數個文件的小包。他們表示，隨著JavaScript 模塊的引入，體積越來越大，因為編寫封裝的小塊程式碼是新趨勢。最終，所有這些都導致​​我們在整個應用程式包中有 4 倍或 5 倍的文件。

不僅應用程式的整體大小是一個挑戰，而且在開發人員編寫的程式碼類型和瀏覽器可以理解的程式碼類型之間存在巨大差距。開發人員必須使用大量稱為polyfills的輔助程式碼來確保瀏覽器能夠解釋其包中的程式碼。

為了解決這些問題，創建了 webpack。Webpack 是一個靜態模塊打包器。

那麼 Webpack 是如何解決的呢？

簡而言之，Webpack 會遍歷您的包並創建它所謂的依賴關係圖，該依賴關係圖由您的 web 應用程式按預期運行所需的各種模塊組成。然後，根據此圖，它創建一個新包，其中包含所需的最少數量的文件，通常只有一個 bundle.js 文件，可以輕鬆插入 html 文件並用於應用程式。

在本文的下一部分中，我將帶您逐步完成 webpack 的設置。最後，希望你了解 Webpack 的基礎知識。所以讓我們開始吧……

我們在建造什麼？

你可能聽說過ReactJS。如果你了解 reactJS，你可能知道create-react-app是什麼。對於那些不知道這兩件事是什麼的人來說，ReactJS 是一個 UI 庫，它對構建智能複雜的 UI 非常有幫助，而create-react-app 是一個 用於設置或引導樣板開發設置的 CLI 工具製作 React 應用程式。

今天我們將創建一個簡單的 React 應用程式，但不使用 create-react-app CLI。我希望這聽起來對你來說足夠有趣。:)

安裝階段

npm int

沒錯，這就是幾乎所有美好事物的開始：普通的舊 npm init。我將使用 VS Code，但您可以隨意使用任何您喜歡的程式碼編輯器來開始工作。

在你可以做任何這些之前，請確保你的機器上本地安裝了最新的nodeJS和npm版本。單擊每個鏈接以了解有關該過程的更多資訊。

$ npm init

這將創建一個啟動包並為我們添加一個 package.json 文件。這裡將提到構建此應用程式所需的所有依賴項。

現在要創建一個簡單的 React 應用程式，我們需要兩個主要庫：React 和 ReactDOM。因此，讓我們使用 npm 將它們作為依賴項添加到我們的應用程式中。

$ npm i react react-dom --save

接下來我們需要添加 webpack，以便我們可以將我們的應用程式捆綁在一起。不僅捆綁，而且我們還需要熱重載，這可以使用 webpack 開發服務器。

$ npm i webpack webpack-dev-server webpack-cli --save--dev

是指定這些--save--dev模塊只是開發依賴項。現在，由於我們正在使用 React，我們必須記住 React 使用 ES6 類和 import 語句，這是所有瀏覽器可能無法理解的。為了確保所有瀏覽器都可以讀取程式碼，我們需要一個像 babel 這樣的工具來將我們的程式碼轉換為瀏覽器的正常可讀程式碼。

$ npm i babel-core babel-loader @babel/preset-react @babel/preset-env html-webpack-plugin --save-dev

好吧，我們能說什麼，這是我承諾的最大安裝次數。對於 babel，我們首先加載了核心 babel 庫，然後是加載器，最後是 2 個插件或預設，專門用於 React 以及所有新的 ES2015 和 ES6 及更高版本的程式碼。

繼續，讓我們添加一些程式碼並開始 webpack 配置。

到目前為止，這就是 package.json 文件應該如何處理所有安裝。根據您閱讀本文的時間，您可能有不同的版本號。

編寫程式碼

讓我們首先在應用程式結構的根目錄中添加一個webpack.config.js文件。在 webpack.config 文件中添加以下程式碼。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
//This property defines where the application starts
entry:'./src/index.js',

//This property defines the file path and the file name which will be used for deploying the bundled file
output:{
path: path.join(__dirname, '/dist'),
filename: 'bundle.js'
},

//Setup loaders
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},

// Setup plugin to use a HTML file for serving bundled js files
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}

好的，讓我們理解上面的行。

首先，我們首先要求默認路徑模塊訪問文件位置並更改文件位置。

接下來，我們需要 HTMLWebpackPlugin 生成一個 HTML 文件，用於提供捆綁的 JavaScript 文件/文件。點擊鏈接閱讀更多關於HTMLWebpackPlugin的內容。

然後我們有 export.module 對象，其中包含一些屬性。第一個是entry 屬性， 用於指定 webpack 應該從哪個文件開始以獲取創建的內部依賴圖。

module.exports = {
entry:'./src/index.js'
}

接下來是輸出屬性，指定應在何處生成捆綁文件以及捆綁文件的名稱。這是由output.path和output.filename屬性完成的。

module.exports = {
//This property defines the file path and the file name which will be used for deploying the bundled file
output:{
path: path.join(__dirname, '/dist'),
filename: 'bundle.js'
},
}

接下來是裝載機。這是為了指定 webpack 應該為文件的特定類型做什麼。請記住，開箱即用的 webpack 只能理解 JavaScript 和 JSON，但是如果您的項目使用了任何其他語言，則可以在此處指定如何使用該新語言。

module.exports = {
//Setup loaders
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
}

該資訊應在每個模塊屬性的對像中指定，該對像還具有一組規則。每個案例都會有一個對象。我還指定排除我的 node_modules 文件夾中的所有內容。

接下來是插件屬性。這用於擴展 webpack 的功能。在模塊導出對象內的插件數組中使用插件之前，我們需要同樣的要求。

module.exports = {
// Setup plugin to use a HTML file for serving bundled js files
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}

如前所述，這個特定的插件將使用我們 src 文件夾中的指定文件。然後它將使用它作為我們的 HTML 文件的模板，所有捆綁的文件都將被自動注入。我們可以使用許多其他開箱即用的插件——查看官方頁面了解更多資訊。

我們需要做的最後一件事是創建一個 .babelrc 文件來使用我們安裝的 babel 預設，並在我們的程式碼中處理 ES6 類和 import 語句。將以下程式碼行添加到 .babelrc 文件中。

{
"presets": ["env", "react"]
}

就這樣，現在 babel 將能夠使用這些預設。好的，設置到此為止——讓我們添加一些 React 程式碼來看看它是如何工作的。

反應程式碼

由於應用程式的起點是 src 文件夾中的 index.js 文件，讓我們從它開始。在這種情況下，我們首先需要React和ReactDOM才能使用。在 index.js 文件中添加以下程式碼。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './Components/App';

ReactDOM.render(, document.getElementById('app'));

因此，我們只需從您將創建的 components 文件夾中導入另一個文件，然後在名為 App.js 的文件夾中添加另一個文件。那麼讓我們看看 App.js 文件裡面有什麼：

import React, { Component } from 'react'

class App extends Component {
render() {
return (
< div>
< h1>Webpack + React setup
< /div>
)
}
}

export default App;

我們快完成了。現在唯一剩下的就是啟用熱重載。這意味著每次檢測到更改時，瀏覽器都會自動重新加載頁面，並有能力在時機成熟時構建和捆綁整個應用程式。

我們可以通過在 package.json 文件中添加腳本值來做到這一點。刪除 package.json 文件的 scripts 對像中的 test 屬性並添加以下兩個腳本：

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

你都準備好了！轉到您的終端，導航到根文件夾，然後運行npm start。它應該在您的計算機上啟動一個開發服務器並在您的瀏覽器中提供 HTML 文件。如果您進行任何次要/主要更改並保存程式碼，您的瀏覽器將自動刷新以顯示最新的更改集。

一旦您認為您已準備好捆綁應用程式，您只需點擊命令npm build， webpack 將在您的項目文件夾中創建一個優化的捆綁包，可以部署在任何 Web 服務器上。

結論

這只是 webpack 和 babel 的一個小應用程式或用例，但應用程式是無限的。我希望你足夠興奮去探索更多使用 webpack 和 babel 做事的選項和方法。請參考他們的官方網站以了解更多資訊並深入閱讀。

我已經創建了一個包含所有程式碼的 Github 存儲庫，所以如果有任何問題，請參考它。

ashishcodes4/webpack-react-setup
在不使用 CLI 的情況下從頭開始設置 React 應用程式 -
ashishcodes4/webpack-react-setup github.com

我對 webpack 的兩分錢？好吧，有時您可能會認為它只不過是一種工具，為什麼要為工具費心呢？但是當我這樣說的時候請相信我：在學習 webpack 的過程中最初的掙扎會為你節省大量的時間，否則你會在沒有 webpack 的情況下投入開發。/p>

這就是現在的全部內容，希望很快能再回來一篇有趣的文章。我希望你喜歡閱讀這篇文章！

如果您在執行上述任何步驟/流程時遇到任何困難或問題，請隨時與我們聯繫並發表評論。