经典的webpack文档首页的图
在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。但是，像 webpack 这样的工具将 动态打包 所有依赖并创建所谓的 依赖图。这是极好的创举，因为现在每个模块都可以 明确表述它自身的依赖，以避免打包未使用的模块。
webpack 最出色的功能之一就是除了引入 JavaScript（webpack本身只能处理Js文件的打包），（扩展）还可以通过 loader 或内置的 资源模块 引入任何其他类型的文件。
资源管理
加载 CSS
要想在 JavaScript 模块中导入 CSS 文件，需要安装 style-loader 和 css-loader，并在 module 配置 中添加这些 loader：
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$/i,
+ use: ['style-loader', 'css-loader'],
+ },
+ ],
+ },
};
module loader 可以链式调用。链中的每个 loader 都将对资源进行转换，不过链会逆序执行。第一个（也就是末尾的那个） loader 将其结果（被转换后的资源）传递给下一个 loader（倒数第二个loader），依此类推。最后，webpack 期望链中的最后的 loader 返回 JavaScript。
请确保 loader 的先后顺序：'style-loader' 在前，而 'css-loader' 在后。如果不遵守此约定，webpack 可能会抛出错误。
注意，在多数情况下也可以 压缩 CSS 以便在生产环境中节省加载时间。最重要的是，现有的 loader 可以支持任何可以想到的 CSS 样式 —— postcss、sass 和 less 等。
加载图像!
假如现在正在下载 CSS，但是像背景图片和图标这样的图像应该如何处理呢？webpack5 可以使用内置的 资源模块(资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。) 轻松地将这些内容混入系统中：
-
在 webpack 5 之前，通常使用：
-
raw-loader将文件导入为字符串 -
url-loader将文件作为 data URI 内联到 bundle 中 -
file-loader将文件发送到输出目录
资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：
asset/resource发送一个单独的文件并导出 URL。之前通过使用file-loader实现。asset/inline导出一个资源的 data URI。之前通过使用url-loader实现。asset/source导出资源的源代码。之前通过使用raw-loader实现。asset在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用url-loader，并且配置资源体积限制实现(w4url-loader通常需要配合file-loader实现体积限制)。
加载字体!
使用资源模块可以接收并加载任何文件，然后将其输出到构建目录。换言之，我们可以将它们用于任何类型的文件，也包括字体文件。更新 webpack.config.js 以处理字体文件
加载数据
此外，可以加载的有用资源还有数据，如 JSON 文件、CSV、TSV 和 XML。与 NodeJS 类似，对 JSON 的支持实际上也是内置的，即 import Data from './data.json' 默认将正常运行。可以使用 csv-loader 和 xml-loader 导入 CSV、TSV 与 XML。接下来试试加载这三类文件
