投稿
  1. Web176教程首页
  2. Webpack 教程

Webpack 管理资源

冒牌SEO • • Webpack 教程 • 阅读 148

如果你是从开始一直在沿用指南的示例，现在会有一个小项目，显示 ​"Hello webpack"​。现在我们尝试混合一些其他资源，比如 images，看看 webpack 如何处理。

在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。JavaScript 模块也遵循同样方式，但是，像 webpack 这样的工具，将动态打包所有依赖（创建所谓的 依赖图(dependency graph)）。这是极好的创举，因为现在每个模块都可以明确表述它自身的依赖，可以避免打包未使用的模块。

webpack 最出色的功能之一就是，除了引入 JavaScript，还可以通过 loader 或内置的 Asset Modules 引入任何其他类型的文件。也就是说，以上列出的那些 JavaScript 的优点（例如显式依赖），同样可以用来构建 web 站点或 web 应用程序中的所有非 JavaScript 内容。让我们从 CSS 开始起步，或许你可能已经熟悉了下面这些设置。

设置

在开始之前，让我们对项目做一个小的修改：

dist/index.html

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>起步</title>
+    <title>管理资源</title>
   </head>
   <body>
-    <script src="main.js"></script>
+    <script src="bundle.js"></script>
   </body>
 </html>

webpack.config.js

 const path = require(path);

 module.exports = {
   entry: ./src/index.js,
   output: {
-    filename: main.js,
+    filename: bundle.js,
     path: path.resolve(__dirname, dist),
   },
 };

加载 CSS

为了在 JavaScript 模块中 import 一个 CSS 文件，你需要安装 style-loader 和 css-loader，并在 module 配置 中添加这些 loader：

npm install --save-dev style-loader css-loader

webpack.config.js

 const path = require(path);

 module.exports = {
   entry: ./src/index.js,
   output: {
     filename: bundle.js,
     path: path.resolve(__dirname, dist),
   },
+  module: {
+    rules: [
+      {
+        test: /.css$/i,
+        use: [style-loader, css-loader],
+      },
+    ],
+  },
 };

模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会逆序执行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，依此类推。最后，webpack 期望链中的最后的 loader 返回 JavaScript。

应保证 loader 的先后顺序：style-loader 在前，而 css-loader 在后。如果不遵守此约定，webpack 可能会抛出错误。

这使你可以在依赖于此样式的 js 文件中 import ./style.css。现在，在此模块执行过程中，含有 CSS 字符串的 <style> 标签，将被插入到 html 文件的 <head> 中。

我们尝试一下，通过在项目中添加一个新的 style.css 文件，并将其 import 到我们的 index.js 中：

project

  webpack-demo
  |- package.json
  |- package-lock.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- style.css
    |- index.js
  |- /node_modules

src/style.css

.hello {
  color: red;
}

src/index.js

 import _ from lodash;
+import ./style.css;

 function component() {
   const element = document.createElement(div);

   // Lodash, now imported by this script
   element.innerHTML = _.join([Hello, webpack],  );
+  element.classList.add(hello);

   return element;
 }

 document.body.appendChild(component());

现在运行 build 命令：

$ npm run build

...
[webpack-cli] Compilation finished
asset bundle.js 72.6 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 1000 bytes 5 modules
orphan modules 326 bytes [orphan] 1 module
cacheable modules 539 KiB
  modules by path ./node_modules/ 538 KiB
    ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
    ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
    ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
  modules by path ./src/ 965 bytes
    ./src/index.js + 1 modules 639 bytes [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./src/style.css 326 bytes [built] [code generated]
webpack 5.4.0 compiled successfully in 2231 ms

再次在浏览器中打开 dist/index.html，你应该看到 Hello webpack 现在的样式是红色。要查看 webpack 做了什么，请检查页面（不要查看页面源代码，它不会显示结果，因为 <style> 标签是由 JavaScript 动态创建的），并查看页面的 head 标签。它应该包含 style 块元素，也就是我们在 index.js 中 import 的 css 文件中的样式。

注意，在多数情况下，你也可以进行 压缩 CSS，以便在生产环境中节省加载时间。最重要的是，现有的 loader 可以支持任何你可以想到的 CSS 风格 – postcss, sass 和 less 等。

加载 images 图像

假如，现在我们正在下载 CSS，但是像 background 和 icon 这样的图像，要如何处理呢？在 webpack 5 中，可以使用内置的 Asset Modules，我们可以轻松地将这些内容混入我们的系统中：

webpack.config.js

 const path = require(path);

 module.exports = {
   entry: ./src/index.js,
   output: {
     filename: bundle.js,
     path: path.resolve(__dirname, dist),
   },
   module: {
     rules: [
       {
         test: /.css$/i,
         use: [style-loader, css-loader],
       },
+      {
+        test: /.(png|svg|jpg|jpeg|gif)$/i,
+        type: asset/resource,
+      },
     ],
   },
 };

现在，在 import MyImage from ./my-image.png 时，此图像将被处理并添加到 output 目录，并且 MyImage 变量将包含该图像在处理后的最终 url。在使用 css-loader 时，如前所示，会使用类似过程处理你的 CSS 中的 ​url(./my-image.png)​。loader 会识别这是一个本地文件，并将 ./my-image.png 路径，替换为 output 目录中图像的最终路径。而 html-loader 以相同的方式处理 ​<img src="./my-image.png" />​。

我们向项目添加一个图像，然后看它是如何工作的，你可以使用任何你喜欢的图像：

project

  webpack-demo
  |- package.json
  |- package-lock.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- icon.png
    |- style.css
    |- index.js
  |- /node_modules

src/index.js

 import _ from lodash;
 import ./style.css;
+import Icon from ./icon.png;

 function component() {
   const element = document.createElement(div);

   // Lodash, now imported by this script
   element.innerHTML = _.join([Hello, webpack],  );
   element.classList.add(hello);

+  // 将图像添加到我们已经存在的 div 中。
+  const myIcon = new Image();
+  myIcon.src = Icon;
+
+  element.appendChild(myIcon);
+
   return element;
 }

 document.body.appendChild(component());

src/style.css

 .hello {
   color: red;
+  background: url(./icon.png);
 }

重新构建并再次打开 index.html 文件：

$ npm run build

...
[webpack-cli] Compilation finished
assets by status 9.88 KiB [cached] 1 asset
asset bundle.js 73.4 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 1.82 KiB 6 modules
orphan modules 326 bytes [orphan] 1 module
cacheable modules 540 KiB (javascript) 9.88 KiB (asset)
  modules by path ./node_modules/ 539 KiB
    modules by path ./node_modules/css-loader/dist/runtime/*.js 2.38 KiB
      ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
      ./node_modules/css-loader/dist/runtime/getUrl.js 830 bytes [built] [code generated]
    ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
    ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
  modules by path ./src/ 1.45 KiB (javascript) 9.88 KiB (asset)
    ./src/index.js + 1 modules 794 bytes [built] [code generated]
    ./src/icon.png 42 bytes (javascript) 9.88 KiB (asset) [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./src/style.css 648 bytes [built] [code generated]
webpack 5.4.0 compiled successfully in 1972 ms

如果一切顺利，你现在应该看到你的 icon 图标成为了重复的背景图，以及 Hello webpack 文本旁边的 img 元素。如果检查此元素，你将看到实际的文件名已更改为 29822eaa871e8eadeaa4.png。这意味着 webpack 在 src 文件夹中找到我们的文件，并对其进行了处理！

加载 fonts 字体

那么，像字体这样的其他资源如何处理呢？使用 Asset Modules 可以接收并加载任何文件，然后将其输出到构建目录。这就是说，我们可以将它们用于任何类型的文件，也包括字体。让我们更新 webpack.config.js 来处理字体文件：

webpack.config.js

 const path = require(path);

 module.exports = {
   entry: ./src/index.js,
   output: {
     filename: bundle.js,
     path: path.resolve(__dirname, dist),
   },
   module: {
     rules: [
       {
         test: /.css$/i,
         use: [style-loader, css-loader],
       },
       {
         test: /.(png|svg|jpg|jpeg|gif)$/i,
         type: asset/resource,
       },
+      {
+        test: /.(woff|woff2|eot|ttf|otf)$/i,
+        type: asset/resource,
+      },
     ],
   },
 };

在项目中添加一些字体文件：

project

  webpack-demo
  |- package.json
  |- package-lock.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- my-font.woff
+   |- my-font.woff2
    |- icon.png
    |- style.css
    |- index.js
  |- /node_modules

配置好 loader 并将字体文件放在合适的位置后，你可以通过一个 @font-face 声明将其混合。本地的 url(…) 指令会被 webpack 获取处理，就像它处理图片一样：

src/style.css

+@font-face {
+  font-family: MyFont;
+  src: url(./my-font.woff2) format(woff2),
+    url(./my-font.woff) format(woff);
+  font-weight: 600;
+  font-style: normal;
+}
+
 .hello {
   color: red;
+  font-family: MyFont;
   background: url(./icon.png);
 }

现在，让我们重新构建，然后看下 webpack 是否处理了我们的字体：

$ npm run build

...
[webpack-cli] Compilation finished
assets by status 9.88 KiB [cached] 1 asset
assets by info 33.2 KiB [immutable]
  asset 55055dbfc7c6a83f60ba.woff 18.8 KiB [emitted] [immutable] [from: src/my-font.woff] (auxiliary name: main)
  asset 8f717b802eaab4d7fb94.woff2 14.5 KiB [emitted] [immutable] [from: src/my-font.woff2] (auxiliary name: main)
asset bundle.js 73.7 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 1.82 KiB 6 modules
orphan modules 326 bytes [orphan] 1 module
cacheable modules 541 KiB (javascript) 43.1 KiB (asset)
  javascript modules 541 KiB
    modules by path ./node_modules/ 539 KiB
      modules by path ./node_modules/css-loader/dist/runtime/*.js 2.38 KiB 2 modules
      ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
      ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
    modules by path ./src/ 1.98 KiB
      ./src/index.js + 1 modules 794 bytes [built] [code generated]
      ./node_modules/css-loader/dist/cjs.js!./src/style.css 1.21 KiB [built] [code generated]
  asset modules 126 bytes (javascript) 43.1 KiB (asset)
    ./src/icon.png 42 bytes (javascript) 9.88 KiB (asset) [built] [code generated]
    ./src/my-font.woff2 42 bytes (javascript) 14.5 KiB (asset) [built] [code generated]
    ./src/my-font.woff 42 bytes (javascript) 18.8 KiB (asset) [built] [code generated]
webpack 5.4.0 compiled successfully in 2142 ms

重新打开 ​dist/index.html​ 看看我们的 Hello webpack 文本显示是否换上了新的字体。如果一切顺利，你应该能看到变化。

加载数据

此外，可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from ./data.json 默认将正常运行。要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。让我们处理加载这三类文件：

npm install --save-dev csv-loader xml-loader

webpack.config.js

 const path = require(path);

 module.exports = {
   entry: ./src/index.js,
   output: {
     filename: bundle.js,
     path: path.resolve(__dirname, dist),
   },
   module: {
     rules: [
       {
         test: /.css$/i,
         use: [style-loader, css-loader],
       },
       {
         test: /.(png|svg|jpg|jpeg|gif)$/i,
         type: asset/resource,
       },
       {
         test: /.(woff|woff2|eot|ttf|otf)$/i,
         type: asset/resource,
       },
+      {
+        test: /.(csv|tsv)$/i,
+        use: [csv-loader],
+      },
+      {
+        test: /.xml$/i,
+        use: [xml-loader],
+      },
     ],
   },
 };

在项目中添加一些数据文件：

project

  webpack-demo
  |- package.json
  |- package-lock.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- data.xml
+   |- data.csv
    |- my-font.woff
    |- my-font.woff2
    |- icon.png
    |- style.css
    |- index.js
  |- /node_modules

src/data.xml

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Mary</to>
  <from>John</from>
  <heading>Reminder</heading>
  <body>Call Cindy on Tuesday</body>
</note>

src/data.csv

to,from,heading,body
Mary,John,Reminder,Call Cindy on Tuesday
Zoe,Bill,Reminder,Buy orange juice
Autumn,Lindsey,Letter,I miss you

现在，你可以 import 这四种类型的数据(JSON, CSV, TSV, XML)中的任何一种，所导入的 Data 变量，将包含可直接使用的已解析 JSON：

src/index.js

 import _ from lodash;
 import ./style.css;
 import Icon from ./icon.png;
+import Data from ./data.xml;
+import Notes from ./data.csv;

 function component() {
   const element = document.createElement(div);

   // Lodash, now imported by this script
   element.innerHTML = _.join([Hello, webpack],  );
   element.classList.add(hello);

   // Add the image to our existing div.
   const myIcon = new Image();
   myIcon.src = Icon;

   element.appendChild(myIcon);

+  console.log(Data);
+  console.log(Notes);
+
   return element;
 }

 document.body.appendChild(component());

重新执行 npm run build 命令，然后打开 dist/index.html。查看开发者工具中的控制台，你应该能够看到导入的数据会被打印出来！

// 没有警告
import data from ./data.json;

// 显示警告，规范不允许这样做。
import { foo } from ./data.json;

自定义 JSON 模块 parser

通过使用 自定义 parser 替代特定的 webpack loader，可以将任何 toml、yaml 或 json5 文件作为 JSON 模块导入。

假设你在 src 文件夹下有一个 data.toml、一个 data.yaml 以及一个 data.json5 文件：

src/data.toml

title = "TOML Example"

[owner]
name = "Tom Preston-Werner"
organization = "GitHub"
bio = "GitHub Cofounder & CEO
Likes tater tots and beer."
dob = 1979-05-27T07:32:00Z

src/data.yaml

title: YAML Example
owner:
  name: Tom Preston-Werner
  organization: GitHub
  bio: |-
    GitHub Cofounder & CEO
    Likes tater tots and beer.
  dob: 1979-05-27T07:32:00.000Z

src/data.json5

{
  // comment
  title: JSON5 Example,
  owner: {
    name: Tom Preston-Werner,
    organization: GitHub,
    bio: GitHub Cofounder & CEO

Likes tater tots and beer.,
    dob: 1979-05-27T07:32:00.000Z,
  },
}

首先安装 toml，yamljs 和 json5 的 packages：

npm install toml yamljs json5 --save-dev

并在你的 webpack 中配置它们：

webpack.config.js

 const path = require(path);
+const toml = require(toml);
+const yaml = require(yamljs);
+const json5 = require(json5);

 module.exports = {
   entry: ./src/index.js,
   output: {
     filename: bundle.js,
     path: path.resolve(__dirname, dist),
   },
   module: {
     rules: [
       {
         test: /.css$/i,
         use: [style-loader, css-loader],
       },
       {
         test: /.(png|svg|jpg|jpeg|gif)$/i,
         type: asset/resource,
       },
       {
         test: /.(woff|woff2|eot|ttf|otf)$/i,
         type: asset/resource,
       },
       {
         test: /.(csv|tsv)$/i,
         use: [csv-loader],
       },
       {
         test: /.xml$/i,
         use: [xml-loader],
       },
+      {
+        test: /.toml$/i,
+        type: json,
+        parser: {
+          parse: toml.parse,
+        },
+      },
+      {
+        test: /.yaml$/i,
+        type: json,
+        parser: {
+          parse: yaml.parse,
+        },
+      },
+      {
+        test: /.json5$/i,
+        type: json,
+        parser: {
+          parse: json5.parse,
+        },
+      },
     ],
   },
 };

src/index.js

 import _ from lodash;
 import ./style.css;
 import Icon from ./icon.png;
 import Data from ./data.xml;
 import Notes from ./data.csv;
+import toml from ./data.toml;
+import yaml from ./data.yaml;
+import json from ./data.json5;
+
+console.log(toml.title); // output `TOML Example`
+console.log(toml.owner.name); // output `Tom Preston-Werner`
+
+console.log(yaml.title); // output `YAML Example`
+console.log(yaml.owner.name); // output `Tom Preston-Werner`
+
+console.log(json.title); // output `JSON5 Example`
+console.log(json.owner.name); // output `Tom Preston-Werner`

 function component() {
   const element = document.createElement(div);

   // Lodash, now imported by this script
   element.innerHTML = _.join([Hello, webpack],  );
   element.classList.add(hello);

   // Add the image to our existing div.
   const myIcon = new Image();
   myIcon.src = Icon;

   element.appendChild(myIcon);

   console.log(Data);
   console.log(Notes);

   return element;
 }

 document.body.appendChild(component());

重新执行 npm run build 命令，然后打开 dist/index.html。你应该能够看到导入的数据会被打印到控制台上！

全局资源

上述所有内容中最出色之处在于，以这种方式加载资源，你可以以更直观的方式将模块和资源组合在一起。无需依赖于含有全部资源的 /assets 目录，而是将资源与代码组合在一起使用。例如，类似这样的结构会非常有用：

- |- /assets
+ |– /components
+ |  |– /my-component
+ |  |  |– index.jsx
+ |  |  |– index.css
+ |  |  |– icon.svg
+ |  |  |– img.png

这种配置方式会使你的代码更具备可移植性，因为现有的集中放置的方式会让所有资源紧密耦合起来。假如你想在另一个项目中使用 /my-component，只需将其复制或移动到 /components 目录下。只要你已经安装过全部 外部依赖 ，并且 已经在配置中定义过相同的 loader ，那么项目应该能够良好运行。

但是，假如你只能被局限在旧有开发方式，或者你有一些在多个组件（视图、模板、模块等）之间共享的资源。你仍然可以将这些资源存储在一个基本目录(base directory)中，甚至配合使用 alias 来使它们更方便 import 导入。

回退处理

对于下篇指南，我们无需使用本指南中所有用到的资源，因此我们会进行一些清理工作，以便为下篇指南 管理输出 做好准备：

project

  webpack-demo
  |- package.json
  |- package-lock.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
-   |- data.csv
-   |- data.json5
-   |- data.toml
-   |- data.xml
-   |- data.yaml
-   |- icon.png
-   |- my-font.woff
-   |- my-font.woff2
-   |- style.css
    |- index.js
  |- /node_modules

webpack.config.js

 const path = require(path);
-const toml = require(toml);
-const yaml = require(yamljs);
-const json5 = require(json5);

 module.exports = {
   entry: ./src/index.js,
   output: {
     filename: bundle.js,
     path: path.resolve(__dirname, dist),
   },
-  module: {
-    rules: [
-      {
-        test: /.css$/i,
-        use: [style-loader, css-loader],
-      },
-      {
-        test: /.(png|svg|jpg|jpeg|gif)$/i,
-        type: asset/resource,
-      },
-      {
-        test: /.(woff|woff2|eot|ttf|otf)$/i,
-        type: asset/resource,
-      },
-      {
-        test: /.(csv|tsv)$/i,
-        use: [csv-loader],
-      },
-      {
-        test: /.xml$/i,
-        use: [xml-loader],
-      },
-      {
-        test: /.toml$/i,
-        type: json,
-        parser: {
-          parse: toml.parse,
-        },
-      },
-      {
-        test: /.yaml$/i,
-        type: json,
-        parser: {
-          parse: yaml.parse,
-        },
-      },
-      {
-        test: /.json5$/i,
-        type: json,
-        parser: {
-          parse: json5.parse,
-        },
-      },
-    ],
-  },
 };

src/index.js

 import _ from lodash;
-import ./style.css;
-import Icon from ./icon.png;
-import Data from ./data.xml;
-import Notes from ./data.csv;
-import toml from ./data.toml;
-import yaml from ./data.yaml;
-import json from ./data.json5;
-
-console.log(toml.title); // output `TOML Example`
-console.log(toml.owner.name); // output `Tom Preston-Werner`
-
-console.log(yaml.title); // output `YAML Example`
-console.log(yaml.owner.name); // output `Tom Preston-Werner`
-
-console.log(json.title); //  `JSON5 Example`
-console.log(json.owner.name); // output `Tom Preston-Werner`

 function component() {
   const element = document.createElement(div);

-  // lodash，现在通过 script 标签导入
   element.innerHTML = _.join([Hello, webpack],  );
-  element.classList.add(hello);
-
-  // Add the image to our existing div.
-  const myIcon = new Image();
-  myIcon.src = Icon;
-
-  element.appendChild(myIcon);
-
-  console.log(Data);
-  console.log(Notes);

   return element;
 }

 document.body.appendChild(component());

然后移除之前添加的那些依赖项:

npm uninstall css-loader csv-loader json5 style-loader toml xml-loader yamljs

下篇指南

我们继续移步到 管理输出

延伸阅读

作者：冒牌SEO，如若转载，请注明出处：https://www.web176.com/webpack/22702.html

赞 (0)
打赏 支付宝 支付宝 微信 微信
冒牌SEO冒牌SEO
0 0
上一篇 2023年5月26日
下一篇 2023年5月26日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注