Mendalami pemahaman anda tentang Webpack: Bahagian 2

Dalam tutorial sebelumnya, kami belajar cara menyediakan projek Webpack dan cara menggunakan pemuat untuk mengendalikan JavaScript. Walau bagaimanapun, di mana Webpack benar-benar bersinar adalah keupayaannya untuk menggabungkan jenis sumber statik lain (seperti CSS dan imej) dan memasukkannya ke dalam projek kami hanya apabila diperlukan. Mari mulakan dengan menambahkan sedikit penggayaan pada halaman.

Pemuat Gaya

Pertama, buat fail CSS biasa dalam direktori gaya. Panggil main.css dan tambahkan peraturan gaya untuk elemen tajuk. main.css 并为标题元素添加样式规则。

h2 {
    background: blue;
    color: yellow;
}

那么我们如何将此样式表放入我们的页面中呢？好吧，就像 Webpack 的大多数事情一样，我们需要另一个加载器。事实上有两个：css-loader 和 style-loader。第一个从我们的 CSS 文件中读取所有样式，而另一个将所述样式注入到我们的 HTML 页面中。像这样安装它们：

npm install style-loader css-loader

接下来，我们告诉 Webpack 如何使用它们。在 webpack.config.js 中，我们需要向 loaders 数组添加另一个对象。在其中，我们要添加一个测试以仅匹配 CSS 文件并指定要使用的加载器。

{
    test: /\.css$/,
    exclude: /node_modules/,
    loader: 'style!css'
}

此代码片段中有趣的部分是 'style!css' 行。加载器是从右向左读取的，因此这告诉 Webpack 首先读取以 .css 结尾的任何文件的样式，然后将这些样式注入到我们的页面中。

因为我们已经更新了配置文件，所以我们需要重新启动开发服务器才能使更改生效。使用 ctrl+c 停止服务器并使用 webpack-dev-server 重新启动服务器。

我们现在需要做的就是从 main.js 文件中获取样式表。我们这样做的方式与任何其他 JavaScript 模块相同：

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

require('./styles/main.css');

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

注意我们甚至没有触及index.html。打开浏览器即可看到样式为 h2 的页面。更改样式表中标题的颜色即可立即更新，无需刷新。可爱。

你必须大骂它

“但是现在没有人使用 CSS，爷爷！这都是关于 Sass 的”。当然如此。幸运的是，Webpack 有一个加载器可以完成这件事。使用以下命令将其与 Sass 的节点版本一起安装：

npm install sass-loader node-sass

然后更新webpack.config.js：

{
    test: /\.scss$/,
    exclude: /node_modules/,
    loader: 'style!css!sass'
}

现在的意思是，对于任何以 .scss 结尾的文件，将 Sass 转换为纯 CSS，从 CSS 中读取样式，然后将样式插入到页面中。请记住将 main.css 重命名为 main.scss，并需要新命名的文件。首先是一些 Sass：

$background: blue;

h2 {
    background: $background;
    color: yellow;
}

然后是main.js：

require('./styles/main.scss');

超级。就这么简单。无需转换和保存文件，甚至无需查看文件夹。我们只需要直接输入 Sass 样式即可。

图片

“那么我敢打赌，图像、装载机也是如此？”当然！对于图像，我们要使用 url-loader。此加载程序会获取图像的相对 URL 并更新路径，以便将其正确包含在您的文件包中。像往常一样：

npm install url-loader

现在，让我们在 webpack.config.js 中尝试一些不同的东西。以通常的方式向 loaders 数组添加另一个条目，但这次我们希望正则表达式能够匹配具有不同文件扩展名的图像：

{
    test: /\.(jpg|png|gif)$/,
    include: /images/,
    loader: 'url'
}

请注意此处的另一个区别。我们没有使用 exclude 键。相反，我们使用 include

var imgElement = document.createElement('img');

imgElement.src = require('./images/my-image.jpg');

document.body.appendChild(imgElement);

Jadi bagaimana kita meletakkan helaian gaya ini ke dalam halaman kita? Nah, seperti kebanyakan perkara dengan Webpack, kami memerlukan pemuat lain. Sebenarnya terdapat dua: css-loader dan style-loader. Yang pertama membaca semua gaya daripada fail CSS kami, manakala yang lain menyuntik gaya ke dalam halaman HTML kami. Pasang mereka seperti ini:

 npm install jshint-loader

Seterusnya, kami memberitahu Webpack cara menggunakannya. Dalam webpack.config.js kita perlu menambah objek lain pada tatasusunan pemuat. Di dalamnya, kami akan menambah ujian untuk memadankan hanya fail CSS dan menentukan pemuat untuk digunakan.

module: {
    preLoaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'jshint'
        }
    ],
    loaders: [
       ...    
    ]
}

Bahagian menarik bagi coretan kod ini ialah baris 'style!css'. Pemuat membaca dari kanan ke kiri, jadi ini memberitahu Webpack terlebih dahulu membaca gaya mana-mana fail yang berakhir dengan .css dan kemudian menyuntik gaya tersebut ke halaman kami .

Oleh kerana kami telah mengemas kini fail konfigurasi, kami perlu memulakan semula pelayan pembangunan untuk perubahan berkuat kuasa. Gunakan ctrl+c untuk menghentikan pelayan dan webpack-dev-server untuk memulakan semula pelayan.

Apa yang perlu kita lakukan sekarang ialah mendapatkan lembaran gaya daripada fail main.js. Kami melakukan ini dengan cara yang sama seperti mana-mana modul JavaScript lain: 🎜

module: {
    preLoaders: [
        ...
    ],
    loaders: [
        ...    
    ]
},
jshint: {
    esversion: 6
}

🎜Perhatikan bahawa kami belum menyentuh index.html. Buka penyemak imbas dan anda akan melihat halaman dengan gaya h2. Menukar warna pengepala dalam lembaran gaya kemas kini dengan serta-merta tanpa memuat semula. comel. 🎜 🎜Anda perlu menjerit padanya🎜 🎜 "Tetapi tiada siapa yang menggunakan CSS hari ini, datuk! Sudah tentu. Nasib baik, Webpack mempunyai pemuat yang melakukan perkara itu. Pasangnya bersama-sama dengan versi nod Sass menggunakan arahan berikut: 🎜

var imgElement = document.createElement('img')

🎜Kemudian kemas kini webpack.config.js: 🎜

WARNING in ./main.js
jshint results in errors
  Missing semicolon. @ line 7 char 47

🎜Maksudnya sekarang ialah untuk mana-mana fail yang berakhir dengan .scss, tukar Sass kepada CSS tulen, baca gaya daripada CSS, dan kemudian masukkan gaya ke dalam halaman. Ingat untuk menamakan semula main.css kepada main.scss dan memerlukan fail yang baru dinamakan. Mula-mula beberapa Sass: 🎜

webpack -p

🎜Kemudian main.js: 🎜 rrreee 🎜Super. Semudah itu. Tidak perlu menukar dan menyimpan fail atau melihat folder. Kita hanya perlu memasukkan gaya Sass secara langsung. 🎜 🎜Gambar🎜 🎜 "Jadi saya yakin perkara yang sama berlaku untuk imej, pemuat?" Untuk imej, kami akan menggunakan pemuat url. Pemuat ini mendapat URL relatif imej dan mengemas kini laluan supaya ia disertakan dengan betul dalam pakej anda. Seperti biasa: 🎜 rrreee 🎜Sekarang, mari cuba sesuatu yang berbeza dalam webpack.config.js. Tambahkan entri lain pada tatasusunan pemuat dengan cara biasa, tetapi kali ini kami mahu regex memadankan imej dengan sambungan fail yang berbeza: 🎜 rrreee 🎜Perhatikan perbezaan lain di sini. Kami tidak menggunakan kunci exclude. Sebaliknya, kami menggunakan include. Ini lebih cekap kerana ia memberitahu pek web untuk mengabaikan apa-apa yang tidak sepadan dengan folder bernama "imej". 🎜 🎜Biasanya anda akan menggunakan beberapa jenis sistem templat untuk mencipta paparan HTML, tetapi kami akan memastikannya asas dan mencipta penanda imej dalam JavaScript dengan cara lama. Mula-mula buat elemen imej, tetapkan imej yang diperlukan kepada atribut src, dan kemudian tambah elemen pada halaman. 🎜 rrreee 🎜Kembali ke penyemak imbas dan imej anda akan muncul di hadapan anda! 🎜 🎜Pramuat🎜 🎜Satu lagi tugas yang sering dilakukan semasa pembangunan ialah linting. Linting ialah kaedah mencari kemungkinan ralat dalam kod anda dan menyemak sama ada anda mengikuti konvensyen pengekodan tertentu. Perkara yang mungkin anda ingin cari ialah "Adakah saya menggunakan pembolehubah tanpa mengisytiharkannya terlebih dahulu?" atau "Adakah saya terlupa koma bertitik di penghujung baris, kita boleh menghapuskan kesilapan bodoh lebih awal?" 🎜

JSHint 是一种流行的 linting 工具。这会检查我们的代码并突出显示我们所犯的潜在错误。 JSHint 可以在命令行手动运行，但这很快就会成为开发过程中的一件苦差事。理想情况下，我们希望它在每次保存文件时自动运行。我们的 Webpack 服务器已经在留意变化，所以是的，你猜对了——另一个加载器。

按照通常的方式安装jshint-loader：

 npm install jshint-loader

我们必须再次将其添加到我们的 webpack.config.js 中来告诉 Webpack 使用它。然而，这个加载器略有不同。它实际上并没有转换任何代码——只是看看。我们也不希望所有较重的代码修改加载器仅仅因为忘记了分号而运行并失败。这就是预加载器的用武之地。预加载器是我们指定在主要任务之前运行的任何加载器。它们以与加载器类似的方式添加到我们的 webpack.conf.js 中。

module: {
    preLoaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'jshint'
        }
    ],
    loaders: [
       ...    
    ]
}

现在，如果检测到问题，我们的 linting 过程会立即运行并失败。在重新启动 Web 服务器之前，我们需要告诉 JSHint 我们正在使用 ES6，否则当它看到我们正在使用的 const 关键字时将会失败。

在配置中的模块键之后，添加另一个名为“jshint”的条目和一行来指定 JavaScript 的版本。

module: {
    preLoaders: [
        ...
    ],
    loaders: [
        ...    
    ]
},
jshint: {
    esversion: 6
}

保存文件并重新启动webpack-dev-server。运行还好吗？伟大的。这意味着您的代码不包含错误。让我们通过删除这一行中的分号来介绍一个：

var imgElement = document.createElement('img')

再次保存文件并查看终端。现在我们得到了这个：

WARNING in ./main.js
jshint results in errors
  Missing semicolon. @ line 7 char 47

谢谢，JSHint！

准备生产

现在我们很高兴我们的代码已经成型并且它完成了我们想要的一切，我们需要为现实世界做好准备。上线代码时最常见的事情之一就是缩小代码，将所有文件连接成一个，然后将其压缩到尽可能小的文件中。在继续之前，请查看您当前的 bundle.js。它可读，有大量空白，大小为 32kb。

“等等！别告诉我。另一个装载机，对吧？”没有！在这种罕见的情况下，我们不需要装载机。 Webpack 内置了缩小功能。一旦您对代码感到满意，只需运行以下命令：

webpack -p

-p 标志告诉 Webpack 让我们的代码为生产做好准备。当它生成捆绑包时，它会尽可能地进行优化。运行此命令后，打开 bundle.js，您会看到它全部被压缩在一起，即使使用如此少量的代码，我们也节省了 10kb。

摘要

我希望这个由两部分组成的教程能让您有足够的信心在自己的项目中使用 Webpack。请记住，如果您想在构建过程中执行某些操作，那么 Webpack 很可能有一个加载器。所有加载器都是通过 npm 安装的，因此请查看那里是否有人已经制作了您需要的内容。

玩得开心！

Atas ialah kandungan terperinci Mendalami pemahaman anda tentang Webpack: Bahagian 2. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!