Webpack에 ExtractTextPlugin을 사용하면 어떻게 css를 추출하고 플래그가있는 빈 파일을 만드나요?

Question

기본적으로 프로덕션 환경에서 CSS를 추출하려고하지만 개발 모드에서 JavaScript 파일에 그대로두고 싶습니다.

이것은 소스 파일이 사용 된 sass 파일을 보여주기 위해 사용할 수 있습니다.

내가 가질 수 있도록하려면 :

<link href="~/dist/css/site.css" rel="stylesheet" /> 
<script type="text/javascript" src="~/dist/js/manifest.js"></script> 
<script type="text/javascript" src="~/dist/js/css.js"></script> 

문서는 지상에 조금 얇다.

dev 모드에서 site.css은 비어 있으며 존재하지 않는 것처럼 오류가 발생하지 않습니다. css.js은 스타일 및 소스 매핑에 사용됩니다.

생산 모드에서 css.js은 존재하지만 CSS가 추출되기 때문에 아무 것도하지 않습니다. 즉, CSS는 멋지고 신속하게로드되어 site.css으로 축소되지만 매핑은 없습니다.

Answer 1

내가 무엇을 했는가 : 설치되어 있고 필요 webpack-create-file-plugin 디렉토리가 존재해야하기 때문에 .empty 파일이있는 css 디렉토리가 생성되었습니다.

const extractSass = new ExtractTextPlugin("css/site.css"); 
const sassOptions = removeEmpty([ 
    ifNotProd({ 
     loader: "style-loader" 
    }), 
    { 
     loader: "css-loader", 
     options: { 
      sourceMap: ifNotProd() 
     } 
    }, { 
     loader: "sass-loader", 
     options: { 
      outputStyle: ifProd("compressed", "expanded"), 
      sourceMap: ifNotProd() 
     } 
    } 
]); 

말대꾸 규칙은 다음과 같습니다 :

이

내가이 일을 어떻게 일반적으로

{ 
    test: /\.scss$/, 
    use: ifProd(extractSass.extract({ 
     use: sassOptions, 
     fallback: "style-loader" 
    }), sassOptions) 
} 

는 플러그인 ifNotProd(new CreateFilePlugin({files: ["css/site.css"]})) 및 ifProd(extractSass)

추가