Webpack 5配合SASS加载器和MiniCSSExtractPlugin无法移动字体文件

Question

Webpack 5配合SASS加载器和MiniCSSExtractPlugin无法移动字体文件

4

我对Webpack 5还比较新手，虽然我的构建几乎可以工作，但我的字体文件没有传输到/dist文件夹中。我在我的main.scss文件中包含了字体（见下文）。

我的当前配置是否有什么遗漏？

文件夹结构

- src
    - assets
        - sass
        - fonts

src/assets/sass/main.scss

@font-face {
    font-family: 'P22MackinacMedium';
    src: url('../fonts/p22-mackinac-medium.eot');
    src: url('../fonts/p22-mackinac-medium.eot?#iefix') format('embedded-opentype'),
             url('../fonts/p22-mackinac-medium.woff2') format('woff2'),
         url('../fonts/p22-mackinac-medium.woff') format('woff'),
         url('../fonts/p22-mackinac-medium.ttf') format('truetype'),
         url('../fonts/p22-mackinac-medium.svg#youworkforthem') format('svg');
    font-weight: normal;
    font-style: normal;
}

webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    plugins: [new MiniCssExtractPlugin(), new HtmlWebpackPlugin({
        template: 'src/index.html'
    })],
    output: {
        filename: '[name]-[contenthash].js',
        chunkFilename: '[name]-[chunkhash].js',
        path: path.resolve(__dirname, 'dist'),
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all',
                },
            },
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    // Creates `style` nodes from JS strings
                    "style-loader",
                    // Translates CSS into CommonJS
                    "css-loader",
                ],
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader, {
                        loader: 'css-loader',
                        options: { url: false }
                    },
                    'sass-loader'
                ],
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
              },
        ],
    },
    devServer: {
        static: './dist',
    },
};

- Miguel Stevens

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lazar Nikolic · Answer 1

据我所见，这应该可以直接使用，就像你写的那样，因为webpack 5正在使用新的资产管理方式。但是，既然对你来说不起作用，你仍然可以尝试使用url-loader。像这样：

  {
    test: /\.(woff|woff2|eot|ttf|otf)$/i,
    use: {
      loader: 'url-loader',
    },
  },

或者在安装URL加载器之前，您可以尝试使用'asset/inline'。