Webpack字体在构建时出现在错误的目录中

问题描述 投票：0回答：1

我有一个webpack项目，在开发过程中一切正常，但是在构建应用程序时，网站在我的字体文件的文件夹中查找错误。我有一个.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");
}
webpack sass config
1个回答
0
投票

对。。所以我不知道出了什么问题-但这解决了我的问题（它是丑陋的自动对焦，但有效）

编译后的浏览器正在./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文件中。因为我的开发环境工作完美。然后在我的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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.