Как создать каталог изображений и подкаталог с помощью webpack.

Question

Я использую Nodejs для разработки веб-приложений и 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); 

когда я скомпилирую этот код используякоманда из пут:

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/' 
}