Webpack에서 추출한 CSS 파일을 복제하고 변환하는 간단한 방법은 무엇입니까?

Question

CSS 로더를 사용하여 dist 폴더에 .css 파일을 만들면이 파일을 새 파일 이름에 복사하고 변환을 어떻게 적용할까요?

webpack.config.plugins : 타이밍 문제 또는 나는 아주 플러그인이 작동하는 방식에 대해 아직하지 않는 뭔가 하나가이 같은

new ExtractTextPlugin('../dist/[name].css'), 
new CopyWebpackPlugin([ // doesn't work, but this is what I want to accomplish 
    { 
    from: path.resolve('./dist/[name].css'), 
    to: path.resolve('./dist/[name].transformed.css'), 
    transform: css => transformed(css) 
    } 
]), 

이 보인다.

Answer 1

플러그인은 여러 가지 방법으로 실행됩니다. 그러나 가장 간단한 방법은 Webpack 플러그인이 React의 라이프 사이클 메소드와 비슷한 순서로 실행되는 동기 방식입니다. 따라서 특정 순서로 호출되는 몇 가지 표준 메소드가 있습니다.

Webpack Plugin API을 참조하십시오.

webpack dev 서버를 실행중인 경우 파일이 메모리의 모든 파일을 유지 관리하므로 지정한 대상에 파일이 복사되지 않습니다.

CopyWebpackPlugin은 구현 방법과 함께 작동해야합니다. 원본 및 대상 경로를 확인하기 만하면됩니다. 위의 경로와 약간의 차이가 있습니다.

new ExtractTextPlugin('../dist/[name].css'), 
new CopyWebpackPlugin([ // doesn't work, but this is what I want to accomplish 
    { 
    from: path.resolve('./dist/[name].css'), // maybe this should be ../dist/[name].css 
    to: path.resolve('./dist/[name].transformed.css'), // ../dist/[name].transformed.css 
    transform: css => transformed(css) 
    } 
]),