cssファイルをハッシュ化して追加するwebpack

Question

私はAngular 2プロジェクトにwebpackを使用しています。 srcフォルダの中には、グローバルcss folderとコンポーネントと他のフォルダがあります。

私のwebpack.config.jsは、srcフォルダの外にあります。

私はdistのフォルダへのcssフォルダをコピーするCopyWebpackPluginを使用しています：

new CopyWebpackPlugin([ 
     { from: 'src/css', to: 'css'} 
    ]), 

私は、CSSのためにも、次のローダーを使用しています：

exports.css = { 
    test: /\.css$/, 
    loader: 'to-string!css?-minimize!postcss', 

}; 

をしかし、契約は、私がしたいということです各cssファイル名にハッシュを追加し、index.htmlに含まれるグローバルファイルであるため、index.htmlのcssファイル名を変更します。これを達成する最良の方法は何ですか？

EDIT：コードを変更しているうちに、ローダープロパティはコンポーネントフォルダ内のcssにのみ適用され、外側のフォルダには適用されません。どうしてこれなの？

Answer 1

https://github.com/webpack/extract-text-webpack-pluginを使用してください。 webpack.config.js

config.plugins.push(
    new ExtractTextPlugin({filename: 'css/[name].[hash].css'}) 
); 
... 
config.module = { 
    rules: [ 
     { 
      test: /\.css$/, 
      exclude: root('src', 'app'), 
      loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css', 'postcss']}) 
     } 
    ] 
} 

Answer 2

で

の例では、アプリケーションのソースのCopyWebpackPluginを使用しないでください。これにより、Webpackのローダーがバイパスされ、Webpackのすべての機能がロックされます。

スタイルシートが必要な場合は、単にES6インポート、require、require.ensureまたはSystem.importを使用してください。ミハウ（Michał）が示唆しているように、適切な場合には、生産中にExtractTextPluginを使用することをお勧めします。