配置webpack以在单独的子文件夹中输出图像/字体

Question

我管理configure webpack将CSS和JS输出到各自的子目录,即public/asests/css和public/assets/js.但是,我不知道如何对图像和字体做同样的事情.

换句话说,我想将public/assets/images文件夹和字体中的图像输出到public/assets/fonts文件夹中.

这是我的webpack配置文件:

var path = require('path');
var ExtractCSS = require('extract-text-webpack-plugin');

module.exports = {
    context: path.resolve('private/js'),
    resolve: ['', '.js', '.jsx', '.es6', '.json'],
    entry: {
        homepage: './homepage'
    },
    output: {
        path: path.resolve('public/assets'),
        publicPath: '/public/assets/',
        filename: 'js/[name].js'
    },
    plugins: [
        new ExtractCSS('css/[name].css')
    ],
    devServer: {
        contentBase: 'public'
    },
    module: {
        loaders: [
            {
                test: /\.(es6|js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                loader: ExtractCSS.extract('style-loader', 'css-loader')
            },
            {
                test: /\.less$/,
                exclude: /node_modules/,
                loader: ExtractCSS.extract('style-loader', 'css-loader!less-loader')
            },
            {
                test: /\.(jpg|jpeg|gif|png|woff|woff2|eot|ttf|svg)$/,
                exclude: /node_modules/,
                loader: 'url-loader?limit=1024'
            }
        ]
    }
}

Answer 1

我可以通过在GitHub上引用url-loader和file-loader文档来解决这个问题.

所有,我需要做的是在loader中添加一个名称 query-string参数来指定完整路径.我还了解到,您可以指定如何在输出位置命名文件.

{
    test: /\.(jpg|jpeg|gif|png)$/,
    exclude: /node_modules/,
    loader:'url-loader?limit=1024&name=images/[name].[ext]'
},
{
    test: /\.(woff|woff2|eot|ttf|svg)$/,
    exclude: /node_modules/,
    loader: 'url-loader?limit=1024&name=fonts/[name].[ext]'
}

Answer 2

{ 
    test: /\.(ttf|eot|svg|woff2?)(\?v=[a-z0-9=\.]+)?$/i,
    include: folders.npm,
    loader: 'file?name=fonts/[name].[ext]'
},
{
    test: /\.(jpe?g|png|gif|svg|ico)$/i,
    include: folders.src,
    loaders: [
        'file?name=images/[sha512:hash:base64:7].[ext]',
        'image-webpack?progressive=true&optimizationLevel=7&interlaced=true'
    ]
}

这就是我在制作中使用的.我经常遇到使用*.svg图片和IE回退的SVG字体的情况.这里我假设font总是在node_modules中.我也见过开发者 test: /fonts\/[w+].(svg|eot ....).

Answer 3

Webpack 5案例-

将其保留在这里以防万一有人正在寻找 Webpack 5 解决方案来满足将图像/字体资产输出到输出路径中的单独目录的要求。

Webpack 5用 Assets 模块替换了raw-loader,url-loader和file-loader并且它有 4 个新模块来处理资产。在此处阅读更多详细信息 - https://webpack.js.org/guides/asset-modules/

对于我们的问题陈述，以下配置将所有 fonts/svgs 输出到目录fonts. 但是如果某些文件小于 8KB，它会将它们内联。

  {
    test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
    type: 'asset',   // <-- Assets module - asset
    parser: {
      dataUrlCondition: {
        maxSize: 8 * 1024 // 8kb
      }
    },
    generator: {  //If emitting file, the file path is
      filename: 'fonts/[hash][ext][query]'
    }
  }

同样，我们可以对图像做同样的事情——

  {
    test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
    type: 'asset/resource',  //<-- Assets module - asset/resource
    generator: {
      filename: 'images/[hash][ext][query]'
    }
  }

images无论文件大小如何，都将所有图像输出到目录。

Answer 4

我能够使用文件加载器解决这个问题 如果您使用的是 Webpack 4，您将使用use而不是loader.

{
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: ['file-loader?name=fonts/[name].[ext]']
}