【WEBPACK v4.29.6 随缘翻译】4.资源管理
资源管理
如果你从一开始就跟着教程做， 你现在已经有一个叫做"Hello webpack"的小项目了， 现在让我们尝试处理其他的资源，像是 images，看看他们是如何被处理的。
在webpack之前， 前端开发者会使用grunt 、gulp之类的工具去处理这些资源文件， 并且把他们从/src 目录移动到 /dist 甚至是 /build 目录。 当然这个想法也同样用于处理Javascript模块， 但是像是webpack这类工具会动态构建所有依赖项目（创建之前说过的 依赖图像），这简直棒极了，因为所有模块现在显式地声明它地依赖项，这样我们就可以避免把不必要地依赖项构建到当前项目中去。
webpack最棒的一个特性是， 只要有loader，你可以包含任何类型的文件到当前模块，而不仅仅Javascript 。 这就意味着对于任何用于JavaScript的好东西（像是显式声明依赖项）可以同样接受所有东西，去构建你的网站或者app， 让我们先从css开始吧， 你可以已经对此步骤非常熟悉了。
构建
首先对我们之前使用的项目做一些微小的更改：
<!doctype html>
<html>
<head>
- <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
为了将一个css 引入到JavaScript模块中， 你需要将 style-loader 以及 css-loader 安装并且添加到你的 module configuration 中：
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$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
};
webpack 使用常规的表达式去检测那个文件应该被查找，并且将它推送给指定的loader去处理。这样的话任何以.css 结尾的文件都会被分配给 style-loader 和 css-loader 。
这可以让你成功引入 style.css( import './style.css') 文件到需要该样式的模块中。现在一旦模块运行，一个包含字符化css的<style>会插入到html文件的 <header> 标签中。
让我们添加一个 style.css 文件到项目中并把它引入到index.js 中：
project
webpack-demo
|- package.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() {
var 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
...
Asset Size Chunks Chunk Names
bundle.js 76.4 KiB 0 [emitted] main
Entrypoint main = bundle.js
...
在浏览器中再次打开 index.html， 你应该会看到 Hello webpack 已经被格式化为红色。 想看webpack究竟对我们的项目做了什么， 检查页面(不要看页面源文件，因为它不会给你看的(✿◡‿◡))，只需要看页面的head标签。 它一般会包含我们之前给index.js 引入的style块。
记住你可以，并且大多数情况下需要，最小化css , 为了更短时间加载完毕。在最上面， 有许多不同风格的CSS loader 供你挑选。例如 postcss, sass, less ，这里仅仅举几个例子。
加载图片
现在我们可以在项目里引入css ，但是如果我们的图片，像是背景图片或者是图标也想搞进去该怎么办呢？ ——使用file-loader 我们可以同样很轻松地将他们插入到项目中：
npm install --save-dev file-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$/,
use: [
'style-loader',
'css-loader'
]
},
+ {
+ test: /\.(png|svg|jpg|gif)$/,
+ use: [
+ 'file-loader'
+ ]
+ }
]
}
};
现在，当你引入图片(import MyImage from './my-image.png')， 这个图片会被处理，并添加到你的输出目录中， 处理完毕的图片最终会生成一个url。 当像上面那样使用css-loader 的时候， 类似的处理过程会把url('./my-image.png')添加入你的CSS中。loader会把图片识别问本地文件，并且将'./my-image.png'路劲替换为最终在你输出目录下的图片路径。 html-loader 以同样的方式处理<img src="./my-image.png" />。
现在添加一个图片到我们项目中，然后看看它是怎么工作的，你可以引用任何你喜欢的图片(意味着教程不提供图片...)：
project
webpack-demo
|- package.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() {
var 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.
+ var 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
...
Asset Size Chunks Chunk Names
da4574bb234ddc4bb47cbe1ca4b20303.png 3.01 MiB [emitted] [big]
bundle.js 76.7 KiB 0 [emitted] main
Entrypoint main = bundle.js
...
如果一切顺利，你应该会看到你的你的icon变成了一个叠加的背景图片， 就像是要给img 标签在我们的Hello webpack 下面一样(笑). 如果你观察这个元素， 你会看到它真正的面目（文件名） 已经变成像下面这个样子：
5c999da72346a995e7e2718865d019c8.png。这意味着webpack在我们的src文件夹找到了图片并且成功的处理掉了它。
一个合理的不走是最小化并且优化你的图片。 浏览 image-webpack-loader以及url-loader以查看更多关于如何加强图片加载处理的技能！
加载字体
如果要加载其他资源，像是字体呢？ 文件、url loader 会处理任何你载入的文件并且输出到你的build 目录。 这就意味着我们使用它去处理任何类型的文件，包括fonts。 首先，更改一下 webpack.config.js 使得webpack具有加载字体的能力。
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$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
+ {
+ test: /\.(woff|woff2|eot|ttf|otf)$/,
+ use: [
+ 'file-loader'
+ ]
+ }
]
}
};
添加一些字体文件到你的项目中：
project
webpack-demo
|- package.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处理，就像处理image那样：
+ @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');
}
现在运行build命令，看看wbepack是否处理了字体文件：
npm run build
...
Asset Size Chunks Chunk Names
5439466351d432b73fdb518c6ae9654a.woff2 19.5 KiB [emitted]
387c65cc923ad19790469cfb5b7cb583.woff 23.4 KiB [emitted]
da4574bb234ddc4bb47cbe1ca4b20303.png 3.01 MiB [emitted] [big]
bundle.js 77 KiB 0 [emitted] main
Entrypoint main = bundle.js
打开index.html ，看看我们的Hello Webpack 文本是否已经被改变为新的字体。 如果一切顺利， 应该是会看到这些变化的。
加载数据
另外一个很有用的可被加载资源是data，像是JSON files , CSVs, TSVS ,以及XML。 对于JSON的支持实际上已经被内部支持，像是NodeJS一样，意味着 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$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
+ {
+ test: /\.(csv|tsv)$/,
+ use: [
+ 'csv-loader'
+ ]
+ },
+ {
+ test: /\.xml$/,
+ use: [
+ 'xml-loader'
+ ]
+ }
]
}
};
添加一些数据文件到你的项目中：
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
+ |- data.xml
|- 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>
现在你可以加载任何JSON, CSV,TSV,XML。 你引入的Data变量会被解析为JSON。
import _ from 'lodash';
import './style.css';
import Icon from './icon.png';
+ import Data from './data.xml';
function component() {
var 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.
var myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);
+ console.log(Data);
return element;
}
再次运行npm run build 命令，并且打开Index.html。 如果你看了控制台（浏览器或者NODE） ，你应该可以看到你载入的data 被打印到控制台上。
这个在实现一些数据可视化工具，例如D3 会变得非常有用。 比起在运行时请求ajax请求并且转换data， 你可以在构建的时候就将它载入你的模块， 而转换过后的数据可以在模块载入到浏览器的时候马上被使用。
全局资源
上面提到的最酷的一部分是， 使用这个方式加载模块允许你给模块和资源分组到一起，使其变得更加直观。比起依赖于包含所有资源的全局的/assets 目录， 你可以将对应的资源文件于代码分到同一个目录下。 例如，下面这个目录结构会变得非常有用：
- |- /assets
+ |– /components
+ | |– /my-component
+ | | |– index.jsx
+ | | |– index.css
+ | | |– icon.svg
+ | | |– img.png
这个步骤让你的代码变得更“便携“ 当所有组件即将对接的时候。 加入你想把 /my-component 用于其他项目， 直接简单的复制或者移动这个目录到目标项目的/components 下。 一旦你安装了所需要的外部依赖项，以及你的配置文件中对应的loaders被定义， 你的组件应该能跑起来。
然而， 加入你已经被你那根深蒂固的观念束缚，或者你有一些资源是多个组件共享的（views, templates, modules, 等到）。 webpack依然可以将这些资源保存在根目录下， 你甚至可以使用 aliasing 让项目变得更加容易加载。
包装
下一节教程，我们不需要使用本章用到的，这些乱七八糟的资源文件。所以我们需要对其做一些清理以便我们进入下一章节。
project
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
- |- data.xml
- |- my-font.woff
- |- my-font.woff2
- |- icon.png
- |- style.css
|- index.js
|- /node_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$/,
- use: [
- 'style-loader',
- 'css-loader'
- ]
- },
- {
- test: /\.(png|svg|jpg|gif)$/,
- use: [
- 'file-loader'
- ]
- },
- {
- test: /\.(woff|woff2|eot|ttf|otf)$/,
- use: [
- 'file-loader'
- ]
- },
- {
- test: /\.(csv|tsv)$/,
- use: [
- 'csv-loader'
- ]
- },
- {
- test: /\.xml$/,
- use: [
- 'xml-loader'
- ]
- }
- ]
- }
};
src/index.js
import _ from 'lodash';
- import './style.css';
- import Icon from './icon.png';
- import Data from './data.xml';
-
function component() {
var 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.
- var myIcon = new Image();
- myIcon.src = Icon;
-
- element.appendChild(myIcon);
-
- console.log(Data);
return element;
}
