共计 3440 个字符，预计需要花费 9 分钟才能阅读完成。
通过 webpack 来管理资源，例如图片、字体 webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。也就是说，以上列出的那些 JavaScript 的优点（例如显式依赖 [import 引入]），同样可以用来构建网站或 web 应用程序中的所有非 JavaScript 内容。让我们从 CSS 开始起步
修改 dist/index.html
<!doctype html>
<html>
<head>
<title>Asset Management</title>
</head>
<body>
<script src=”./bundle.js”></script>
</body>
</html>
在浏览器中打开 index.html 就可以看到 ”Hello webpack” yeah
加载 CSS
为了从 JavaScript 模块中 import 一个 CSS 文件，你需要在 module 配置中 安装并添加 style-loader 和 css-loader：
cnpm 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: [// 并将其提供给指定的 loader
‘style-loader’,
‘css-loader’
]
}
]
}
};
这使你可以在依赖于此样式的文件中 import ‘./style.css’。现在，当该模块运行时，含有 CSS 字符串的 <style> 标签，将被插入到 html 文件的 <head> 中
添加一个 style.css 文件
修改 src/index.js 将 style.css 引入 index.js 中
import _ from ‘lodash’
import ‘./style.css’ // 引入 css
function component() {
var element = document.createElement(‘div’);
element.innerHTML = _.join([‘Hello’, ‘webpack’], ‘ ‘);
element.classList.add(‘hello’); // 使用 css 文件中的 hello 样式
return element;
}
document.body.appendChild(component());
运行构建命令 cnpm run build
浏览器中打开 index.html
源代码中没有包含样式，只有在审查元素可以看到
加载图片
安装 file-loader
cnpm install –save-dev file-loader
修改 webpack.config.js
const path = require(‘path’);
module.exports = {
…
module: {
rules: [
{
test: /\.css$/, // 根据正则表达式，来确定应该查找哪些文件
use: [// 并将其提供给指定的 loader
‘style-loader’,
‘css-loader’
]
}, {
test: /\.(png|svg|jpg|gif)$/,
use: [
‘file-loader’
]
}
]
}
};
添加一张图片
修改 index.js
import _ from ‘lodash’
import ‘./style.css’
import Icon from ‘./jxb.png’
function component() {
var element = document.createElement(‘div’);
element.innerHTML = _.join([‘Hello’, ‘webpack’], ‘ ‘);
element.classList.add(‘hello’); // 使用 css 文件中的 hello 样式
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’);
}
再次构建，运行构建命令 cnpm run build
查看文件目录，dist 文件夹中多了一张图片
浏览器中打开 index.html
合乎逻辑下一步是，压缩和优化你的图像。查看 image-webpack-loader 和 url-loader，以了解更多关于如果增强加载处理图片功能。
加载字体
file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。这就是说，我们可以将它们用于任何类型的文件，包括字体
修改 webpack.config.js
const path = require(‘path’);
module.exports = {
…
module: {
rules: [
{
test: /\.css$/, // 根据正则表达式，来确定应该查找哪些文件
use: [// 并将其提供给指定的 loader
‘style-loader’,
‘css-loader’
]
}, {
test: /\.(png|svg|jpg|gif)$/,
use: [
‘file-loader’
]
},{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
‘file-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;
background: url(‘./jxb.jpg’);
font-family: ‘MyFont’;
}
再次构建，运行构建命令 cnpm run build
加载数据
如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from ‘./data.json’ 默认将正常运行。要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。
修改 webpck.config.js
const path = require(‘path’)
module.exports = {
…
module: {
rules: [{
test: /\.(csv|tsv)$/,
use: [‘csv-loader’]
}, {
test: /\.xml$/,
use: [‘xml-loader’]
}]
}
};
在源目录 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/index.js
…
import Data from ‘./data.xml’
function component () {
var ele = document.createElement(‘div’)
ele.innerHTML = _.join([‘hello’, ‘webpack’], ‘ ‘)
…
console.log(Data)
return ele;
}
document.body.appendChild(component());
再次构建 cnpm run build
构建成功，浏览器打开 dist/index.html
全局资源
上述所有内容中最出色之处是，以这种方式加载资源，你可以以更直观的方式将模块和资源组合在一起。无需依赖于含有全部资源的 /assets 目录，而是将资源与代码组合在一起
