Develop Reference

Webpack leaves JS in cache file when compiling multiple JS libraries

I'm trying to configure Webpack so that it compiles multiple JS files. But when I do this the majority of JS is left in a cache file, the contents of which isn't included in my files.
Generated files:
js
-- theme--01.js (134kb)
-- theme--02.js (134kb)
-- theme--03.js (134kb)
-- theme--04.js (134kb)
-- themevendors-lib_common_scripts_global_libraries_js-lib_common_scripts_global_smoothscroll_min_js--8bace3.js (753kb)
When I generate one file it works correctly:
js
-- theme--01.js (879kb)
How my entry points are configured:
entry: {
"--01": path.resolve(process.cwd(), 'src', 'theme--01.ts'),
"--02": path.resolve(process.cwd(), 'src', 'theme--02.ts'),
"--03": path.resolve(process.cwd(), 'src', 'theme--03.ts'),
"--04": path.resolve(process.cwd(), 'src', 'theme--04.ts'),
},
Here's my complete Webpack config on JSfiddle as StackOverflow won't let me paste the whole thing here: https://jsfiddle.net/charlievaughan/rpeztbLj/
I need to generate multiple files from the same codebase for different locales and to optimise page-load speeds / Lighthouse scores.
Using Webpack v5.62.1

I fixed this issue by removing the following from my Webpack config:
splitChunks: {
chunks: 'all'
}

How to stop purging tailwind components

I am using TailwindCSS and Laravel Mix. I am trying to setup PurgeCSS and I have got it reading my template files (working with WordPress) and purge any CSS not within the template files.
However, as part of Tailwind, I am using #apply in my scss files and those utilities I am applying are also being purged which leaves me with a non functioning site.
My sass files are in css/dev and there is an app.scss and then directories with more files within them (base, utilities, custom, components).
My webpack.mix.js file configuration is as follows:
mix.scripts(['js/dev/app.js', 'js/dev/navigation.js', 'js/dev/skip-link-focus-fix.js'],
'js/build/app.js')
.sass('css/dev/app.scss', 'css/build')
.options({
processCssUrls: false,
postCss: [tailwindcss('./tailwind.config.js')],
})
.purgeCss({
enabled: mix.inProduction(),
// Your custom globs are merged with the default globs. If you need to
// fully replace the globs, use the underlying `paths` option instead.
globs: [
path.join(__dirname, 'template-parts/*.php'),
path.join(__dirname, '*.php'),
path.join(__dirname, 'css/dev/*.scss'),
path.join(__dirname, 'css/dev/**/*.scss'),
],
extensions: ['html', 'js', 'php', 'scss', 'css'],
});
As you can see, I tried setting the paths for purgeCss to look inside the css paths but that has not worked.
Does anyone know how to achieve this?

You are compiling your scss to css before Purge runs, so there should be no need to purge your .scss files only your main.css (or whatever the output is called).
Do your compiled class names actually exist in full in your template files? If they are not a 100% match for the classes in your templates then they will, quite correctly, be purged.

The issue was with WordPress classes not being included in the template files and then being purged. The solution was switching to using UnCSS which allowed me to setup URLS for UnCSS to visit and it won't purge any classes used on those pages. I also included some standard WordPress classes which I found a list of online.
My final config is:
const uncss = require('postcss-uncss');
mix.js('js/dev/app.js', 'js/build/app.js')
.sass('css/dev/app.scss', 'css/build')
.options({
processCssUrls: false,
postCss: [
tailwindcss('./tailwind.config.js'),
...process.env.NODE_ENV === 'production' ? [uncss({
html: [
'./*.php',
'./template-parts/*.php',
'https://www.example.com',
'https://www.example.com/work/',
'https://www.example.com/work/example-project/',
'https://www.example.com/contact/',
'https://www.example.com/blog/',
'https://www.example.com/blog/laravel-php-framework/',
],
ignore: [
'.rtl',
'.home',
'.blog',
'.archive',
'.date',
'.error404',
'.logged-in',
'.admin-bar',
'.no-customize-support',
'.custom-background',
'.wp-custom-logo',
'.alignnone',
'.alignright',
'.alignleft',
'.wp-caption',
'.wp-caption-text',
'.screen-reader-text',
'.comment-list',
'.grecaptcha-badge',
/^search(-.*)?$/,
/^(.*)-template(-.*)?$/,
/^(.*)?-?single(-.*)?$/,
/^postid-(.*)?$/,
/^attachmentid-(.*)?$/,
/^attachment(-.*)?$/,
/^page(-.*)?$/,
/^(post-type-)?archive(-.*)?$/,
/^author(-.*)?$/,
/^category(-.*)?$/,
/^tag(-.*)?$/,
/^tax-(.*)?$/,
/^term-(.*)?$/,
/^(.*)?-?paged(-.*)?$/,
'.animate',
'.animated',
'.bounce',
'.fadeInDown',
'.fadeIn',
'.fadeInUp',
'.jackInTheBox',
]
})] : [],
]
});
I also made use of the UnCSS exclude from purge CSS comments:
/* uncss:ignore start */
my css goes here
/* uncss:ignore end */
I ended up using this on all my custom sass files except for the tailwind files so that the only selectors that are purged are tailwind utilities, which saved me about 300 KB.

Some images loaded through Webpack file-loader are not found

I am working on a project which is bundling a pre-loaded set of stock images with the webapp using Webpack. There are about 400 images, half of which are thumbnails. Instead of writing 400 require statements, I create a new context and load them iteratively.
webpack.config.js
entry: __dirname + '/src/main/webapp/app/main.js',
//...
// there are other loaders but this is the one in question
module: {
loaders: [
{
test: /\.(png|jpg)$/,
loader: "file-loader?name=img/[name].[ext]"
}
]
}
main.js
var stockImageReq = require.context(
'./images/stock',
true,
/\.jpg$/igm
);
stockImageReq.keys().forEach(function( imageName ) {
console.log(imageName);
stockImageReq(imageName);
}
All of the stock images live within the /images/stock directory and are served to /img. The problem is that when webpack finishes bundling up the static assets, it only provides just over half of the images in the directory (the console.log within the loop only prints about 230 filenames). When visiting the images within browser, the ones not listed in the bundle are 404s. There are no errors thrown in the log, so it seems that require is finding all of the images in their proper place.
Does anyone know why some images load just fine, but others are not? All are jpgs, the largest in question is about 5MB, with most around 1MB (for a bundle around 300MB total), and there is nothing different about how they were created (all from the same designer)

Turns out that removing the regex modifiers (igm) solved this. I don't know if it's a limitation of require.context or not, but all 400 of the images are properly loading now.
This is what I ended up with
var stockImageReq = require.context(
'./images/stock',
true,
/^.*\.(png|jpe?g)$/
);
stockImageReq.keys().forEach(stockImageReq);

Dynamically add version number to dest output files w/ grunt

I have a package.json file with our version number, such as:
{
name: "myproject"
version: "2.0"
}
My goal is to dynamically add the version number from the package.json file into the output files. For example, in the javascript I don't want to manually update the version number, but would like something similar to this to be generated after each grunt build:
/* My Project, v2.0 */
window.myProject = {
version: "2.0"
};
Is there an easy way to do this in my Gruntfile.js configuration?

I implemented: https://github.com/erickrdch/grunt-string-replace
In my source css/js files, I use the text {{ VERSION }} which gets replaced with the version number set in the package.json file. Below is the config I added to Gruntfile.js.
'string-replace': {
version: {
files: {
// the files I did string replacement on
},
options: {
replacements: [{
pattern: /{{ VERSION }}/g,
replacement: '<%= pkg.version %>'
}]
}
}
},
pkg: grunt.file.readJSON('package.json'),

I think that what you only want to do is to put some kind of trick for unable the page to use the cache files that maybe the browser have, and by now, the only way for that cross-browser is putting something on the href urls like "app.v2_2.js" or "app.js?ver=22". So I use this grunt npm package:
https://www.npmjs.org/package/grunt-cache-breaker
By default it only adds a parameter to your javascript and in almost the cases is the thing you need for not using cache, but you can configure even if you change the name of the file in other grunt process. This only change the HTML headers to what you desire.
After you install the grunt-cache-breaker, add this to your GruntFile:
// Append a timestamp to 'app.js', 'controllers.min.js' which are both located in 'index.html'
// resulting in the index the call of : href="~/app.js?rel=1415124174159"...
cachebreaker: {
dev: {
options: {
match: ['app.js', 'styles.css']
},
files: {
src: ['dist/index.html']
}
}
},
Then where you load the modules:
grunt.loadNpmTasks('grunt-cache-breaker');
Add on the task you want to:
grunt.registerTask('deploy', [
'clean:app',
'copy:views',
'copy:imgs',
'copy:css',
'uglify:app',
'cssmin:app',
'cachebreaker:dev'
]);
And finally run the grunt action on the console/command prompt
> grunt deploy

I would suggest using the banner feature in grunt-contrib-concat

this can be done as well with the banner option of https://github.com/gruntjs/grunt-contrib-uglify - which takes also care of the minifiaction of the javascript files.

filerev provides this option now. Use process to manipulate the filename that will be otherwise suffixed with md5 hash of the file content. You can use this to insert your version to every file you want.
Ref: https://github.com/yeoman/grunt-filerev

create something like package.json in the root of your project
it should read that or you can do something like
pkg: grunt.file.readJSON('package.json'),
in that you'll have a version declaration which would obviously correspond to <%= pkg.version %> so have that string in your json output and then run grunt.config.process to do the variable replacement
do something similar for the comment header

Optimize png files with grunt-img

I'm trying to do a grunt task to optimize my png project files. I'm using grunt-img plugin and this is my grunt.initConfig:
grunt.initConfig({
img: {
task1: {
src: ['myapp/Skins/**/*.png'],
dest: 'myapp/img-temp'
}
}
});
That should do, process all png files in Skins folders, compress and put them into img-temp folder, right? Right.
First, i had an error because jpegtran isn't installed on my computer (woh, i put *.png why did it needs jpegtran?) but ok, i installed it and try again. And now i have this error:
Running "img:task1" (img) task
Running optipng... app/Skins/skin1/img/navigationBar/background.png, app/Skins/skin1/img/navigationBar/nb_buttons.png, ...
>> 1
** Error: Unrecognized option: -clobber
Anybody knows what does it mean?

I can't find what it means, but i find that grunt-img is deprecated, now we have grunt-contrib-imagemin
It works!