资源管理
如果您一直遵循着从头开始的指南，现在您应该拥有一个显示“Hello webpack”的小型项目。现在，让我们尝试整合一些其他资源，例如图片，看看它们如何被处理。
在 webpack 之前，前端开发人员会使用 grunt 和 gulp 等工具来处理这些资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录。JavaScript 模块也使用了相同的思想，但像 webpack 这样的工具会动态捆绑所有依赖项（创建所谓的依赖图）。这非常棒，因为现在每个模块都明确声明了其依赖项，我们将避免捆绑未使用的模块。
webpack 最酷的功能之一是，除了 JavaScript，您还可以包含任何其他类型的文件，只要有相应的加载器或内置的资源模块支持。这意味着上面列出的 JavaScript 的所有好处（例如明确的依赖关系）可以应用于构建网站或 Web 应用程序中使用的所有内容。让我们从 CSS 开始，因为您可能已经熟悉这种设置。
设置
在我们开始之前，对我们的项目进行一些小的修改
dist/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
- <title>Getting Started</title>
+ <title>Asset Management</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 配置中。
npm install --save-dev style-loader css-loaderwebpack.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'],
+ },
+ ],
+ },
};模块加载器可以被链式调用。链中的每个加载器都会对处理后的资源应用转换。链会以相反的顺序执行。第一个加载器将其结果（经过转换的资源）传递给下一个，依此类推。最后，webpack 期望链中的最后一个加载器返回 JavaScript。
加载器的上述顺序应保持不变：'style-loader' 优先，其次是 'css-loader'。如果不遵循此约定，webpack 可能会抛出错误。
这使您能够将 import './style.css' 导入到依赖该样式的文件中。现在，当该模块运行时，一个包含字符串化 CSS 的 <style> 标签将被插入到 HTML 文件的 <head> 中。
让我们通过向项目添加一个新的 style.css 文件并在 index.js 中导入它来尝试一下。
项目
webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
+ |- style.css
|- index.js
|- /node_modulessrc/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());现在运行您的构建命令
$ 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 动态创建的），并查看页面的头部标签。它应该包含我们在 index.js 中导入的样式块。
请注意，为了在生产环境中获得更好的加载时间，您通常应该最小化 CSS。此外，几乎您能想到的任何 CSS 风格都有相应的加载器——例如 postcss、sass 和 less。
加载图片
现在我们已经引入了 CSS，那么像背景和图标这样的图片呢？从 webpack 5 开始，使用内置的资源模块，我们也可以轻松地将它们整合到我们的系统中。
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') 也会发生类似的过程。加载器会识别这是一个本地文件，并用图片在 output 目录中的最终路径替换 './my-image.png' 路径。html-loader 以同样的方式处理 <img src="./my-image.png" />。
让我们向项目添加一张图片，看看它是如何工作的，您可以使用任何喜欢的图片。
项目
webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
+ |- icon.png
|- style.css
|- index.js
|- /node_modulessrc/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');
+ // Add the image to our existing 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如果一切顺利，您现在应该会看到您的图标作为重复背景，以及在“Hello webpack”文本旁边的 img 元素。如果您检查此元素，您会看到实际的文件名已更改为类似 29822eaa871e8eadeaa4.png 的内容。这意味着 webpack 在 src 文件夹中找到了我们的文件并对其进行了处理！
加载字体
那么其他资源比如字体呢？资源模块会获取您通过它们加载的任何文件，并将其输出到您的构建目录。这意味着我们可以将它们用于任何类型的文件，包括字体。让我们更新 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',
+ },
],
},
};向您的项目添加一些字体文件
项目
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配置好加载器并放置好字体后，您可以通过 @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。JSON 的支持实际上是内置的，类似于 NodeJS，这意味着 import Data from './data.json' 将默认工作。要导入 CSV、TSV 和 XML，您可以使用 csv-loader 和 xml-loader。让我们处理所有这三种加载方式。
npm install --save-dev csv-loader xml-loaderwebpack.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'],
+ },
],
},
};向您的项目添加一些数据文件
项目
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_modulessrc/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。如果您查看开发工具中的控制台，应该能够看到导入的数据被记录到控制台！
// No warning
import data from './data.json';
// Warning shown, this is not allowed by the spec.
import { foo } from './data.json';自定义 JSON 模块解析器
可以通过使用自定义解析器而不是特定的 webpack 加载器，将任何 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\nLikes 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.000Zsrc/data.json5
{
// comment
title: 'JSON5 Example',
owner: {
name: 'Tom Preston-Werner',
organization: 'GitHub',
bio: 'GitHub Cofounder & CEO\n\
Likes tater tots and beer.',
dob: '1979-05-27T07:32:00.000Z',
},
}
首先安装 toml、yamljs 和 json5 包
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 目录中。只要您安装了所有外部依赖项并且您的配置定义了相同的加载器，您就可以正常使用了。
然而，假设您仍习惯于旧的工作方式，或者您有一些在多个组件（视图、模板、模块等）之间共享的资源。仍然可以将这些资源存储在基础目录中，甚至可以使用别名使它们更易于 import。
总结
在接下来的指南中，我们不会使用本指南中所有不同的资源，所以让我们进行一些清理，为下一部分指南输出管理做好准备。
项目
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_moduleswebpack.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 uninstall css-loader csv-loader json5 style-loader toml xml-loader yamljs下一指南
让我们继续学习输出管理
延伸阅读
- SurviveJS 上的加载字体
10 贡献者
