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

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

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

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

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

现在您必须将outputPath中的file-loader更改为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
}

打包字体令人敬畏的字体文件在Webpack 2的单独目录中

1 个答案: