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-plugins ディレクトリが存在しなければならないため、そこに.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() 
     } 
    } 
]); 

SASSのルールは次のようになります。

プラグイン ifNotProd(new CreateFilePlugin({files: ["css/site.css"]}))と ifProd(extractSass)

に追加

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