Webpack шрифты, ищущие в неправильном каталоге при сборке - PullRequest
Новая
       8

Webpack шрифты, ищущие в неправильном каталоге при сборке

0 голосов
/ 04 ноября 2019

У меня есть проект веб-пакета, в котором во время разработки все работает отлично, но когда я создаю свое приложение, веб-сайт ищет неправильную папку для моих файлов шрифтов. У меня есть файл .scss, где в верхней части я указал $font_path = './assets/fonts/';, и файл находится в папке src/scss/utils. Когда я собрал свое приложение, приложение ищет файлы в ..../dist/static/css/static/fonts/filename.hash.ttf и т. Д., А фактические файлы находятся в папке ..../dist/static/fonts.

Вот мой файл webpack.common.js (который является моей базовой настройкой приложения): 

'use strict';

const helpers = require('./helpers');
const path = require('path');
const webpack = require('webpack')

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry: {
        polyfill: '@babel/polyfill',
        main: path.resolve(__dirname, '../src/main.js'),
        vendor: path.resolve(__dirname, '../src/vendor.js')
    },
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader',
                include: [helpers.root('src')]
            },
            {
                test: /\.html$/,
                use: [
                    'html-loader'
                ]
            },
            {
                test: /\.(jpe?g|gif|png)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[hash].[ext]',
                        outputPath: 'static/img'
                    }
                }
            },
            {
                test: /\.(ttf|eot|woff2?|otf)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: 'static/fonts/[name].[hash].[ext]',
                        limit: 10000
                    }
                }
            },
            {
                test: /\.ico$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[hash].[ext]',
                        outputPath: 'static/img/icons'
                    }
                }
            },
            {
                test: /\.svg$/,
                use: [{
                        loader: 'svg-sprite-loader',
                        options: {
                            spriteFilename: 'sprites.svg',
                            runtimeCompat: true
                        }
                    },
                    {
                        loader: 'svgo-loader',
                        options: {
                            removeTitle: true,
                            removeUselessStrokeAndFill: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
    ]
};

А вот мой webpack.prod.js файл конфигурации для сборки: 

const common = require('./webpack.common');
const merge = require('webpack-merge');
const helpers = require('./helpers');
const webpack = require('webpack');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');

process.env.NODE_ENV = "production";

let dateStamp = new Date().toISOString().slice(0,10).replace(/-/g,"");

module.exports = merge(common, {
    mode: "production",
    resolve: {
        extensions: [ '.js', '.vue' ],
        alias: {
            'vue$': 'vue/dist/vue.runtime.min.js',
            '@': helpers.root('src')
        }
    },
    output: {
        filename: `[name].${dateStamp}.[contentHash].bundle.js`,
        path: helpers.root('dist')
    },
    optimization: {
        runtimeChunk: 'single',
        minimizer: [
            new OptimizeCssAssetsPlugin(), // CSS Minimization
            new TerserPlugin() // JS Minimization (UglifyJS replacement)
        ],
        splitChunks: {
            chunks: "all",
            maxInitialRequests: Infinity,
            minSize: 0
        }
    },
    plugins: [
        new webpack.EnvironmentPlugin({NODE_ENV: 'production'}),
        new MiniCssExtractPlugin({
            filename: `static/css/[name].${dateStamp}.[contentHash].css`
        }),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./index.html",
            inject: true,
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true,
                removeComments: true
            }
        })
    ],
    module: {
        rules: [
            {
                test: /\.(scss|sass)$/,
                use: [
                    MiniCssExtractPlugin.loader, 
                    "css-loader", 
                    "sass-loader"
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
});

Надеюсь, вы сможете обнаружить мою ошибку.

РЕДАКТИРОВАТЬ Добавление ./src/scss/utils/fonts.scss, так как у меня странное чувство, что именно здесь что-то запуталось. 

$font_path: './assets/fonts/';

/* Comfortaa */

@font-face {
    font-family: "Comfortaa";
    font-weight: 300;
    font-style: normal;
    src: url($font_path + 'Comfortaa/Comfortaa_Thin.ttf') format("truetype")
}

@font-face {
    font-family: "Comfortaa";
    font-weight: 400;
    font-style: normal;
    src: url($font_path + 'Comfortaa/Comfortaa_Regular.woff') format("woff"),
        url($font_path + 'Comfortaa/Comfortaa_Regular.woff2') format("woff2"),
        url($font_path + 'Comfortaa/Comfortaa_Regular.ttf') format("truetype"),
        url($font_path + 'Comfortaa/Comfortaa_Regular.eot') format("embedded-opentype"),
        // url($font_path + 'Comfortaa/Comfortaa_Regular.svg') format("svg")
}

@font-face {
    font-family: "Comfortaa";
    font-weight: 700;
    font-style: normal;
    src: url($font_path + 'Comfortaa/Comfortaa_Bold.ttf') format("truetype")
}

/* ROBOTO */

@font-face {
    font-family: "Roboto";
    font-weight: 100;
    font-style: normal;
    src: url($font_path + 'Roboto/Roboto-Thin.woff') format("woff"),
        url($font_path + 'Roboto/Roboto-Thin.woff2') format("woff2"),
        url($font_path + 'Roboto/Roboto-Thin.ttf') format("truetype"),
        url($font_path + 'Roboto/Roboto-Thin-webfont.eot') format("embedded-opentype"),
        // url($font_path + 'Roboto/Roboto-Thin-webfont.svg') format("svg");
}

@font-face {
    font-family: "Roboto";
    font-weight: 300;
    font-style: normal;
    src: url($font_path + 'Roboto/Roboto-Light.woff') format("woff"),
        url($font_path + 'Roboto/Roboto-Light.woff2') format("woff2"),
        url($font_path + 'Roboto/Roboto-Light.ttf') format("truetype"),
        url($font_path + 'Roboto/Roboto-Light-webfont.eot') format("embedded-opentype"),
        // url($font_path + 'Roboto/Roboto-Light-webfont.svg') format("svg");
}

@font-face {
    font-family: "Roboto";
    font-weight: 400;
    font-style: normal;
    src: url($font_path + 'Roboto/Roboto-Regular.woff') format("woff"),
        url($font_path + 'Roboto/Roboto-Regular.woff2') format("woff2"),
        url($font_path + 'Roboto/Roboto-Regular.ttf') format("truetype"),
        url($font_path + 'Roboto/Roboto-Regular-webfont.eot') format("embedded-opentype"),
        // url($font_path + 'Roboto/Roboto-Regular-webfont.svg') format("svg");
}

@font-face {
    font-family: "Roboto";
    font-weight: 500;
    font-style: normal;
    src: url($font_path + 'Roboto/Roboto-Medium.woff') format("woff"),
        url($font_path + 'Roboto/Roboto-Medium.woff2') format("woff2"),
        url($font_path + 'Roboto/Roboto-Medium.ttf') format("truetype"),
        url($font_path + 'Roboto/Roboto-Medium-webfont.eot') format("embedded-opentype"),
        // url($font_path + 'Roboto/Roboto-Medium-webfont.svg') format("svg");
}

@font-face {
    font-family: "Roboto";
    font-weight: 700;
    font-style: normal;
    src: url($font_path + 'Roboto/Roboto-Bold.woff') format("woff"),
        url($font_path + 'Roboto/Roboto-Bold.woff2') format("woff2"),
        url($font_path + 'Roboto/Roboto-Bold.ttf') format("truetype"),
        url($font_path + 'Roboto/Roboto-Bold-webfont.eot') format("embedded-opentype"),
        // url($font_path + 'Roboto/Roboto-Bold-webfont.svg') format("svg");
}

/* SOURCE SANS PRO */

@font-face {
    font-family: "Source Sans Pro";
    font-weight: 100;
    font-style: normal;
    src: url($font_path + 'SourceSans/SourceSansPro-ExtraLight.otf.woff') format("woff"),
        url($font_path + 'SourceSans/SourceSansPro-ExtraLight.otf.woff2') format("woff2"),
        url($font_path + 'SourceSans/SourceSansPro-ExtraLight.ttf') format("truetype"),
        url($font_path + 'SourceSans/SourceSansPro-ExtraLight.eot') format("embedded-opentype"),
        url($font_path + 'SourceSans/SourceSansPro-ExtraLight.otf') format("otf");
}

@font-face {
    font-family: "Source Sans Pro";
    font-weight: 300;
    font-style: normal;
    src: url($font_path + 'SourceSans/SourceSansPro-Light.otf.woff') format("woff"),
        url($font_path + 'SourceSans/SourceSansPro-Light.otf.woff2') format("woff2"),
        url($font_path + 'SourceSans/SourceSansPro-Light.ttf') format("truetype"),
        url($font_path + 'SourceSans/SourceSansPro-Light.eot') format("embedded-opentype"),
        url($font_path + 'SourceSans/SourceSansPro-Light.otf') format("otf");
}

@font-face {
    font-family: "Source Sans Pro";
    font-weight: 400;
    font-style: normal;
    src: url($font_path + 'SourceSans/SourceSansPro-Regular.otf.woff') format("woff"),
        url($font_path + 'SourceSans/SourceSansPro-Regular.otf.woff2') format("woff2"),
        url($font_path + 'SourceSans/SourceSansPro-Regular.ttf') format("truetype"),
        url($font_path + 'SourceSans/SourceSansPro-Regular.eot') format("embedded-opentype"),
        url($font_path + 'SourceSans/SourceSansPro-Regular.otf') format("otf");
}

@font-face {
    font-family: "Source Sans Pro";
    font-weight: 500;
    font-style: normal;
    src: url($font_path + 'SourceSans/SourceSansPro-Semibold.otf.woff') format("woff"),
        url($font_path + 'SourceSans/SourceSansPro-Semibold.otf.woff2') format("woff2"),
        url($font_path + 'SourceSans/SourceSansPro-Semibold.ttf') format("truetype"),
        url($font_path + 'SourceSans/SourceSansPro-Semibold.eot') format("embedded-opentype"),
        url($font_path + 'SourceSans/SourceSansPro-Semibold.otf') format("otf");
}

@font-face {
    font-family: "Source Sans Pro";
    font-weight: 700;
    font-style: normal;
    src: url($font_path + 'SourceSans/SourceSansPro-Bold.otf.woff') format("woff"),
        url($font_path + 'SourceSans/SourceSansPro-Bold.otf.woff2') format("woff2"),
        url($font_path + 'SourceSans/SourceSansPro-Bold.ttf') format("truetype"),
        url($font_path + 'SourceSans/SourceSansPro-Bold.eot') format("embedded-opentype"),
        url($font_path + 'SourceSans/SourceSansPro-Bold.otf') format("otf");
}

1 Ответ

0 голосов
/ 04 ноября 2019

Верно .. Так что я не знаю, что было не так - но это решило мои проблемы (и это ужасно, но работает)

Браузер после компиляции искал мои шрифты в ./dist/static/css/static/fonts/some_name.ttf и т. Д. Я, конечно, хотел, чтобы это было ./dist/static/fonts/some_name.ttf. Я изменил и переместил мою старую конфигурацию из webpack.common.js, которая выглядела так: 

{
   test: /\.(ttf|eot|woff2?|otf)$/,
   use: {
       loader: 'url-loader',
       options: {
           name: 'static/fonts/[name].[hash].[ext]',
           limit: 10000
        }
    }
},

И переместил это в мой webpack.dev.js файл. Потому что мой dev env работал отлично. Затем в моем webpack.prod.js я скопировал настройки и добавил outputPath и publicPath к своему url-loader, и теперь это выглядит следующим образом: 

{
    test: /\.(ttf|eot|woff2?|otf)$/,
    use: {
         loader: 'url-loader',
         options: {
             name: '[name].[hash].[ext]',
             outputPath: 'static/fonts',
             publicPath: './../fonts',
             limit: 10000
         }
     }
 },

, поэтому я говорю сборке поставитьфайлы в каталог ./dist/static/fonts, а publicPath устанавливается на одну папку вверх от того места, где он в данный момент просматривается, затем перейдите в fronts

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...