设置WebPack 5以使用静态文件

开箱即用的WebPack只能理解JavaScript。但是，我们可以通过使用 Loaders 和插件来扩展其功能。在本教程中，您将学习如何使用静态文件，即HTML，CSS和一些常见的图像类型。

目录

Why do we need to to that?

Important terms

Understanding the project structure

Understanding the overall setup

Working with HTML

Configuring the html-loader

Configuring the html-webpack-plugin

Working with CSS

Configuring the css-loader and the style-loader

Working with images

Using Asset Modules

Final touches

Summary

Conclusion

为什么我们需要这样做？

如果您注意本文的介绍，您已经知道答案：因为没有任何进一步的配置WebPack只能理解JavaScript。因此，我们需要使用 loaders 和插件允许webpack流程并捆绑其他类型的文件。

重要术语

我决定不仅提供一个定义，而且还提供了我们将要使用的装载机和插件的必要性的解释。如果您有信心，请随时跳过本节，您可以理解列出的bellow术语。

注意：我不是故意遵循字母顺序的。您将了解为什么ð

资产：在webpack的主页上，您可以看到资产，脚本，图像和样式被视为不同的事物。尽管如此，在网站的glossary上，我们读到

资产是图像，字体，媒体和任何其他类型的文件的一般术语，通常在网站和其他应用程序中使用。

因此，您可以看到在词汇表和图像中是 Asset 。我更喜欢将资产定义为我们使用的资源，例如图像，字体，音频和视频。换句话说，我们没有自己编码，但是我们用它们来构建我们的项目。
注意：我们通常将配置文件（ .gitignore ， webpack.config.js 等）放在项目的根目录中和用于构建项目的资产被放在一个子目录中，称为 src （源为源）或 app 。
。
我更喜欢将来源视为我们项目中的所有内容。因此，我更喜欢调用 app 包含我们的文件和资产的子目录。

同意？不同意？在评论中让我知道ð
加载器：

加载程序是应用于模块源代码的转换。它们允许您按您的import或加载它们来预处理文件。

简单地说，加载程序允许我们使用JavaScript以外的文件类型。
插件：这是一个高级主题，让我们坚持以下简化的定义：

他们还实现了做任何其他事情的目的
css-loader ：

css-loader 像import/require()解释@import和url()，并将解决它们。

要与CSS合作，我们必须将 .css 文件导入到 .js 文件中。但是，由于CSS语法不是有效的JavaScript，因此我们必须设置 css-loader ，该将解释@import和url()（CSS Syntax）import/import/require()（javaScript Syntax），并解决它们。 P>
解决此处仅意味着确定指定文件的正确路径。

必须与 style-loader 。
一起使用此加载程序
style-loader ： style-loader 将CSS注入DOM。虽然 css-loader 使WebPack了解CSS，但将CSS应用于页面。
html-loader ：

导出html作为字符串，需要引用静态资源。

什么？ ð让我向您解释。 HTML文件的内容使用 h yper* t ext ** m arkup ** l arguage（因此名称** html ），这是一种基于文本的方法，用于描述内容的结构。例如，如果您的* .html **文件中有一个<h1>Heading level 1</h1>，当浏览器解析您的文件时，它将确切知道如何显示您的标题，，因为浏览器会了解一个内容 .html 文件。如果您有<img src="/images/logo.png" alt="Logo" />，它将了解 src 属性，并将找到和显示图像。

我认为您已经知道我们可以使用JavaScript操纵HTML文件的内容。例如，我们可以创建元素，添加/删除类等。这仅是因为允许我们这样做的API。

即使使用API，我们也不能简单地将HTML文件的内容插入JavaScript文件的内容。但是JavaScript了解字符串。因此， html-loader 读取 .html 文件的内容，并将其返回为字符串，可以由JavaScript使用。

JavaScript不了解HTML src属性，但它了解JavaScript require()语句！这就是为什么引用像src这样的静态资源的引用被翻译成require()语句。

具有HTML字符串和要求，JavaScript可以通过API操纵DOM。

如果您想了解有关API的更多信息，请参见Client-side web APIs。
html-webpack-plugin ：要了解此 plugin 的重要性，我们必须记住，为了在浏览器中执行JavaScript， A。我们必须在html或
中使用<script>元素嵌入脚本
b。链接到外部脚本（通过使用HTML文件的<script>元素的src属性）链接。

换句话说，我们需要一个html文件作为输入点才能在浏览器中执行我们的脚本（或捆绑）！

这种情况出现了以下问题：如果WebPack仅了解JavaScript，我们如何使用HTML文件？我有两个答案，因为可以遵循两种方法来处理这种情况：

第一种方法涉及手动创建 .html 文件，手动添加捆绑包，然后在构建文件夹中进行此文件的副本。

第二种方法涉及使用 html-webpack-plugin 并让它为我们完成所有工作。

该插件将为您生成一个HTML5文件，其中包含您的所有webpack捆绑包，使用script标签。

您可以让插件为您生成HTML文件，使用lodashâ模板提供自己的模板，也可以使用自己的加载程序。

在本教程中，我们将使用HTML模板。因此，我们必须将此插件与 html-loader 。。
组合

了解项目结构

项目结构

在项目的根目录（我们的存储库）中，我们有一些配置文件和一个名为 app 的子目录，其中包含用于构建应用程序的文件和资产。

这是每个配置文件扮演的角色的简要说明：

.gitignore 忽略node_modules目录和其他我们不想提交的文件。
.prettierrc 指导如何格式化我们的代码（可选，适用于使用Prettier的人）。
package.json 是通过运行npm init -y自动创建的。它拥有有关我们项目的各种信息：名称，版本，依赖关系，开发依赖性等。
webpack.config.js 和 webpack.parts.js 将用于撰写Webpack配置，这是我在本书的Composing Configuration部分中与Survivejs一起学到的一种策略。

您应该将此代码添加到 index.html 文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="quote">
      <p class="quote__text">Knowledge is freedom</p>
      <img class="quote__img1" src="./assets/images/bookshelf.png" alt="A bookshelf illustration" width="1280" height="640" />
    </div>
  </body>
</html>

目前，其余文件为空。至于图像，您可以从存储库中下载它们：https://github.com/matheus4lves/article-serve-static-files。

注意：稍后将动态添加第二张图像。

了解整体设置

首先，我们需要安装我们的基本开发依赖项（DevDepentencies）。运行以下命令：npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge。

这就是我们需要这些软件包的原因：

webpack 是，猜猜WebPack。这是核心包。
webpack-cli 允许我们通过CLI（终端/提示）和我们的脚本进一步配置WebPack。
webpack-dev-server 为我们提供本地开发服务器。
webpack-merge 促进通过基本合并对象和串联数组，在操作后返回对象。

webpack.config.js

const { merge } = require("webpack-merge");
const path = require("path");

const commonConfig = merge([
  {
    entry: ["./app/assets/scripts/index.js"],
    output: {
      path: path.resolve(\_\_dirname, "./build"),
      filename: "bundle.js",
    },
  },
]);

const configs = {
  development: merge([]),
  production: merge([]),
};

module.exports = (\_, argv) => merge([commonConfig, configs[argv.mode], { mode: argv.mode }]);

我们首先将配置分为三类：通用配置，开发配置和生产配置。

我们没有从模块中导出对象，而是导出一个函数，该函数使我们可以访问我们传递给命令行或脚本的参数。我们想这样做，因为我们想从一个参数中获取mode。

如果我们现在要运行开发服务器，则必须从CLI：npx webpack serve --config webpack.config.js --mode development运行以下命令。相反，我们将建立两个脚本，这些脚本将帮助我们开发和构建应用程序。

在 package.json的scripts属性中

"dev": "webpack serve --mode development", "build": "webpack --mode production"

现在，如果我们想启动开发服务器，我们可以简单地运行：npm run dev。简单得多，不是吗？

目前我们有最基本的配置。我们定义了一个entry点的数组（因为我们可以拥有多个）和output属性，该属性告诉WebPack我们的捆绑包的名称及其在我们构建项目时应发出的位置。
。

请注意，我们没有从模块中导出对象，而是导出一个函数，这使我们可以访问argv对象。该对象包含来自CLI/脚本的参数。然后，我们访问mode属性并基于它创建配置。

注意：要保持简单，我将不触摸开发和生产配置。

与html 合作

在此项目中，我们将基于 .html template生成 .html 文件。我们还可以使用其他类型的模板，例如EJS，handlebars等。顺便说一句，我们可以完全不使用模板，并基于普通的JavaScript生成我们的HTML（就像我们稍后会做的那样）。

由于我们基于静态文件生成静态文件，因此我们的 .html 模板与生成的 .html 文件之间的基本差异是文件包含带有我们的捆绑包的<script>标签。

要能够使用 .html 文件作为模板，我们必须使WebPack了解HTML。为此，我们将设置 html-loader 。

然后，我们将设置 html-webpack-plugin ，以便它可以为我们生成最终 .html 。

总而言之，我们将从 .html 文件中读取以生成 .html 文件。同样，这是因为我们根据静态文件重新生成静态文件。在更现实的情况下，我们将基于Vanilla JavaScript（Plain JavaScript）或基于JavaScript库/模板语言生成 .html 文件，从而基于动态内容生成静态内容。

配置html-loader

首先，通过运行npm install --save-dev html-loader。
安装 html-loader
然后，将此功能添加到 wepback.parts.js ：

exports.loadHTML = () => ({ module: { rules: [ { test: /\.html$/i, loader: "html-loader", }, ], }, });

此函数返回一个对象，我们必须合并到我们的配置。转到 webpack.config.js 并添加此行：

const parts = require("./webpack.parts");

现在，将呼叫添加到loadHTML()作为数组的第二个元素传递，作为创建commonConfig的merge函数的参数：

const commonConfig = merge([ { entry: ["./app/assets/scripts/index.js"], output: { path: path.resolve(\_\_dirname, "./build"), filename: "bundle.js", }, }, parts.loadHTML(), ]);

WebPack现在了解html。

如果您运行开发服务器并访问您的项目正在运行的地址，即使我们还没有设置WebPack来使用图像，您也将可以看到图像。如果您想了解为什么在本文的重要术语部分中阅读有关加载程序的信息。

配置html-webpack-plugin

首先，通过运行npm install --save-dev html-webpack-plugin安装插件。

然后，将此功能添加到 webpack.parts.js ：

exports.generateHTML = ({ template } = {}) => ({ plugins: [new HtmlWebpackPlugin({ template })], });

，在同一文件的顶部，不忘记需要插件：

const HtmlWebpackPlugin = require("html-webpack-plugin");

现在，在 webpack.config.js 中致电后立即致电此功能：

parts.generateHTML({ template: "./app/index.html" }),

不要忘记指定模板！

如果您运行了npm run build now，则应在 index.html 文件中看到构建目录。

与CSS 合作

为了与CSS合作需要两件事：

我们必须使WebPack了解CSS。

我们必须将CSS应用于页面。

对于第一步，我们需要安装和配置 css-loader 。第二次，我们需要使用 style-loader 进行相同的操作。由于没有将WebPack理解CSS而不将样式应用到页面上的情况，因此我们将把这些装载机设置在一起。

配置CSS-Loader和样式加载程序

让我们从安装所需的软件包开始。运行：npm install --save-dev css-loader style-loader。

然后，将其添加到您的** webpack.parts.js **：

exports.loadCSS = () => ({ module: { rules: [ { test: /\.css$/i, use: ["style-loader", "css-loader"],Thanks }, ], }, });

注意：此顺序很重要，因为webpack从右到左读取加载程序。

与我们从该模块导出的其他函数一样，我们必须从 webpack.config.js 称为它。因此，在调用后立即将以下行添加到generateHTML()函数：

parts.loadCSS(),

要测试配置，将其添加到 styles.css ：

body { background: #00ff00; }

，这是 index.js ：

import "../styles/styles.css";

如果您运行开发服务器并访问该项目正在运行的地址，则应看到页面具有绿色背景。

使用图像

如果我们想在WebPack的第五版之前使用图像，我们将必须设置 file-loader ，但是WebPack 5引入了Asset Modules，我们将使用它而是。

使用资产模块

根据官方WebPack文档，

Asset模块是一种模块，允许一个模块使用资产文件（字体，图标等）而不配置其他加载程序。

要允许添加的WebPack加载图像，请将此功能添加到 webpack.config.js ：

exports.loadImages = () => ({ module: { rules: [ { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: "asset/resource", }, ], }, });

然后，在 webpack.config.js 中呼叫此功能：

parts.loadImages(),

要测试配置，让我们动态地将第二张图像添加到我们的页面：

更新 index.js ：

import "../styles/styles.css"; import brokenHandcuffs from "../images/broken-handcuffs.png"; const img = document.createElement("img"); img.className = "quote__img2"; img.setAttribute("src", brokenHandcuffs); img.setAttribute("alt", "Someone's upraised arms bound to the pieces of a handcuff that has just been broken."); img.setAttribute("width", "817"); img.setAttribute("height", "460"); const imgContainer = document.querySelector(".quote"); imgContainer.appendChild(img);

webpack将处理此图像，这意味着将图像添加到 output 目录（在我们的情况下 build ），并且可变的brokenHandcuffs将包含最终处理后图像的URL。

如果运行npm run build，则会在 index.html 文件中使用 build 目录中的图像。注意图像的名称如何更改（最终URL与图像的名称匹配）。

如果运行开发服务器，则应在页面上看到两个图像。

在下一部分中，我们将更新CSS以使页面更漂亮。

最终接触

更新 styles.css ：

.quote { height: 100vh; position: relative; } .quote__text { color: #175f73; font-size: 20px; position: absolute; bottom: 380px; left: 50%; transform: translateX(-55%); } .quote__img1 { width: 700px; height: auto; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .quote__img2 { width: 400px; height: auto; position: absolute; bottom: 300px; left: 50%; transform: translateX(-50%); }

您应该得到此结果

页面的最终版本

摘要

这是本文主要要点的列表：

默认情况下，WebPack仅了解JavaScript。因此，如果我们想使用静态文件，我们需要通过 loaders 和插件扩展其功能。

如果我们想与HTML一起工作，我们需要设置 html-loader 和 html-webpack-plugin 。前者使WebPack了解HTML，并允许我们使用A .html 文件作为模板，而后者则自动生成一个HTML5，该html5使用<script>标签在头上包含所有捆绑包。
。
要与CSS合作，我们需要通过配置 css-loader 首先使WebPack了解它，然后告诉WebPack通过配置 style-loader < /em>。

自WebPack 5以来，如果我们想使用动态添加的图像，我们不需要设置其他加载程序，因为WebPack提供资产模块。我们只需要设置测试条件和适当的资源类型。

结论

多亏了其丰富的装载机和插件WebPack的生态系统，远远超过了一个模块Bundler，这使我们能够进入以前需要任务管理器和其他工具的东西。

如果要扩展WebPack的功能，这是基本工作流程：

安装所需的加载程序或插件。

配置它。

我希望本教程对您有用。谢谢阅读！您可以在此仓库中找到此项目的源代码：https://github.com/matheus4lves/article-serve-static-files