使用 Webpack 2 在单独的目录中打包 Font Awesome 字体文件

Question

我正在尝试在 Cordova 应用程序中使用 Webpack 2 和 Font Awesome。 Cordova 应用程序生成如下文件结构：

app
config.xml
hooks
node_modules
package.json
platforms
plugins
webpack.config.js
www

（这自然包括我的 NPM 文件和 webpack 配置，用于上下文。app 是我存放原始 JSX 源代码的地方）。

www 下的结构（这是编译出来的 Web 应用程序应该去的地方），如下所示：

css
fonts
img
index.html
js

我创建了 fonts 目录作为 webpack 配置的目标。我遇到的问题是我可以将字体复制到根目录下的某个有用位置，也可以让过滤后的 CSS 正确，但不能同时使用两者。

例如，如果我使用如下示例：

        {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            loader: "file-loader?name=[name].[ext]&outputPath=www/fonts/&publicPath=/fonts/"
        }

文件被放在www 下，但编译后的源代码却很奇怪。

@font-face {
  font-family: 'FontAwesome';
  src: url(/fonts/www/fonts/fontawesome-webfont.eot);
  src: url(/fonts/www/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0) format('embedded-opentype'), url(/fonts/www/fonts/fontawesome-webfont.woff2) format('woff2'), url(/fonts/www/fonts/fontawesome-webfont.woff) format('woff'), url(/fonts/www/fonts/fontawesome-webfont.ttf) format('truetype'), url(/fonts/www/fonts/fontawesome-webfont.svg#fontawesomeregular) format('svg');
  font-weight: normal;
  font-style: normal;
}

在尝试将字体放置在www 下时，我还没有找到文件加载器的合适媒介。 How to configure font file output directory from font-awesome-webpack in webpack? 和 Can't load font-awesome with Webpack 中的建议确实没有让我得到任何帮助。

Answer 1

file-loader 中的outputPath 选项与您的输出目录相关，因此将包含在路径中。而publicPath 只是将给定路径添加到使用路径的开头，这基本上意味着输出目录将位于服务器上的其他位置。这使原始路径保持不变，因为目录中的结构必须保持不变。

要使其如您所描述的那样工作，您需要更改处理输出目录的方式。正如您已经提到的，您的输出目录是 www，这是 webpack 应该放置所有内容的地方。因此将output.path 配置为www 是有意义的。

output: {
  path: path.resolve(__dirname, 'www'),
  // Other output options
}

有了这个，您不需要在每个输出名称/路径中指定www。例如，您可能已经按照以下方式做了一些事情：filename: 'www/bundle.js，现在变成了filename: 'bundle.js'。即使结果相同，但背后的概念却不同，因为你只是告诉 webpack 将输出文件放在哪里，但只有文件名本身与任何处理相关，而输出目录无关紧要。

现在您必须将file-loader 中的outputPath 更改为fonts/，如果没有publicPath，您将获得以下网址：

url(fonts/fontawesome-webfont.eot);

这是一个相对路径，您可能希望将其设为服务器相对路径。唯一缺少的是前导 /，因此您将 publicPath 设置为 / 并且您的规则变为（使用更好的 webpack 2 语法而不是内联选项，这样更容易阅读） ：

{
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
  loader: 'file-loader',
  options: {
    name: '[name].[ext]',
    outputPath: 'fonts/',
    publicPath: '/'
  }
}

您可能希望包含资产的其他加载器也尊重相同的公共路径，因此您可以在output.publicPath 中设置它，而不是为每个加载器定义它。

output: {
  path: path.resolve(__dirname, 'www'),
  publicPath: '/',
  // Other output options
}