CSS Проблема с URL с помощью плагина clean-webpack-file и загрузчика файлов - PullRequest
Новая
       32

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

0 голосов
/ 15 апреля 2020

Я борюсь с добавлением Font Awesome в свой проект веб-пакета.

Я использую 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'
              }
            }
          ]
        }
      ]
    }
  };
};

1 Ответ

0 голосов
/ 15 апреля 2020

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

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

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

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

...