使用 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 下时，我还没有找到文件加载器的合适媒介。 and 中的建议对我毫无帮助。

Answer 1

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

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

是有意义的

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

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

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

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: '/'
  }
}

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

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

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

Packaging Font Awesome font files in a separate directory with Webpack 2

npm

font-awesome

webpack

webpack-2