- 翻譯作者： 飯團(tuán)爸爸
資源管理
如果你已經(jīng)讀過webpack指南 初探 那么你已經(jīng)有一個簡單的 'Hello webpack' 的項(xiàng)目。現(xiàn)在讓我嘗試去添加一些其它的資源,比如說圖片疆导，看看 webpack 是如何處理的艾栋。
在有 webpack 之前介褥，前端開發(fā)工程師使用 grunt 或者 gulp 等工具去處理資源文件旋膳，然后將它們從src文件夾移動到/dist或者/build文件夾中。類似的方法在 JavaScript Module,但是類似 webpack 的工具會動態(tài)綁定所有的依賴（通過創(chuàng)建依賴圖的方式）肩祥。這樣的好處在于所有的模塊都顯示聲明它們的依賴公荧，避免綁定我們不需要的模塊带射。
webpack 中一個非常酷的功能是可以包含除了 JavaScript 文件之外的任何文件循狰，只需要配置好相應(yīng)的加載器 loader窟社。這意味著以上那些關(guān)于 JavaScript（例如：顯示聲明）的優(yōu)點(diǎn)可以用在構(gòu)建 website 或者 webapp 的各處。現(xiàn)在我們從 CSS 這個可能是你最熟悉的部分開始绪钥。
譯者注釋 : webpack 將各種資源文件統(tǒng)稱為 asset灿里，這個詞一般指資產(chǎn)，不過資產(chǎn)這個詞
過于正式程腹，所以在這里我將統(tǒng)一將 asset 翻譯為資源
步驟
在此之前匣吊，我們先對我們的項(xiàng)目做一點(diǎn)微調(diào)。
dist/index.html
<html>
<head>
- <title>Getting Started</title>
+ <title>Asset Management</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html
加載 CSS
為了import一個 CSS 文件從 JavaScript 模塊，你需要安裝然后添加style-loader和css-loader到你的module配置：
npm install --save-dev style-loader css-loader
webpack.config.js
var 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 使用正則表達(dá)式去指明需要搜索什么文件色鸳，以及如何去加載這些文件社痛。在這里
例子中，所有文件后綴名稱為.css的文件將會被stlye-loader和css-loader加載命雀。
上述配置將使你可以用import的方式將'./style.css'引入你的文件中∷獍В現(xiàn)在我們讓這個模塊運(yùn)行起來。一個<script>標(biāo)簽將會被被一段在 html 文件頭部的字符串所替代吏砂。
現(xiàn)在讓我們添加一個新的style.css文件到我們的項(xiàng)目中撵儿，并且將其添加到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());
現(xiàn)在開始運(yùn)行構(gòu)建命令
npm run build
Hash: 9a3abfc96300ef87880f
Version: webpack 2.6.1
Time: 834ms
Asset Size Chunks Chunk Names
bundle.js 560 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] ./src/style.css 1 kB {0} [built]
[2] ./~/css-loader!./src/style.css 191 bytes {0} [built]
[3] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
[4] ./~/style-loader/lib/addStyles.js 8.7 kB {0} [built]
[5] ./~/style-loader/lib/urls.js 3.01 kB {0} [built]
[6] (webpack)/buildin/global.js 509 bytes {0} [built]
[7] (webpack)/buildin/module.js 517 bytes {0} [built]
[8] ./src/index.js 351 bytes {0} [built]
打開index.html文件在你的瀏覽器，你會看到Hello webpack現(xiàn)在變成紅色了狐血。為了看 webpack 做了什么淀歇，我們可以檢視頁面（不要查看頁面代碼，它不會給你展示結(jié)果)匈织，然后看頁面的 <head> tag浪默，你會看見我們的樣式已經(jīng)被包含在內(nèi)了。
你甚至可以拆分你的 CSS 文件缀匕，以便能在生產(chǎn)環(huán)節(jié)中更好的決定加載實(shí)際浴鸿。除此之外你
還可以加載 CSS 的變體包括 postcss,sass 或者 less.
加載圖片
現(xiàn)在我們可以修改 CSS 了，那么我們?nèi)绾翁砑訄D片作為背景或者圖標(biāo)呢弦追？使用file-loader我們可以很容易的將它們納入我們的體系中.首先我們按照 file-loader
npm install --save-dev file-loader
webpack.config.js
var 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'
+ ]
+ }
]
}
};
現(xiàn)在，當(dāng)你從./my-image.png中引入MyImage,這個圖片將被處理花竞，然后添加到output目錄劲件，并且這個MyImage變量將包含這個圖片被處理后的最終 url。當(dāng)使用css-loader约急，正如所展示的那樣零远，一個類似的處理url('./my-image.png')的方法會被調(diào)用在你的 CSS 中。這個加載器將會識別出這個本地文件厌蔽，然后替換'./my-image.png'路徑為最終output文件夾中的目錄牵辣。html-loader 處理使用同樣的方法。
現(xiàn)在我們添加圖片到我們的項(xiàng)目中奴饮，看看它是如何工作的纬向，你可以使用任意一張你自己的圖片。
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');
}
讓我們重新構(gòu)建項(xiàng)目戴卜，然后打開 index.html 文件逾条。
npm run build
Hash: 854865050ea3c1c7f237
Version: webpack 2.6.1
Time: 895ms
Asset Size Chunks Chunk Names
5c999da72346a995e7e2718865d019c8.png 11.3 kB [emitted]
bundle.js 561 kB 0 [emitted] [big] main
[0] ./src/icon.png 82 bytes {0} [built]
[1] ./~/lodash/lodash.js 540 kB {0} [built]
[2] ./src/style.css 1 kB {0} [built]
[3] ./~/css-loader!./src/style.css 242 bytes {0} [built]
[4] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
[5] ./~/style-loader/lib/addStyles.js 8.7 kB {0} [built]
[6] ./~/style-loader/lib/urls.js 3.01 kB {0} [built]
[7] (webpack)/buildin/global.js 509 bytes {0} [built]
[8] (webpack)/buildin/module.js 517 bytes {0} [built]
[9] ./src/index.js 503 bytes {0} [built]
如果一切正常的話，你可以看到你的 icon 會作為背景反復(fù)出現(xiàn)投剥，與此同時一個img元素將會出現(xiàn)在Hello webpack文本后面师脂。如果你審查這些元素，你會看到實(shí)際的文件名稱已經(jīng)被該為類似5c999da72346a995e7e2718865d019c8.png的結(jié)構(gòu)，這意味著 webpack 在src中找到了我們的文件吃警，并且處理過他們糕篇。
一個合理的步驟是壓縮和優(yōu)化你的圖片呐粘，查看 image-webpack-loader 和 url-loader 的介紹獲取更多關(guān)于如何優(yōu)化你的圖片處理過程的內(nèi)容危虱。
加載字體
好！現(xiàn)在我們來看看如何加載字體資源挪捕。文件和 url 加載器可以加載任何文件谒府，并且輸出到你的構(gòu)建目錄中拼坎，任何文件意味著包括字體文件。現(xiàn)在我們更新配置文件去處理字體文件完疫。
webpack.config.js
var 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'
+ ]
+ }
]
}
};
添加一些字體文件到你的項(xiàng)目中
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
使用以上的加載器配置和字體文件泰鸡，你可以將字體納入你的項(xiàng)目，使用引用本地文件的url()命令壳鹤，你同樣可以加載字體文件盛龄，就像加載圖片一樣。
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');
}
現(xiàn)在我們再次構(gòu)建
npm run build
Hash: b4aef94169088c79ed1c
Version: webpack 2.6.1
Time: 775ms
Asset Size Chunks Chunk Names
5c999da72346a995e7e2718865d019c8.png 11.3 kB [emitted]
11aebbbd407bcc3ab1e914ca0238d24d.woff 221 kB [emitted]
bundle.js 561 kB 0 [emitted] [big] main
[0] ./src/icon.png 82 bytes {0} [built]
[1] ./~/lodash/lodash.js 540 kB {0} [built]
[2] ./src/style.css 1 kB {0} [built]
[3] ./~/css-loader!./src/style.css 420 bytes {0} [built]
[4] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
[5] ./src/MyFont.woff 83 bytes {0} [built]
[6] ./~/style-loader/lib/addStyles.js 8.7 kB {0} [built]
[7] ./~/style-loader/lib/urls.js 3.01 kB {0} [built]
[8] (webpack)/buildin/global.js 509 bytes {0} [built]
[9] (webpack)/buildin/module.js 517 bytes {0} [built]
[10] ./src/index.js 503 bytes {0} [built]
打開index.html文件芳誓，我們可以看到Hello webpack的字體已經(jīng)改變?yōu)樾碌淖煮w余舶，如果一切正常，你會看到這些變化的锹淌。
加載數(shù)據(jù)
另一種常用的被加載的是數(shù)據(jù)匿值，類似 JSON 文件，CSVs,TSVs 和 XML赂摆。NodeJS 原生支持對 JSON 文件的支持挟憔，這意味著你只需要使用 import Data from './data.json'命令就可以直接使用了。但是引入 CSVs,TSVs 和 XML 你需要使用csv-loader和xml-loader,現(xiàn)在讓我們同時加載它們烟号。
npm install --save-dev csv-loader xml-loader
webpack.config.js
var 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'
+ ]
+ }
]
}
};
添加數(shù)據(jù)文件到項(xiàng)目中
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
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>
現(xiàn)在我們可以通過import使用者四種數(shù)據(jù)(JSON,CSV,TSV,XML)并且數(shù)據(jù)將被直接解析為 JSON 結(jié)構(gòu)易于我們使用绊谭。
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;
}
document.body.appendChild(component());
當(dāng)你打開index.html文件,你可以在瀏覽器的開發(fā)工具控制臺中看到被引入的文件的日志。
（譯者注：使用這個加載數(shù)據(jù)文件的特性汪拥，非常有利于測試达传，可以用這個特性模擬 ajax 請求的數(shù)據(jù)，有助于前后端同時開始迫筑。而不相互等待)
