Webpack mini- css -extract-plugin @ font-face url разрешение проблемы - PullRequest
Новая
       54

Webpack mini- css -extract-plugin @ font-face url разрешение проблемы

1 голос
/ 04 марта 2020

Мне трудно понять природу URL-адресов / путей и способы их разрешения при использовании mini-css -extract-plugin, загрузчика файлов и настройке их параметров, таких как свойства context и filename .

Я занимаюсь разработкой пользовательской темы для WordPress с папкой пользовательской темы, в которой я инициализировал файл npm project / package. json и файл webpack.config. js. Я использую плагин browser-syn c для прокси локального сервера WordPress к серверу browser-syn c.

Загрузчик файлов отправляет файлы в папку dist> assets> fonts. Но URL-адрес, сгенерированный в скомпилированном файле css, не разрешается правильно.

output css, ошибка консоли браузера 

GET http://localhost:4444/wp-content/themes/test/dist/css/assets/fonts/my-font.ttf net::ERR_ABORTED 404 (Not Found)

GET http://localhost:4444/wp-content/themes/test/dist/css/assets/fonts/my-font.woff 404 (Not Found)

В ошибке выше URL показывает dist/css/assets/fonts/my-font.woff, что не соответствует ожиданиям. Ожидается, что он будет dist/assets/fonts/my-font.woff, поскольку именно там файл-загрузчик выдает файлы в папке dist. (как определено в опции контекста загрузчика файлов)

Я не понимаю, почему он добавляет каталог css в URL-адрес шрифтов. Единственное упоминание о пути dist/css содержится в свойстве имени файла параметров MiniCSSExtractPlugin. Так как именно здесь я хотел бы вывести файл css.

Это можно подтвердить, удалив префикс пути css в свойстве filename. Затем URL-адрес правильно разрешается относительно пути dist, но затем скомпилированный файл css помещается в папку root dist, а не в собственный подкаталог dist/css.

mini css параметры извлечения плагина 

new MiniCSSExtractPlugin({
            filename: 'css/[name].css',
        }),

правило шрифта в файле s css 

@font-face {
  font-family: 'my-font';
  src: url("../assets/fonts/my-font.eot");
  src: url("../assets/fonts/my-font.eot") format("embedded-opentype"),
  url("../assets/fonts/my-font.ttf") format("truetype"),
  url("../assets/fonts/my-font.woff") format("woff"),
  url("../assets/fonts/my-font.svg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

запись конфигурации веб-пакета и вывод 

 entry: {
        'frontend': './src/js/frontend.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "js/[name].js"
    },

module.rules 

module: {
        rules: [
            {...},
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: MiniCSSExtractPlugin.loader
                    },
                    {
                        loader: "css-loader"
                    },
                    {
                        loader: "sass-loader"
                    },
                ]
            },
            {
                test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            context: path.resolve(__dirname, 'src'),
                            name: '[path][name].[ext]'
                        }
                    }
                ]
            }

плагинов 

plugins: [
        new CleanWebpackPlugin(),
        new BrowserSyncWebpackPlugin({...}),
        new MiniCSSExtractPlugin({
            filename: 'css/[name].css',
        }),
    ]

Я новичок в вебпаке, и я сталкиваюсь с несколькими трудностями, пытаясь заставить URL шрифта решить правильно. У меня такое ощущение, что я не понимаю цели относительных / абсолютных путей, контекста и общего пути в конфигурации веб-пакета. Любые идеи или разъяснения относительно того, как определяется URL в скомпилированном css, будут для меня огромной помощью.

С большим спасибо,

...