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"

И ничего не помещается в публичный каталог. Это то, что я должен установить отдельно? Как я могу сказать загрузчику создать идентичный каталог (внутри каталога app/) внутри публичной папки с моими файлами шрифтов?

1 ответ

Использование url-загрузчика (без указания каких-либо путей (выходных или общедоступных)) решило мою проблему (исходный ответ найден здесь https://www.robinwieruch.de/webpack-font)

         //webpack.config.js

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

  {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    exclude: /node_modules/,
    loader: 'file-loader?limit=1024&name=fonts/[name].[ext]'
  },
  { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    exclude: /node_modules/,
    loader: "file-loader?limit=1024&name=fonts/[name].[ext]"
  }

Шрифты теперь переносятся в каталог public/fonts, как и ожидалось.

Но сейчас я пытаюсь добиться того же результата, получая файлы из app/assets/images и положить их внутрь public/images/ но код ниже даже не подхватывается webpack команда:

{
      test: /\.(jpg|jpeg|gif|png|svg)$/,
      exclude: /node_modules/,
      loader: "file-loader?limit=1024&name=images/[name].[ext]"
  }

Что с этим не так? Это так же, как скрипт шрифтов.

Другие вопросы по тегам