1

次の webpack スクリプトがあります。

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build'),
  fonts: path.join(__dirname, 'app/assets/fonts')
};

私のファイルはバンドルされ、ビルドディレクトリに出力され、すべて正常に動作します。ただし、フォントローダーを追加しました。私のアプリ ディレクトリ内には、次のフォルダー内にフォント ファイルがあります: app/assets/fonts(現在は TTF のみですが、これは変更される予定です)。

const common = {
  entry: {
    app: PATHS.app
  },
  output: {
    path: PATHS.build,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=stage-2,presets[]=react,plugins[]=transform-runtime'],
        exclude: /node_modules/
      },
      {


   test: /\.scss$/,
    loaders: ["style", "css?sourceMap", "sass?sourceMap"]
  },
  { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
  { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
]
    ]
  }
};

上記のフォント スクリプトはまったく何もしません。デフォルトのスクリプトを両方とも実行します。

"build": "webpack",
"start": "webpack-dev-server"

public ディレクトリには何も置かれません。これは別に設定しなければならないものですか？フォント ファイルを含む public フォルダー内に (app/ 内の) 同一のディレクトリを作成するようにローダーに指示するにはどうすればよいですか?

4

1 に答える 1

1

URLローダーを使用して（パス（出力またはパブリック）を指定せずに）、問題を解決しました（元の回答はhttps://www.robinwieruch.de/webpack-fontにあります）

//webpack.config.js

...
module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.(woff|woff2)$/,
        use: {
          loader: 'url-loader',
        },
      },
    ],
  },
  ...
};

于 2020-11-07T06:59:04.060 に答える