다른 디렉토리에 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를 문자열로 지정하면 모든 항목 파일에 대한 기본값으로 설정됩니다. 대신 다른 항목에 대해 다른 경로/파일 이름을 반환하는 함수를 작성하고 작동 할 수 있습니다.

한 가지 더 고려해야 할 것은 각 항목의 경로에 따라 다른 출력이 필요하므로 name 속성을 [경로] [이름]. [내선]으로 설정해야합니다. 이 방법으로 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

덕분에,

하지만 지금은 내가 말대꾸/CSS 파일에 문제가 있습니다 :
대상은 다음과 같습니다
SRC/구성 요소/SCS들 => DIST를/아래

은 예입니다 구성 요소/CSS
dosnt work, 파일 로더 응답 후. 여기

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 
]