通过 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.jsconst 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’ // 引入cssfunction 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-loadercnpm install –save-dev file-loader修改webpack.config.jsconst path = require(‘path’);module.exports = {… module: { rules: [ { test: /.css$/, // 根据正则表达式，来确定应该查找哪些文件 use: [ // 并将其提供给指定的 loader ‘style-loader’, ‘css-loader’ ] }, { test: /.(png|svg|jpg|gif)$/, use: [ ‘file-loader’ ] } ] }};添加一张图片修改index.jsimport _ 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.jsconst 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.jsconst 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 目录，而是将资源与代码组合在一起