Question

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

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

所以我用谷歌搜索并将此代码添加到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”。那么如何正确提供字体文件？那我在做什么错了？

Answer 1

（希望）我刚开始工作，也许不是最佳实践：

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

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

任何人都有更好的解决方案，请让我知道。非常感谢。

Answer 2

可以将outputPath到file-loader而不是放在js文件夹中：

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

在Phoenix框架中使用Webpack提供字体

2 个答案: