如何让webpack在一个基于反应的铬扩展名中包含字体令人敬畏的woff文件？

Question

我正在开发一个基于React.js的铬扩展，所有资产都与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;

这很好，我可以使用反应法来使用字体-很棒，如下所示：

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

但是，一旦我停止使用webpack-dev服务器，并将其构建到一个实际的包中，作为Google扩展(带有相同加载程序的)导入，我就开始在我的控制台中看到以下错误：

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上访问？

Answer 1

这是一种很麻烦的方法，因此要在您的react铬扩展名应用程序中包含方框，首先安装火锅，然后构建react应用程序，即，在此之后，您将看到build/static/media/目录中的所有静态媒体文件，或者将每个文件的名称复制到您的/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/。这是我几小时后发现的解决办法。