2

This is my webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const nodeExternals = require('webpack-node-externals');

const extract = new ExtractTextPlugin({
    filename: '../css/main.css'
});

module.exports = env => {
    return {
        entry: './src/js/scripts.js',
        output: {
            path: path.resolve(__dirname, 'dist/js'),
            filename: 'bundle.js',
        },
        watch: true,
        watchOptions: {
            poll: true
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                presets: ['env']
                            }
                        }
                    ]
                },
                {
                    test: /\.scss$/,
                    use: extract.extract({
                        use: [
                            {
                                loader: 'css-loader',
                                options: {minimize: env.NODE_ENV === 'prod'}
                            },
                            {
                                loader: 'sass-loader'
                            }
                        ]
                    })
                },
                {
                    test: /\.vue$/,
                    use: ['vue-loader']
                }
            ]
        },
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js'
            }
        },
        plugins: env.NODE_ENV === "dev" ? [
            extract
        ] : [
            extract,
            new UglifyJsPlugin()
        ]
    }
};

This makes my webpack compilation take around 2 seconds for all together less than 10 lines of JS and SCSS code combined. Running it without minimization makes it much faster ( around 20ms ).

I've tried OptimizeCssAssetsPlugin and it's equally slow. If I insert these two lines

target: 'node', // in order to ignore built-in modules like path, fs, etc. 
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folder 

from this answer it works fine again, but the bundle gives this error enter image description here

I wanted to switch to webpack from gulp, for modularity and simplicity but this just makes minification 10 times slower. Gulp minifies over 5000 lines of SCSS code in less than 2 seconds. Any solution?

Thanks!

Filip Petrovic
  • 837
  • 2
  • 11
  • 22

0 Answers0