Webpack 入門：第 1 部分
- PHPz原創
- 2023-08-27 08:49:07717瀏覽
如今，在建立網站時，採用某種建立流程來幫助執行開發任務並為即時環境準備文件是相當標準的做法。
您可以使用 Grunt 或 Gulp 來實現此目的，建立一系列轉換，讓您可以將程式碼放在一端，並在另一端取得一些縮小的 CSS 和 JavaScript。
這些工具非常流行且非常有用。然而，還有另一種方法，就是使用 Webpack。
什麼是 Webpack？
Webpack 是所謂的「模組捆綁器」。它需要 JavaScript 模組，了解它們的依賴關係，然後以最有效的方式將它們連接在一起，最後產生一個 JS 檔案。沒什麼特別的，對吧？像 RequireJS 這樣的東西多年來一直在這樣做。
嗯，事情是這樣的。使用 Webpack，模組不再局限於 JavaScript 檔案。透過使用 Loaders，Webpack 知道 JavaScript 模組可能需要 CSS 文件，而 CSS 文件可能需要圖片。輸出的資產將只包含所需的內容，並且不會產生太大的麻煩。讓我們開始設置，以便我們可以看到它的實際效果。
安裝
與大多數開發工具一樣，您需要先安裝 Node.js，然後才能繼續。假設您已正確設置，安裝 Webpack 所需要做的就是在命令列中鍵入以下內容。
npm install webpack -g
這將安裝 Webpack 並允許您從系統上的任何位置運行它。接下來，建立一個新目錄並在其中建立一個基本的 HTML 文件，如下所示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack fun</title>
</head>
<body>
<h2></h2>
<script src="bundle.js"></script>
</body>
</html>
這裡重要的部分是對 bundle.js 的引用，這就是 Webpack 將為我們製作的內容。另請注意 H2 元素 - 我們稍後將使用它。
接下來，在 HTML 檔案所在的目錄中建立兩個檔案。將第一個命名為 main.js，您可以想像它是我們腳本的主要入口點。然後將第二個say-hello.js。這將是一個簡單的模組，它會取得一個人的名字和 DOM 元素，並將歡迎訊息插入到所述元素中。
// say-hello.js
module.exports = function (name, element) {
element.textContent = 'Hello ' + name + '!';
};
現在我們有了一個簡單的模組，我們可以引入它並從 main.js 呼叫它。這就像執行以下操作一樣簡單：
var sayHello = require('./say-hello');
sayHello('Guybrush', document.querySelector('h2'));
現在，如果我們打開 HTML 文件，那麼顯然不會顯示此訊息，因為我們沒有包含 main.js 也沒有編譯瀏覽器的依賴項。我們需要做的是讓 Webpack 查看 main.js 並查看它是否有任何依賴項。如果是，它應該將它們編譯在一起並創建一個我們可以在瀏覽器中使用的bundle.js 檔案。
返回終端機運行 Webpack。只要輸入：
webpack main.js bundle.js
指定的第一個檔案是我們希望 Webpack 開始在其中尋找依賴項的入口檔案。它將計算任何必需的文件是否需要任何其他文件，並將繼續執行此操作，直到計算出所有必要的依賴項。完成後，它將依賴項作為單一串聯檔案輸出到 bundle.js。如果按下回車鍵，您應該會看到以下內容：
Hash: 3d7d7339a68244b03c68
Version: webpack 1.12.12
Time: 55ms
Asset Size Chunks Chunk Names
bundle.js 1.65 kB 0 [emitted] main
[0] ./main.js 90 bytes {0} [built]
[1] ./say-hello.js 94 bytes {0} [built]
現在在瀏覽器中開啟 index.html 即可看到您的頁面打招呼。
配置
每次執行 Webpack 時指定輸入和輸出檔案並不是很有趣。值得慶幸的是，Webpack 允許我們使用設定檔來省去我們的麻煩。在專案的根目錄中建立一個名為 webpack.config.js 的文件，其中包含以下內容：
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
現在我們只要輸入 webpack 即可得到相同的結果。
開發伺服器
那是什麼？每次更改文件時，您甚至都懶得輸入 webpack 嗎？我不知道，今天的世代等等等等。好吧，讓我們建立一個小型的開發伺服器，讓事情變得更有效率。在終端寫入：
npm install webpack-dev-server -g
然後執行指令 webpack-dev-server。這將啟動一個簡單的網路伺服器運行，使用當前目錄作為提供檔案的位置。開啟一個新的瀏覽器視窗並造訪 http://localhost:8080/webpack-dev-server/。如果一切順利，您將看到類似以下內容：
現在，我們不僅有一個漂亮的小型 Web 伺服器，而且還有一個可以監視程式碼變更的伺服器。如果它發現我們更改了文件，它會自動運行 webpack 命令來捆綁我們的程式碼並刷新頁面，而無需我們做任何事情。全部為零配置。
嘗試一下，更改傳遞給 sayHello 函數的名稱，然後切換回瀏覽器以查看立即應用的變更。
装载机
Webpack 最重要的功能之一是加载器。加载器类似于 Grunt 和 Gulp 中的“任务”。它们本质上是获取文件并以某种方式对其进行转换，然后再将其包含在我们的捆绑代码中。
假设我们想在代码中使用 ES2015 的一些优点。 ES2015 是 JavaScript 的新版本，并非所有浏览器都支持，因此我们需要使用加载器将 ES2015 代码转换为支持的普通旧 ES5 代码。为此，我们使用流行的 Babel Loader，根据说明，我们安装如下：
npm install babel-loader babel-core babel-preset-es2015 --save-dev
这不仅会安装加载器本身，还会安装其依赖项和 ES2015 预设，因为 Babel 需要知道它正在转换的 JavaScript 类型。
现在加载器已安装，我们只需要告诉 Babel 使用它即可。更新 webpack.config.js 使其看起来像这样：
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
],
}
};
这里有一些重要的事情需要注意。第一个是 test: /\.js$/ 行，它是一个正则表达式，告诉我们将此加载程序应用于所有具有 .js 扩展名的文件。同样，exclude: /node_modules/ 告诉 Webpack 忽略 node_modules 目录。 loader 和 query 是相当不言自明的——使用带有 ES2015 预设的 Babel 加载器。
按 ctrl+c 并再次运行 webpack-dev-server 重新启动您的 Web 服务器。我们现在需要做的就是使用一些 ES6 代码来测试转换。我们如何将 sayHello 变量更改为常量？
const sayHello = require('./say-hello')
保存后，Webpack 应该会自动重新编译您的代码并刷新您的浏览器。希望您不会看到任何变化。查看 bundle.js 并查看是否可以找到 const 关键字。如果 Webpack 和 Babel 已经完成了它们的工作，您将不会在任何地方看到它——只是普通的旧 JavaScript。
进入第 2 部分
在本教程的第 2 部分中，我们将介绍如何使用 Webpack 将 CSS 和图像添加到您的页面，以及让您的网站做好部署准备。
以上是Webpack 入門：第 1 部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！