Webpack Uglify errori nei CSS

Question

Sono stressato nel cercare di far funzionare Uglify con il mio progetto, in precedenza ho usato Uglify e non davo problemi ma ora penso che sia collegato a SASS.

ERROR in ./~/css-loader!./~/sass-loader!./app/scss/global-header.scss 
    Module build failed: TypeError: Cannot read property '4' of undefined 
     at reduce (/Users/contractor/centralefcom-global-components/node_modules/postcss-reduce-transforms/dist/index.js:121:23) 
     at walk (/Users/contractor/centralefcom-global-components/node_modules/postcss-value-parser/lib/walk.js:7:22) 
     at ValueParser.walk (/Users/contractor/centralefcom-global-components/node_modules/postcss-value-parser/lib/index.js:18:5) 
     at /Users/contractor/centralefcom-global-components/node_modules/postcss-reduce-transforms/dist/index.js:131:75 
     at /Users/contractor/centralefcom-global-components/node_modules/postcss/lib/container.js:92:28 
     at /Users/contractor/centralefcom-global-components/node_modules/postcss/lib/container.js:73:26 
... 
... 

Questo errore viene ripetuto molte volte, una per ciascun pacchetto multiplo.

Questa è la mia configurazione del pacchetto web.

var webpack = require('webpack') 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var path = require('path'); 

module.exports = { 
    context: __dirname, 
    resolve: { 
    modulesDirectories: ['node_modules', 'bower_components'] 
    }, 
    entry: { 
    'all': [ 
     './app/global-all.js', 
     './app/scss/global-all.scss' 
    ], 
    'footer': [ 
     './app/global-footer.js', 
     './app/scss/global-footer.scss' 
    ], 
    'header': [ 
     './app/global-header.js', 
     './app/scss/global-header.scss' 
    ], 
    'footer.nodeps': [ 
     './app/global-footer-nodeps.js', 
     './app/scss/global-footer-nodeps.scss' 
    ], 
    'header.nodeps': [ 
     './app/global-header-nodeps.js', 
     './app/scss/global-header-nodeps.scss' 
    ], 
    }, 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'js/global.[name].js', 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('style','css!sass!') 
     }, 
     { 
     test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'file?name=/assets/[name].[ext]' 
     }, 
     { 
     test: /\.(jpg|jpeg|png)$/, 
     loader: 'file?name=/assets/[name].[ext]' 
     } 
    ], 
    }, 
    plugins: [ 
    new webpack.EnvironmentPlugin([ 
     'NODE_ENV' 
    ]), 
    new ExtractTextPlugin('css/global.[name].css'), 
    new HtmlWebpackPlugin({ 
     template: 'underscore-template-loader!./app/views/secondary.html', 
     inject: false, 
     filename: 'secondary.html' 
    }), 
     new HtmlWebpackPlugin({ 
     template: 'underscore-template-loader!./app/views/secondary-transparent.html', 
     inject: false, 
     filename: 'secondary-transparent.html' 
    }), 
    new HtmlWebpackPlugin({ 
     template: 'underscore-template-loader!./app/views/secondary-academy.html', 
     inject: false, 
     filename: 'secondary-academy.html' 
    }), 
    new HtmlWebpackPlugin({ 
     template: 'underscore-template-loader!./app/views/hero-stage.html', 
     inject: false, 
     filename: 'hero-stage.html' 
    }), 

    // Only minify in build, check npm tasks 
    new webpack.optimize.UglifyJsPlugin({ 
     sourceMap: false, 
     mangle: false 
    }), 
    ] 
}; 

Se commento la riga uglifyJsPlugin, non ci sono errori. Ma devo fare minification e non c'è modo di farlo funzionare, ho provato mangler: falso e niente, non funziona.

Answer 1

Si sta tentando di passare i file CSS tramite il plugin UglifyJs, che non è supportato.

Per semplificare solo le origini JS, è possibile filtrare in base all'estensione del file.

L'esempio che segue sarebbe Uglify solo i file che hanno avuto un'estensione .js o .jsx:

new webpack.optimize.UglifyJsPlugin({ 
    sourceMap: false, 
    mangle: false, 
    test: /\.(js|jsx)$/ 
}) 

Answer 2

Si sta mettendo i file SCSS come parte del vostro punto di ingresso. Nel webpack, è una pratica più comune richiedere i file necessari (SCSS saggio) all'interno dei file JS.

// Here, the ExtractTextPlugin will use sass-loader to extract and compile styles 
require('styles.scss'); 

// The rest of your code goes here 
// For instance, app.js 
function someCode() { 
    document.body.style.backgroundColor = 'blue'; 
} 

Si installa quindi il sass-loader per rilevare e gestire quelle che richiedono istruzioni che sono state già eseguite con il seguente loader.

{ 
    test: /\.scss$/, 
    loader: ExtractTextPlugin.extract('style','css!sass!') 
}