webpackファイルローダー画像を別のディレクトリに移動

Question

私は2つの異なる画像フォルダを持っています。

- のsrc /資産/ IMG/img1.png
- のsrc /コンテンツ/メディア/ img2.png

distディレクトリ出力この：
- DIST/img1.png
- DIST/IMG2 .pngの

が、このようにする必要があります：
-/img1.png
DIST /資産/ IMG - img2.png DIST /コンテンツ/メディア/

動作するため変更する必要があるのは何ですか？

{ 
test: /\.(jpg|png|svg)$/, 
      use: [ 
       { 
        loader: 'file-loader', 
        options: { 
         name: '[name].[ext]', 
         outputPath: 'content/media/', 
        }, 
       } 
      ] 
     }, 

Answer 1

outputPathを文字列として指定すると、すべてのエントリファイルのデフォルトになります。代わりに、異なるエントリに対して異なるパス/ファイル名を返すように記述して機能させることができます。

もう1つ注意すべき点は、各エントリのパスに基づいて異なる出力が必要なため、name属性を[path] [name]。[ext]に設定することです。このようにして、outputPath関数でファイル名を取得すると、どのディレクトリに出力するかが分かります。

以下は例です：

use: [ 
     { 
     loader: "file-loader", 
     options: { 
      name: '[path][name].[ext]', 
      outputPath: (file) => { 
       let path = file.split("src/")[1]; //this will yield assets/img/img1.png  
       return path 
      } 
     } 
     } 
    ] 

Answer 2

おかげで、

が、今私はSASS/CSSファイルに問題がある：
ターゲットである：
のsrc /コンポーネント/ SCSS => DIST/components/css
dosntの作業が完了した後、ファイルローダーの回答が返されます。ここ

webpack.common.jsでの私のコード：

const extractPlugin = new ExtractTextPlugin({ 
filename: 'ccf_[hash:12].css', 
}); 

module.exports = { 
... ... 
module: { 
    rules: [ 
     { 
      test: /\.scss$/, 
      use: ExtractTextPlugin.extract({ 
       use: [ 
        { loader: 'css-loader' }, 
        { loader: 'sass-loader' }, 
       ], 
      }) 
     }, 
... ... 
plugins: [ 
    extractPlugin 
]