Проблема с URL-адресом CSS с плагином clean-webpack и загрузчиком файлов

Мне сложно добавить Font Awesome в свой проект webpack.

Я использую file-loader для передачи файлов веб-шрифтов в static/webfonts/. Затем я использую mini-css-extract-plugin для извлечения css из пакета в static/css/. Это приводит к неправильным URL-адресам, например:

static/css/static/webfonts/fa-solid-900.9451d5fe.woff2

Единственный способ заставить его работать - это вывести css в root (то же самое с файловым загрузчиком не работает). Есть идеи, что я делаю не так?

Вот мой webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = (env, options) => {
  const isDev = options.mode === 'development';

  return {
    mode: isDev ? 'development' : 'production',
    entry: {
      app: './src/js/index.js'
    },
    output: {
      filename: 'static/js/[name].[contenthash:8].bundle.js',
      chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
      path: path.resolve(__dirname, 'dist')
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        template: './public/index.html'
      }),
      new MiniCssExtractPlugin({
        filename: 'static/css/[name].[contenthash:8].css',
        chunkFilename: 'static/css/[name].[contenthash:8].chunk.css'
      })
    ],
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
            'css-loader',
          ]
        },
        {
          test: /\.(eot|woff|woff2|ttf)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[contenthash:8].[ext]',
                outputPath: 'static/webfonts'
              }
            }
          ]
        }
      ]
    }
  };
};


webpack javascript webpack-file-loader
person Community    schedule 14.04.2020    source источник
comment
У вас есть static / css / static / webfonts / fa-solid-900.9451d5fe.woff2 в качестве вывода, какое имя вывода вы хотите?   -  person Riven    schedule 15.04.2020
comment
Просто рабочий. Этот URL-адрес, конечно же, из сгенерированного файла CSS и указывает на несуществующий файл. Я попытался вернуться на два каталога в загрузчике файлов, но это не работает. Весь беспорядок в том, что путь относительный, так что, возможно, сделать его абсолютным сработает.   -  person    schedule 15.04.2020
comment
Хорошо, поэтому вы хотите, чтобы вывод был первым, но, как я понимаю, папка, в которой вы выполняете свой приведенный выше код, - это два следующих каталога, если вы выполняете свой код, генерирует папку static / css / static / webfonts / в каталоге это код? или не удается создать этот путь? (я знаю, что вы не хотите находиться в том же каталоге, который указывает на приведенный выше код), но мне нужно знать, создаются ли папки и файлы.   -  person Riven    schedule 15.04.2020
comment
Если они сгенерированы, но по неправильному маршруту, у меня есть возможное решение.   -  person Riven    schedule 15.04.2020
comment
Я нашел решение (выложил как ответ). Но чтобы прояснить, где файлы генерируются, просто отлично. Статическая папка содержит css и веб-шрифты на одном уровне, но URL-адреса в css указаны из css, а не из root. Помогло добавление publicPath, который переходит на два каталога назад в mini-css-extract-plugin. Я также заметил, что в заголовке указано неправильное название плагина. Спасибо за попытку помочь, в следующий раз я потрачу еще больше времени на поиск связанных сообщений.   -  person    schedule 15.04.2020

Ответы (1)


arrow_upward
0
arrow_downward

Что ж, благодаря удивительному алгоритму stackoverflow, один из связанных сообщений дал мне решение.

Кажется, что добавление publicPath: '../../' для MiniCssExtractPlugin.loader заставляет его работать. Не уверен, что это не принесет других проблем, но пока все хорошо.

Полный текст, который мне помог: неверный относительный путь Webpack в css и html

PS: Я сожалею, что нашел его после публикации, но иногда даже обширный поиск не помогает, если вы фразу неправильно: |

person Community    schedule 15.04.2020