Wie benutze ich 'extract-text-plugin' in meinem webpack setup

Question

Ich habe versucht den "production mode" in webpack zu verstehen. Von dem, was ich jetzt in Webpack 2 habe, könnt ihr webpack -p laufen lassen, aber das scheint nicht funktionsreich zu sein. Mein Setup ich von Webpack 1 übertragen ist wie so:

var config = { 
context: __dirname + '/app', 
entry: './index.js', 
output: { 
    path: __dirname + '/app', 
    filename: 'bundle.js' 
}, 
plugins: [ 
    new CompressionPlugin({ 
     asset: "[path].gz[query]", 
     algorithm: "gzip", 
     test: /\.js$|\.html$/, 
     threshold: 10240, 
     minRatio: 0.8 
    }), 
    new webpack.ProvidePlugin({ 
     moment: "moment" 
    }), 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }) 
], 
module: { 
    loaders: [ 
     { 
      test: /\.js$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/ 
     }, 
     { 
      test: /\.scss$/, 
      loader: 'style-loader!css-loader!sass-loader', 
      exclude: /node_modules/ 
     }, 
     { 
      test: /\.html$/, 
      loader: 'raw-loader', 
      exclude: /node_modules/ 
     } 
    ] 
} 
}; 

if (process.env.NODE_ENV === 'production') { 
    config.output.path = __dirname + '/dist'; 
    config.plugins.push(new webpack.optimize.UglifyJsPlugin()); 
    config.plugins.push(new ExtractTextPlugin("styles.css")); 
    config.module.loaders({ 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: "style-loader", 
      use: "style-loader!css-loader!sass-loader" 
     }) 
    }) 
} 

module.exports = config; 

Was will ich wirklich so ist die extract-text-plugin im Produktionsmodus zu verwenden, ich habe versucht, die folgenden:

if (process.env.NODE_ENV === 'production') { 
    config.output.path = __dirname + '/dist'; 
    config.plugins.push(new webpack.optimize.UglifyJsPlugin()); 
    config.plugins.push(new ExtractTextPlugin("styles.css")); 
    config.module.loaders({ 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: "style-loader", 
      use: "style-loader!css-loader!sass-loader" 
     }) 
    }) 
} 

Ich bin die folgende Fehlermeldung erhalten:

config.loaders({ 
     ^
TypeError: config.loaders is not a function 

Answer 1

config.module.loaders ist ein Array, so dass Sie nur, wie Sie mit den Plugins haben zu drücken braucht. Aber dann würden Sie mit zwei Ladekonfigurationen für .scss enden, was eindeutig nicht das ist, was Sie wünschen. Stattdessen könnten Sie eine Variable definieren, die Sie in die Config-Pass, etwa so:

// Default SCSS loader 
var scssLoader = 'style-loader!css-loader!sass-loader'; 
if (process.env.NODE_ENV === 'production') { 
    // Overwrite it with the extract-text loader 
    scssLoader = ExtractTextPlugin.extract({ 
    fallback: "style-loader", 
    use: "style-loader!css-loader!sass-loader" 
    }) 
} 

Und dann die .scss Regel in der Config würde:

{ 
    test: /\.scss$/, 
    loader: scssLoader, 
    exclude: /node_modules/ 
},