webpackで画像ディレクトリとサブディレクトリを作成する方法。

Question

bundler.Myコードはここにあると私は、Webアプリケーションの開発とWebPACKのためNodejsを使用しています：

ディレクトリ構造は次のとおりです。

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); 

012を使用してこのコードをコンパイルすると

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