Question

我正在关注通过代码导入图像的webpack教程，这使得webpack在分布式项目中包含图像。也许我错过了一些东西，但在我的情况下，所有图像都被转储到根项目目录而不是图像文件夹中。

我发现的唯一答案看起来像这样，但这似乎适用于webpack 1？

test: /\.(png|jpg)$/,
loader: 'file-loader?limit=100000&name=./imgs/[hash].[ext]'

如果我尝试这个webpack配置

const path = require('path');

module.exports = {
  entry: './src/js/app.js',
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader?limit=100000&name=./imgs/[hash].[ext]'
        ]
      }
    ]
  }
};

我收到此错误：

 Can't resolve 'file-loader&name=images/[name].[ext]

如何在webpack中定义图像的目的地？

Answer 1

我的dist文件夹比我的webpack.config.js提升了2个级别。这是我的字体和图像设置。我正在使用Webpack 3.x。

{
  test: /\.(png|svg|jpg|gif)$/,
   use: {
    loader: 'file-loader',
    options: {
      name: 'public/images/[name].[hash].[ext]',
      publicPath: '../../'
    }
  }
},
{
  test: /\.(eot|svg|ttf|woff|woff2)$/,
  use: {
    loader: 'file-loader',
    options: {
      name: 'public/fonts/[name].[hash].[ext]',
      publicPath: '../../'
     }
   }
 }

Webpack保存图像位置

1 个答案: