Question

我管理配置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

我可以参考url-loader＆amp;关于GitHub的file-loader文档。

所有，我需要做的是在loader中添加 name 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

我能够用file-loader解决此问题如果您使用的是Webpack 4，则应使用motion.x = (1 - (t * t * t)) * last_motion.x而不是use。

loader

Answer 4

Webpack 5 情况-

请保留在此处，以防万一有人在寻找Webpack 5解决方案，以将图像/字体资源输出到单独的目录中，并输出到输出路径中。

Webpack 5用Assets Module替换了raw-loader，url-loader和file-loader，并且有4个新模块来处理资产。在此处详细了解-https://webpack.js.org/guides/asset-modules/

对于我们的问题陈述，以下配置将所有字体/ 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 5

配置文件/ URL加载程序输出路径和文件名

您可以阅读official file-loader documentation：配置对象中有一个xhr.setRequestHeader("Content-Type", "application/json");参数，可以在其中指定路径。

这可以完成工作：

name

我建议您看看available placeholders，以了解文件名中可以使用什么。

即使您可以像建议的其他开发人员那样传递选项，装载程序通常也有可用的配置对象（// ... { test : /\.(woff|woff2|ttf|eot)$/, loader : 'url-loader', options: { limit : 70000, name: 'fonts/[name].[ext]' } }, // ...）我希望使用纯对象配置，以使其更具可读性，并且更易于配置/调试

输出路径

有一个 loader:'url-loader?limit=1024&name=images/[name].[ext]'（可选）配置参数，以防有人想要覆盖默认的输出路径，而在任何情况下都必须对其进行配置（check the docs）。我很确定webpack的加载程序将使用默认的输出目录。在我的项目中，我有这个：

outputPath

注意

我不确定您是否需要排除// ... output: { path: helpers.publicPath(), // local output path: <project-root>/public publicPath, // same path on the server: /myapp/public filename: 'js/[name].bundle.js', // default output configuration for js chunkFilename: 'js/[name].chunk.js' }, // ...文件夹：如果使用了像字体真棒或material-icons这样的库，那么您需要包括node_modules。 Webpack会自动删除对构建和运行项目无用的文件。我只会排除包含旧的旧脚本的文件夹，这些旧脚本不使用导入之类的东西，在任何情况下我都不想被webpack考虑。

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

5 个答案: