文件加载器不复制 webp 图像答案

【问题标题】：File loader doesn't copy webp images文件加载器不复制 webp 图像
【发布时间】：2020-07-24 17:08:12
【问题描述】：

当我构建时，我正在使用带有 webpack 的文件加载器，所有图像都被很好地复制，除了 webP 格式

const images = {
  test: /\.(gif|png|jpe?g|svg|webp)$/i,
  exclude: /fonts/,
  use: [
    'file-loader?name=images/[name].[hash].[ext]',
    config.env === 'production' ? imageLoader : null,
  ].filter(Boolean),
};

所有图片都可以正常复制，但 webP 没有复制

【问题讨论】：

标签： webpack

【解决方案1】：

module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif|webp|svg)$/i,
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'assets/images',
      },
    },
  ],
},

对我来说，这段代码正在运行，webp 图像被复制到 dist/ 文件夹。我希望你在 webpack 配置文件中添加这个规则数组。

请参考https://github.com/anandgupta193/react-enterprise-starter-kit，看看这个仓库中完成的webpack配置（webpack/webpack.common.config.js）。

【讨论】：

另外，请确保您在代码库中导入 webp 文件。请记住，file-loader 仅用于让 webpack 理解这些文件类型。如果您希望使用 CopyWebpackPlugin (webpack.js.org/plugins/copy-webpack-plugin)，您还可以为您的资产执行显式复制