Rumah > Artikel > hujung hadapan web > Bermula dengan Webpack: Bahagian 1
Bermula dengan Webpack: Bahagian 1
- PHPzasal
- 2023-08-27 08:49:07696semak imbas
Apabila membina tapak web pada hari ini, merupakan amalan biasa untuk mempunyai beberapa jenis proses binaan untuk membantu melaksanakan tugas pembangunan dan menyediakan fail untuk persekitaran langsung.
Anda boleh melakukan ini menggunakan Grunt atau Gulp, membina satu siri transformasi yang membolehkan anda meletakkan kod pada satu hujung dan mendapatkan beberapa CSS dan JavaScript yang dikecilkan pada yang lain.
Alat ini sangat popular dan sangat berguna. Walau bagaimanapun, terdapat cara lain dan itu adalah menggunakan Webpack.
Apakah itu Webpack?
Webpack ialah apa yang dipanggil "module bundler". Ia memerlukan modul JavaScript, memahami kebergantungan mereka, kemudian menghubungkannya bersama-sama dengan cara yang paling cekap, dan akhirnya menjana fail JS. Tiada yang istimewa, bukan? Perkara seperti RequireJS telah melakukan ini selama bertahun-tahun.
Nah, inilah perkaranya. Dengan Webpack, modul tidak lagi terhad kepada fail JavaScript. Dengan menggunakan Loaders, Webpack mengetahui bahawa modul JavaScript mungkin memerlukan fail CSS dan fail CSS mungkin memerlukan imej. Aset output akan mengandungi hanya apa yang diperlukan dan tidak akan menyebabkan terlalu banyak masalah. Mari kita mula menyediakannya supaya kita dapat melihatnya dalam tindakan.
Pemasangan
Seperti kebanyakan alat pembangunan, anda perlu memasang Node.js sebelum anda boleh meneruskan. Dengan mengandaikan anda telah menyediakannya dengan betul, semua yang anda perlu lakukan untuk memasang Webpack ialah taip yang berikut ke dalam baris arahan.
npm install webpack -g
Ini akan memasang Webpack dan membolehkan anda menjalankannya dari mana-mana sahaja pada sistem anda. Seterusnya, buat direktori baharu dan buat fail HTML asas di dalamnya seperti ini:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack fun</title>
</head>
<body>
<h2></h2>
<script src="bundle.js"></script>
</body>
</html>
Bahagian penting di sini ialah rujukan kepada bundle.js, inilah yang akan dibuat oleh Webpack untuk kita. Juga perhatikan elemen H2 - kami akan menggunakannya kemudian. 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
main.js, anda boleh bayangkan bahawa ia adalah titik masuk utama skrip kami. Kemudian namakan say-hello.js kedua. Ini akan menjadi modul mudah yang mengambil nama seseorang dan elemen DOM dan memasukkan mesej alu-aluan ke dalam elemen tersebut. 🎜
npm install babel-loader babel-core babel-preset-es2015 --save-dev🎜Sekarang kita mempunyai modul ringkas, kita boleh mengimportnya dan memanggilnya daripada
main.js. Semudah melakukan perkara berikut: 🎜
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
],
}
};
🎜Sekarang, jika kami membuka fail HTML, jelas sekali mesej ini tidak akan dipaparkan kerana kami tidak memasukkan main.js atau menyusun kebergantungan penyemak imbas. Apa yang perlu kita lakukan ialah meminta Webpack melihat main.js dan lihat jika ia mempunyai sebarang kebergantungan. Jika ya, ia harus menyusunnya bersama-sama dan mencipta fail bundle.js yang boleh kita gunakan dalam penyemak imbas. 🎜
🎜Kembali ke terminal dan jalankan Webpack. Hanya masukkan: 🎜
const sayHello = require('./say-hello')
🎜Fail pertama yang dinyatakan ialah fail kemasukan di mana kami mahu Webpack mula mencari kebergantungan. Ia akan mengetahui sama ada mana-mana fail yang diperlukan memerlukan sebarang fail lain, dan akan terus berbuat demikian sehingga semua kebergantungan yang diperlukan telah dikira. Setelah selesai, ia mengeluarkan kebergantungan sebagai satu fail bercantum kepada bundle.js. Jika anda menekan Enter, anda sepatutnya melihat sesuatu seperti ini: 🎜
rrreee
🎜Sekarang buka index.html dalam penyemak imbas anda untuk melihat halaman anda dan bertanya khabar. 🎜
🎜Tatarajah🎜
🎜Menentukan fail input dan output setiap kali anda menjalankan Webpack bukanlah sesuatu yang menyeronokkan. Syukurlah, Webpack menyelamatkan kami daripada masalah dengan membenarkan kami menggunakan fail konfigurasi. Buat fail bernama webpack.config.js dalam direktori akar projek anda dengan kandungan berikut: 🎜
rrreee
🎜 Kini kita hanya boleh menaip webpack dan mendapatkan hasil yang sama. 🎜
🎜Pelayan Pembangunan🎜
🎜Apa itu? Adakah anda bersusah payah menaip webpack setiap kali anda menukar fail? Entahlah, generasi hari ini bla bla bla. Okay, mari kita sediakan pelayan pembangunan kecil untuk menjadikan perkara lebih cekap. Di terminal tulis: 🎜
rrreee
🎜Kemudian jalankan arahan webpack-dev-server. Ini akan memulakan pelayan web mudah berjalan, menggunakan direktori semasa sebagai lokasi untuk menyampaikan fail. Buka tetingkap penyemak imbas baharu dan lawati http://localhost:8080/webpack-dev-server/. Jika semuanya berjalan lancar, anda akan melihat sesuatu seperti ini: 🎜
🎜Kini, kami bukan sahaja mempunyai pelayan web kecil yang bagus, tetapi kami juga mempunyai pelayan yang boleh memantau perubahan kod. Jika ia melihat bahawa kami telah menukar fail, ia secara automatik menjalankan arahan webpack untuk menggabungkan kod kami dan menyegarkan halaman tanpa kami perlu melakukan apa-apa. Semua dengan konfigurasi sifar. 🎜
🎜 Cubalah, tukar nama yang diserahkan kepada fungsi sayHello, kemudian tukar kembali ke penyemak imbas untuk melihat perubahan yang digunakan serta-merta. 🎜
装载机
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 和图像添加到您的页面，以及让您的网站做好部署准备。
Atas ialah kandungan terperinci Bermula dengan Webpack: Bahagian 1. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!