We Keep Coding

Use latest terser-webpack-plugin with Webpack5

According to this link (Terser documentation) if you are using latest Webpack 5, you don't need to install the Terser plugin as it is included in Webpack 5 out of the box. However, I am having a hard time to get this working.
If I remove the terser-webpack-plugin from my packages.json file and I try to use it like this (see below webpack.production.js), I get build errors like this:
[webpack-cli] Failed to load 'D:\Project\React\MyApp\config\webpack.production.js' config
[webpack-cli] Error: Cannot find module 'terser-webpack-plugin'
webpack.production.js
const TerserPlugin = require('terser-webpack-plugin');
const webpack = require('webpack');
const { merge } = require('webpack-merge');
module.exports = merge(commonCfg, {
......
optimization: {
minimize: true,
minimizer: [new TerserPlugin({
cache: false,
parallel: false,
sourceMap: true,
})]
},
Now, if I include the latest terser-webpack-plugin version (5.1.1) on my package.json and run my build, I get the following error message:
[webpack-cli] Failed to load 'D:\Project\React\MyApp\config\webpack.production.js' config
[webpack-cli] Invalid options object. Terser Plugin has been
initialized using an options object that does not match the API
schema.
options has an unknown property 'sourceMap'. These properties are valid: object { test?, include?, exclude?, terserOptions?,
extractComments?, parallel?, minify? }
The only way I can make this work is keeping terser-webpack-plugin on version 4.2.X.
Is there a way I can make this work with latest Terser version? Or maybe I misunderstood the documentation?

Hi here is how i resolved the Terserof Webpack 5
Before Webpack 5:
minimizer: [
new TerserPlugin({
terserOptions: {
mangle: {
compress: {},
},
}
})
]
After Webpack 5:
minimizer: [
(compiler) => {
const TerserPlugin = require('terser-webpack-plugin');
new TerserPlugin({
terserOptions: {
compress: {},
}
}).apply(compiler);
},
]
you can read more about it here https://webpack.js.org/configuration/optimization/
and to check the terser option check this url
https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
here is link to my article with more migration error problem solved
https://medium.com/#arianpopalyar/webpack-4-to-webpack-5-migration-9bc683d2bc72

I have tried the below configuration with webpack version 5.25.0, no need install terser-webpack-plugin and it's worked for me.
optimization: {
minimizer: [(compiler) => {
return () => {
return {
terserOptions: {
mangle: {
reserved: ['Td', 'Tr', 'Th', 'Thead']
}
}
}
}
}]
}

Task not found error while using Grunt task runner

I am on a Windows machine and I believe I have installed everything I need to run the grunt task:
grunt sass
I have already executed the following commands in my terminal:
npm install grunt-sass --save-dev
npm install time-grunt --save-dev
npm install jit-grunt --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-browser-sync --save-dev
I am getting the following error:
Warning: Task "sass" not found. Use --force to continue.
Aborted due to warnings.
I have tried every possible solution from other similar posts but to no avail. My Gruntfile.js is as follows:
"use strict";
module.exports = function (grunt) {
require("time-grunt")(grunt);
require("jit-grunt");
grunt.initConfig({
sass: {
dist: {
files: {
"css/styles.css": "css/styles.scss"
}
}
},
watch: {
files: "css/*.scss",
tasks: ["sass"]
},
browserSync: {
dev: {
bsFiles: {
src: [
"css/*.css",
"*.html",
"js/*.js"
]
},
options: {
watchTask: true,
server: {
baseDir: "./"
}
}
}
}
});
grunt.registerTask("css", ["sass"]);
grunt.registerTask("default", ["browserSync", "watch"]);
};

I have managed to find the solution. Make the following changes to the file:
"use strict";
module.exports = function (grunt) {
const sass = require('node-sass'); // add this line
require("time-grunt")(grunt);
require("jit-grunt")(grunt);
grunt.initConfig({
sass: {
dist: {
files: {
"css/styles.css": "css/styles.scss"
}
}
},
watch: {
files: "css/*.scss",
tasks: ["sass"]
},
browserSync: {
dev: {
bsFiles: {
src: [
"css/*.css",
"*.html",
"js/*.js"
]
},
options: {
implementation: sass, //add this line
sourceMap: true, //add this line
watchTask: true,
server: {
baseDir: "./"
}
}
}
}
});
grunt.registerTask("css", ["sass"]);
grunt.registerTask("default", ["browserSync", "watch"]);
};

Why does Gulp-Bundle task complain about wrong configuration with Gulp v4?

How is it possible..?
I tried to create a bundle task with the package called gulp-bundle-assets but it doesn't work. This is the sample-config from the documentation with my files which I wanna bundle...
If I try gulp bundle the console says:
Configuration file should be in the form "{ bundle: {}, copy: {} }"
// bundle.config.js
module.exports = {
bundle: {
main: {
styles: './content/**/*.css',
},
vendor: {
scripts: [
'./node_modules/jquery/dist/jquery.js',
'./node_modules/instafeed.js/instafeed.js',
'./node_modules/slick-carousel/slick/slick.js',
],
},
},
copy: './assets/**/*.{png,svg}',
};
My gulp task looks like:
// gulpfile.js
gulp.task('bundle', function() {
return gulp.src('./bundle.config.js')
.pipe(bundle())
.pipe(gulp.dest('./public'));
});
My versions:
npm v6.4.0
node v10.6.0
gulp v4.0.0
gulp-bundle-assets v2.29.0

How do i prevent a .js file being bundled by webpack

Hi I am currently using webpack to bundle my project files into a single file. However, I do not want webpack to bundle my config.js file where all my config is set. I would like to this remain separate in the output folder but not sure out to achieve this.
my current setup is
//index.js file
#!/usr/bin/env node
'use strict';
let config = require('config.js);
let read = require('read.js);
console.log('i am running through command line');
//read.js file
'use strict'
console.log('read a text file');
//config.js
'use strict';
module.exports = {
name: 'test'
}
//webpack.config.js
let webpack = require('webpack');
let path = require('path');
let fs = require('fs');
let nodeModules = {};
fs.readdirSync('node_modules')
.filter(function (x) {
return [ '.bin' ].indexOf(x) === -1;
})
.forEach(function (mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
module.exports = {
entry: [ 'babel-polyfill', './index.js' ],
target: 'node',
node: {
__dirname: true
},
output: {
path: path.join(__dirname, 'webpack_bundle'),
filename: '[name].js',
libraryTarget: 'commonjs'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'shebang-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: [ 'es2015' ]
}
} ]
},
resolve: {
extensions: [ '.js' ]
},
plugins: [
new webpack.BannerPlugin({banner: '#!/usr/bin/env node', raw: true
})
]
,
externals: nodeModules
};
Note: I have significantly simplified the code example for brevity
Currently when i run the webpack command i get a folder webpack_bundle which contains an index.js file - the index.js file includes the dependencies config.js and read.js. However, what i would like is for the read.js dependency to be bundled into the index.js file but the config.js dependency to stay external in a separate file which gets required by the bundled webpack output. So the folder webpack_bundle should contain two files after running the webpack command - index.js and config.js. I have already tried to modify the externals by adding the following key value to the externals object config: './config.js' but this did not work. I also created an extra entrypoint by specifying config.js as the entrypoint but this also did not work. I can't figure this out and the webpack docs are not that clear on how to achieve this. Please help!

If you want your config in a separate bundle, you can create a split point, by importing dynamically your config.js file with require.ensure:
require.ensure([], function() {
let config = require('./config.js');
});
Your config will then be in a separate bundle.
Documentation about Code splitting (warning: Webpack 1.x is deprecated).
Documentation about Code Splitting (Webpack 2).
Edit:
If you don't want your config file to be bundled by Webpack, I think you can use IgnorePlugin:
module.exports = {
//...
plugins: [new webpack.IgnorePlugin(/^\.\/config\.js$/)]
}
And use copy-webpack-plugin to copy your config.js file.

gulp-sass and gulp-watch, cant find file when saving scss

I am currently setting up my gulpfile and im having a problem with gulp-sass when the watch task is running the scss task.
This is how my gulpfile.js looks:
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps');
var onError = function(err) {
console.log(err);
};
var bases = {
dist: './dist/',
src: './src/'
};
var paths = {
sass: [bases.src + 'scss/base.scss'],
sourcemaps: '/'
};
gulp.task('scss', function(){
return gulp.src(paths.sass)
.pipe(plumber({
errorHandler: onError
}))
.pipe(sourcemaps.init())
.pipe(sass({
sourcemap: true,
style: 'expanded',
sourceComments: 'normal',
onError: onError
}))
.pipe(sourcemaps.write(paths.sourcemaps))
.pipe(gulp.dest(bases.dist + 'css/'))
});
gulp.task('watch', function(){
gulp.watch(bases.src + 'scss/**/*.scss', ['scss'])
});
gulp.task('default', ['scss','watch']);
base.scss only contains this:
(also tried full path and without fileext. same result)
#import 'modules/modules_base.scss';
The error i'm getting in console:
[18:54:13] Finished 'scss' after 12 ms
[18:54:15] Starting 'scss'...
{ [Error: src\scss\base.scss
1:9 file to import not found or unreadable: ./src/scss/modules/modules_base.scss
Current dir: ]
message: 'src\\scss\\base.scss\n 1:9 file to import not found or unreadable: ./src/scss/modules/modules_base.scss\nCurrent dir: ',
column: 9,
line: 1,
file: 'stdin',
status: 1,
messageFormatted: '\u001b[4msrc\\scss\\base.scss\u001b[24m\n\u001b[90m 1:9\u001b[39m file to import not found or unreadable: ./src/scss/modules/modules_base.scss\nCurrent dir: ',
name: 'Error',
stack: 'Error: src\\scss\\base.scss\n 1:9 file to import not found or unreadable: ./src/scss/modules/modules_base.scss\nCurrent dir: \n at options.error (c:\\Code\\colorpicker\\node_modules\\gu
lp-sass\\node_modules\\node-sass\\lib\\index.js:276:32)',
showStack: false,
showProperties: true,
plugin: 'gulp-sass' }
The basic error is: 1:9 File to import not found or unreadable: ./src/scss/modules/modules_base.scss
the structure of the app:
-component
gulpfile.js
-dist
-css
base.css
base.css.map
-src
-scss
base.scss
-modules
-modules_base.scss
The error only happens when i save the modules_base.scss and the watch task is fired, and never when im running the default task.
all suggestions are appreciated!
Notes:
Node -v : 0.12.0
Gulp: 3.8.11
gulp-sass: 2.0.1

Are you using vscode? I found this on github
gulp.task('sass', function () {
return gulp.src(SCSS_SRC)
.pipe(wait(500))
.pipe(sass({
outputStyle: 'compressed',
includePaths: ['./bower_components/susy/sass', './bower_components/breakpoint-sass/stylesheets']
}).on('error', sass.logError))
.pipe(concat('style.css'))
.pipe(autoprefixer({
browsers: ['>1%', 'last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('./dist/css'));
});
Basically
I was having this issue when saving in sublime. The first time the
file changed, gulp watch would fire before the file either completed
saving, or was unreadable when lib-sass started. I added a 50ms delay
to the pipe which seems to work.
Have you tried this?
edit - I use run-sequence to ensure processes finish before running things that require them. Check it out
gulp.task('default',function(callback){
runSequence('clean-folder','css','js'['responsive-jpg','responsive-webp','copy-data']),callback
});
Basically clean-folder runs and deletes stuff I want a redo on, then css compiles. Nothing after will run until run-sequence gets the callback that all of the scss has been transpiled.