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
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!