webpack中引入资源

引入图片资源

用webpack内置的 Asset Modules 就可以轻松添加图片资源到我们的项目中，不需要再另外安装loader。

webpack.config.js添加配置：

// using the built-in Asset Modules of webpack to incorporate our images
      {
        test: /\.(png|svg|jpg|jpeg|gif)/i,
        type: 'asset/resource'
      },

引入 fonts 字体

引入数据

webpack可以加载数据资源，如JSON文件、CSV、TSV和XML。 对JSON的支持实际上是内置的，这意味着从./data.json导入数据将在默认情况下工作。 要导入CSV、TSV和XML，可以使用csv-loader和xml-loader，首先安装相应的loader：

npm install --save-dev csv-loader xml-loader

webpack.config.js文件增加如下配置：

{
        test: /\.(csv|tsv)$/i,
        use: ['csv-loader'],
      },
      {
        test: /\.xml$/i,
        use: ['xml-loader'],
      }

这种引入数据的方式很有用，比如实现某种数据可视化时（像d3工具中）， 在构建过程中就能将数据加载到模块中，这样一旦模块进入浏览器，解析的数据就可以在模块中用到，而不是等到在运行时提出ajax请求并解析数据。

自定义 JSON 模块解析器

通过使用 自定义解析器（parser） 替代特定的 webpack loader，可以将任何 toml、yaml 或 json5 文件作为 JSON 模块导入。当然需要安装相应的解析器loader，Install toml, yamljs and json5 packages ：

npm install toml yamljs json5 --save-dev

webpack.config.js增加以下配置：

   {
        test: /\.toml$/i,
        type: 'json',
        parser: {
          parse: toml.parse,
        },
      },
      {
        test: /\.yaml$/i,
        type: 'json',
        parser: {
          parse: yaml.parse,
        },
      },
      {
        test: /\.json5$/i,
        type: 'json',
        parser: {
          parse: json5.parse,
        },
      },

总结

上述所有内容中最出色之处在于，以这种方式加载资源，可以以更直观的方式将模块（modules）和资源 (assets) 组合在一起。无需依赖于含有全部资源的 /assets 目录，而是将资源与代码组合在一起使用。例如，类似这样的结构会非常有用：

 |- /assets
 |– /components
 |  |– /my-component
 |  |  |– index.jsx
 |  |  |– index.css
 |  |  |– icon.svg
 |  |  |– img.png

这种配置方式会使你的代码更具备可移植性，因为现有的集中放置的方式会让所有资源紧密耦合起来。假如你想在另一个项目中使用 /my-component，只需将其复制或移动到 /components 目录下。只要你已经安装过全部_外部依赖_，并且_已经在配置中定义过相应的 loader，那么项目应该能够良好运行。

相应代码链接