Verkleinern und Hinzufügen von Hash zu CSS-Dateien webpack

Question

Ich verwende Webpack für mein Angular 2-Projekt. Im src-Ordner habe ich eine globale css folder und Komponente und andere Ordner.

ist mein webpack.config.js außerhalb der src-Ordner.

ich CopyWebpackPlugin bin mit den CSS-Ordner in den dist-Ordner kopieren:

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

ich die folgenden Lader auch mit CSS:

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

}; 

Aber der Deal ist, dass ich will Fügen Sie jedem CSS-Dateinamen einen Hash hinzu und ändern Sie dann den Namen der CSS-Datei in der index.html, da es sich um globale Dateien handelt, die in index.html enthalten sind. Was ist der beste Weg, dies zu erreichen?

EDIT: Während eine Änderung des Codes erkannte ich, dass die Lade Eigenschaft gilt nur für die CSS in den Ordner Komponenten und nicht nach außen Ordner. warum ist das?

Answer 1

Verwendung https://github.com/webpack/extract-text-webpack-plugin.

Beispiel in 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

nicht CopyWebpackPlugin für Anwendungsquellen anwenden. Dadurch werden die Loader von Webpack umgangen und Sie können alle Webpack-Funktionen sperren.

Verwenden Sie einfach ES6-Importe, require, require.ensure oder System.import, um Ihre Stylesheets zu benötigen. Alternativ, wie Michał vorgeschlagen hat, sollte ExtractTextPlugin in der Produktion verwendet werden.