Webpack保存图像位置

问题描述：

我正在关注通过代码导入图像的webpack教程，这使得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图像的目标？

答

我的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保存图像位置

相关推荐