webpack with uglify combined with sass loaders give an error, otherwise works fine

Question

I have a webpack config that compiles all my es2015 without a problem. it's uglified, etc.

Here is the config:

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const nodeEnv = process.env.NODE_ENV || 'production';

module.exports = {
    devtool: 'source-map',
    entry: {
      filename: './src/index.js'
    },
    // entry: ['./src/index.js', './src/scss/main.scss'],
    output: {
        filename: './app/index.min.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: [
                    ['es2015', { 'modules': false }]
                ]
            }
        }]//,
        // rules: [{
        //     test: /\.css$/,
        //     use: ExtractTextPlugin.extract({
        //         use: 'css-loader?importLoaders=1',
        //     }),
        // }, {
        //     test: /\.scss$/,
        //     use: ExtractTextPlugin.extract({
        //         fallback: 'style-loader',
        //         use: ['css-loader', 'sass-loader'],
        //         publicPath: '/app'
        //     })
        // }]
    },
    plugins: [
        new webpack.DefinePlugin({
            'proccess.env': { NODE_ENV: JSON.stringify(nodeEnv) }
        }),
        // new ExtractTextPlugin({
        //     filename: './app/main.css',
        //     disable: false,
        //     allChunks: true
        // }),
        new webpack.optimize.UglifyJsPlugin({
            compress: { warnings: false },
            output: { comments: false },
            sourceMap: true
        })
    ]
}

but when i uncomment the plugins and loaders and replace the entry files , I get an error from uglifyjs:

ERROR in ./app/index.min.js from UglifyJs
Invalid assignment [./src/js/modules/requests.js:19,0][./app/index.min.js:2083,38]

Which is correct, it doesn't know what to do with an => function. But why does the extra loaders mess up the order of the loaders (assuming now that this is the problem)? Always open for better ways to fix this problem or perhaps a good examples (couldn't find myself)

Answer 1

You're using both module.rules and module.loaders. When webpack sees module.rules it ignores module.loaders completely, which means that your .js rule does not exist and therefore you don't transpile your JavaScript at all. module.loaders only exists for compatibility reasons and you should only use module.rules.

module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
            presets: [
                ['es2015', { 'modules': false }]
            ]
        }
    }, {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
            use: 'css-loader?importLoaders=1',
        })
    }, {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader', 'sass-loader'],
            publicPath: '/app'
        })
    }]
}