在 Phoenix 框架中使用 webpack 提供字体答案

【问题标题】：Serving fonts using webpack in Phoenix framework在 Phoenix 框架中使用 webpack 提供字体
【发布时间】：2019-04-24 12:25:51
【问题描述】：

我正在使用带有 webpack 的 Phoenix 1.4 rc（默认情况下）。而且我无法在我的应用程序中提供字体。我在 assets/fonts 文件夹中添加了字体。然后运行它。 webpack 就这样抱怨它..

./fonts/dashboard.ttf
    Module parse failed: Unexpected character '^@' (1:0)
    You may need an appropriate loader to handle this file type

所以我在 google 上搜索了一下，并在 webpack.config.js 中添加了这段代码

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: ["file-loader"]
      }
    ]
  },

然后运行它。 webpack 没有抱怨，但是当我去我的应用程序时。它说

(Phoenix.Router.NoRouteError) no route found for GET /css/b06871f281fee6b241d60582ae9369b9.ttf

Phoenix 不会在 priv/static 文件夹中生成“fonts”文件夹。

我可以在 priv/static/js 文件夹中找到字体文件

我认为在 webpack.config.js 文件中，输出路径是“/priv/static/js”.. 那么我怎样才能正确地提供字体文件呢？我在这里做错了什么？

【问题讨论】：

尝试将它们添加到您的静态文件夹 Tae。例如资产/静态/字体
你把字体放在 assets/static/css 文件夹了吗？
我尝试将字体文件夹添加到它们。但我有同样的错误

标签： webpack elixir phoenix-framework

【解决方案1】：

您可以将outputPath 提供给file-loader，而不是将其与js 文件夹放在一起：

{
  test: /\.(svg|woff2?)$/,
  use: [{
    loader: 'file-loader',
    options : {
      name: '[name].[ext]',
      outputPath: '../fonts',
    }
  }],
},

【讨论】：

【解决方案2】：

我刚刚得到它（希望如此），也许不是最佳实践：

由于字体文件进入“/priv/static/js”，我像这样添加了“publicPath”，所以可以从.css文件中找到它们：

  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../priv/static/js'),
    publicPath: "../js/"  // <-------------------------- added this
  },

谁有更好的解决方案，请告诉我。非常感谢。

【讨论】：