配置 webpack 在单独的子文件夹中输出 images/fonts

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 & file-loader 关于 GitHub 的文档来解决这个问题。

所有，我需要做的就是在加载器中添加一个name查询字符串参数来指定完整路径。我还了解到您可以指定文件在输出位置的命名方式。

{
    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 字体的情况。这里我假设字体总是在 node_modules 内。我还看到开发人员在做 test: /fonts\/[w+].(svg|eot ....).

Answer 3

我用 file-loader 解决了这个问题如果你使用的是 Webpack 4，你会使用 use 而不是 loader.

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

Answer 4

配置file/url-loader输出路径&文件名

你可以在official file-loader documentation中看到：配置对象中有一个name参数，可以指定一个路径。

这样就可以了：

                         // ...
        {
            test    : /\.(woff|woff2|ttf|eot)$/,
            loader  : 'url-loader',
            options: {
                limit : 70000,
                name: 'fonts/[name].[ext]'
            }
        },
                         // ...

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

加载器通常有一个可用的配置对象，即使您可以像其他开发者建议的那样传递选项 ( loader:'url-loader?limit=1024&name=images/[name].[ext]') 我更喜欢使用普通的对象配置，以获得更具可读性的东西，也更容易 configure/debug

输出路径

有一个 outputPath（可选）配置参数，以防万一想要覆盖默认输出路径，无论如何都必须配置它 (check the docs)。我很确定它的加载程序的 webpack 将使用默认输出目录。在我的项目中，我得到了这个：

                         // ...
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'
},
                         // ...

备注

我不确定您是否需要排除 node_modules 文件夹：如果使用了像 font-awesome 或 material-icons 这样的库，那么您需要 node_modules被包括。 Webpack 会自动删除对项目构建没有用的文件 & 运行。我只会排除包含不使用导入和类似内容的旧遗留脚本的文件夹，并且在任何情况下我都不想被 webpack 考虑。

Answer 5

Webpack 5案例-

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

Webpack 5 用资产模块替换了 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 目录，而不考虑文件大小。

配置 webpack 在单独的子文件夹中输出 images/fonts

Configure webpack to output images/fonts in a separate subfolders

webpack