Bermula dengan Webpack: Bahagian 1-html tutorial-php.cn

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

Salin selepas log masuk

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>

Salin selepas log masuk

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 + '!';
};

Salin selepas log masuk

现在我们有了一个简单的模块，我们可以引入它并从 main.js 调用它。这就像执行以下操作一样简单：

var sayHello = require('./say-hello');

sayHello('Guybrush', document.querySelector('h2'));

Salin selepas log masuk

现在，如果我们打开 HTML 文件，那么显然不会显示此消息，因为我们没有包含 main.js 也没有编译浏览器的依赖项。我们需要做的是让 Webpack 查看 main.js 并查看它是否有任何依赖项。如果是，它应该将它们编译在一起并创建一个我们可以在浏览器中使用的bundle.js 文件。

返回终端运行 Webpack。只需输入：

webpack main.js bundle.js

Salin selepas log masuk

指定的第一个文件是我们希望 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]

Salin selepas log masuk

现在在浏览器中打开 index.html 即可看到您的页面打招呼。

配置

每次运行 Webpack 时指定输入和输出文件并不是很有趣。值得庆幸的是，Webpack 允许我们使用配置文件来省去我们的麻烦。在项目的根目录中创建一个名为 webpack.config.js 的文件，其中包含以下内容：

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    }
};

Salin selepas log masuk

现在我们只需输入 webpack 即可获得相同的结果。

开发服务器

那是什么？每次更改文件时，您甚至都懒得输入 webpack 吗？我不知道，今天的一代等等等等。好吧，让我们建立一个小的开发服务器，让事情变得更有效率。在终端写入：

npm install webpack-dev-server -g

Salin selepas log masuk

然后运行命令 webpack-dev-server。这将启动一个简单的网络服务器运行，使用当前目录作为提供文件的位置。打开一个新的浏览器窗口并访问 http://localhost:8080/webpack-dev-server/。如果一切顺利，您将看到类似以下内容：

现在，我们不仅有一个漂亮的小型 Web 服务器，而且还有一个可以监视代码更改的服务器。如果它发现我们更改了文件，它会自动运行 webpack 命令来捆绑我们的代码并刷新页面，而无需我们做任何事情。全部为零配置。

尝试一下，更改传递给 sayHello

Seterusnya, buat dua fail dalam direktori yang sama dengan fail HTML. Dengan menamakan yang pertama 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

Salin selepas log masuk

🎜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']
                }
            }
        ],
    }
};

Salin selepas log masuk

🎜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')

Salin selepas log masuk

🎜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: 🎜