如何用webpack制作图片目录和子目录。

Question

我使用了的NodeJS web应用开发和作为的WebPack代码bundler.My这里：

目录结构：

main.js 
src 
- js 
- styles 
- images 
    -logo.png 
    -clients_logo 
    - client_logo1.png 
    - client_logo2.png 
----------------------------------- 
public (Use for output) 
- js 
- css 
- images 

webpack.config.js

module.exports = { 
    entry: './main.js', 
    output: { path: path.join(__dirname, './public/'), filename: './js/bundle.js' }, 
    module: { 
     loaders: [ 
      { test: /\.(jpg|jpeg|gif|png)$/,loader:'url-loader?limit=1024&name=images/[name].[ext]' } 
     ] 
    } 
}; 

main.js

import './src/images/logo.png'; 
require.context('./src/images/clients_logo/', true); 

当我编译此代码使用webpack --progress --colors命令出看跌期权：

public 
- images 
    - logo.png 
    - client_logo1.png 
    - client_logo2.png 

，但需要进行放是：

public 
- images 
    - logo.png 
    - clients_logo 
    - client_logo1.png 
    - client_logo2.png 

我也用

{ test: /\.(jpg|jpeg|gif|png)$/,loader:'url-loader?limit=1024&name=[path][name].[ext]?[hash]&context=/path' } 

但它出来说就是：

public 
- images 
    - src 
    - images 
    - logo.png 
    - clients_logo 
     - client_logo1.png 
     - client_logo2.png 

所以任何一个理解这个p并提供解决方案，请提供它。谢谢

Answer 1

[path]是源的相对路径，在你的情况下是src/images/logo.png等等其他图像。与context[path]成为相对于该路径。设置context=src/将会将[path]更改为images/logo.png，这正是您想要的。

所以，你可以你的配置更改为：

{ 
    test: /\.(jpg|jpeg|gif|png)$/, 
    loader: 'url-loader?limit=1024&name=[path][name].[ext]&context=src/' 
}