Webpack 文件加载器复制公共目录答案

【问题标题】：Webpack file-loader duplicating public directoryWebpack 文件加载器复制公共目录
【发布时间】：2018-03-11 03:59:57
【问题描述】：

我正在使用 Webpack 将文件输出到 dist 文件夹中。

目录结构如下： client/public/dist

bundle.js 和 styles.css 位于其中。

我的文件加载器设置是：

{
  loader: 'file-loader',
  test: /\.(png|jpg|gif)$/,
  options: {
    name: '[path][name].[ext]'
  }
}

但是，这样做是把我的图像放在另一个公共目录中，如下所示：

client/public/dist/public/images

我更喜欢这个：

client/public/dist/images

【问题讨论】：

标签： webpack webpack-file-loader

【解决方案1】：

解决了

{
    loader: 'file-loader',
    test: /\.(png|jpg|gif)$/,
    options: {
       name: '/images/[name].[ext]'
    }
}

【讨论】：

虽然您的代码 sn-p 可能会解决问题，但您应该描述您的代码的目的是什么（它如何解决问题）。此外，您可能需要检查stackoverflow.com/help/how-to-answer

【解决方案2】：

@hpjm 的答案仅在您的所有文件都在一个平面目录中时才有效。

要包含子目录支持：

  {
    include: path.resolve(__dirname, 'assets'),
    loader: 'file-loader',
    options: {
      name: '[path][name].[ext]',
      outputPath: './',
      publicPath: '/',
    },
  }

【讨论】：