Webpack: extrahieren css zu einem eigenen Bundle

Question

Ich verwende Webpack für ein Projekt. Ich benutze Style-Loader, also kann ich import "my.css".

Die CSS wird mit dem Javascript gebündelt und wird in einem <style>-Tag gerendert, wenn die Komponente mount, ok.

Allerdings möchte ich diese Importsyntax behalten und webpack ein CSS-Bündel für jeden Einstiegspunkt bauen lassen.

So sollte Webpack-Ausgabe [name].bundle.js UND [name].bundle.css sein. Ist das etwas, was ich erreichen kann?

var config = { 
    entry: { 
    'admin': APP_DIR + '/admin.entry.jsx', 
    'public': APP_DIR + '/public.entry.jsx' 
    }, 
    output: { 
    path: BUILD_DIR, 
    filename: '[name].bundle.js' 
    }, 
    resolve: { 
    extensions: ['.js', '.jsx', '.json'] 
    }, 
    plugins: [], 
    devtool: 'cheap-source-map', 
    module: { 
    loaders: [{ 
     test: /(\/index)?\.jsx?/, 
     include: APP_DIR, 
     loader: 'babel-loader' 
     }, 
     { 
     test: /\.scss$/, 
     loaders: [ 
      'style-loader', 
      'css-loader', 
      'sass-loader', 
      { 
      loader: 'sass-resources-loader', 
      options: { 
       resources: ['./src/styles/constants.scss'] 
      }, 
      } 
     ] 
     } 
    ], 
    } 
}; 

zusammen mit diesem babel.rc:

{ 
    "presets" : ["es2015", "react"], 
    "plugins": ["transform-decorators-legacy", "babel-plugin-root-import"] 
} 

Answer 1

Ja, Sie brauchen extract-text-webpack-plugin zu verwenden. Möglicherweise möchten Sie dies nur in Ihrer Produktionskonfiguration tun. Config sieht wie folgt aus:

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    module: { 
    rules: [ 
     { 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      //resolve-url-loader may be chained before sass-loader if necessary 
      use: ['css-loader', 'sass-loader'] 
     }) 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin('style.css') 
    //if you want to pass in options, you can do so: 
    //new ExtractTextPlugin({ 
    // filename: 'style.css' 
    //}) 
    ] 
}