如何让 webpack 在基于反应的 chrome 扩展中包含令人敬畏的字体 woff 文件？答案

【问题标题】：how to have webpack include font awesome woff files in a react based chrome extension?如何让 webpack 在基于反应的 chrome 扩展中包含令人敬畏的字体 woff 文件？
【发布时间】：2016-05-13 17:40:03
【问题描述】：

我正在开发一个基于 React.js 的 chrome 扩展，其中所有资产都与 webpack 捆绑在一起。在开发过程中（使用webpack-dev-server），我成功地让Chrome 从localhost:3000 加载.woff 文件。这是我的开发 webpack 配置的加载器的一部分：

  {
    test: /\.css$/,
    include: /node_modules/,
    loaders: ['style-loader', 'css-loader'],
  },
  {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&mimetype=application/font-woff'
  },
  {
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'file-loader'
  }

用于开发的 chrome 扩展具有以下权限（除其他外）：

font-src 'self' http://localhost:3000 https://localhost:3000;

这很好用，我可以像这样使用react-fa 来使用 font-awesome：

<Icon name="eye" size="2x" />

但是，一旦我停止使用 webpack-dev-server，并构建到要作为 Google chrome 扩展导入的实际包（使用相同的加载器），我开始看到以下内容我的控制台中的错误：

GET chrome-extension://jboakcijpodokbkfeooiffmbbmlfobnl/926c93d201fe51c8f351e858468980c3.woff2 net::ERR_FILE_NOT_FOUND
?brudy:1

GET chrome-extension://jboakcijpodokbkfeooiffmbbmlfobnl/891e3f340c1126b4c7c142e5f6e86816.woff net::ERR_FILE_NOT_FOUND
?brudy:1

GET chrome-extension://jboakcijpodokbkfeooiffmbbmlfobnl/fb650aaf10736ffb9c4173079616bf01.ttf net::ERR_FILE_NOT_FOUND

我相信我的 chrome 扩展程序的清单权限设置正确：

font-src 'self';

但由于某种原因，.woff2 文件似乎不在捆绑包中，至少不在该地址。我检查了 bundle/build 文件夹并在 /build/js/926c93d201fe51c8f351e858468980c3.woff2 找到了该文件。

我如何确保在地址chrome-extension://jboakcijpodokbkfeooiffmbbmlfobnl/926c93d201fe51c8f351e858468980c3.woff2 上确实可以访问该文件？

【问题讨论】：

如果您希望其他网页可以访问它，您可能需要将您的字体路径添加到web_accessible_resources。不太清楚你的问题很抱歉。
你解决了吗？
@Tom 你找到解决方案了吗？

标签： reactjs google-chrome-extension webpack font-awesome woff

【解决方案1】：

这是一种 hacky 方式，因此要在您的 react chrome 扩展应用程序中包含 fontawesome，首先安装 fontawesome 然后构建 react 应用程序，即 yarn build，然后您将在 @987654323 中看到所有静态媒体文件@ 目录或者将每个文件的名称复制到您的 /public/manifest.json 中，例如

  "web_accessible_resources":[
    "/static/css/content.css",
    "/static/media/fontawesome-webfont.674f50d2.eot",
    "/static/media/fontawesome-webfont.912ec66d.svg",
    "/static/media/fontawesome-webfont.b06871f2.ttf",
    "/static/media/fontawesome-webfont.af7ae505.woff2",
    "/static/media/fontawesome-webfont.fee66e71.woff"
  ],

或者您可以将媒体文件的名称从/build/asset-manifest.json复制到/public/manifest.json，然后再次运行yarn build，现在所有静态媒体文件都将添加到/build/manifest.json中，然后将构建文件上传到 chrome://extensions/。这是我几个小时后发现的解决方案。

【讨论】：