Webpack - How To Bundle/require All Files Of A Folder (subfolder)

I am trying to see if there is a shorter way of running webpack bundles, and also why my loaders do not work. Here is my code: module.exports = { context: path.join(__dirname, 'dis

Solution 1:

Regarding the second part of your question:

can I grab all JS files in the same folder or have a JS file to require them all

You can have one entry file and in there you do:

module.exports = {
    context: path.join(__dirname, 'dist'),
    entry: ['./jQuery.js', './allJsFilesOfFolder.js'],

allJsFilesOfFolder.js:

require.context("../scripts/", true, /\.js$/);

This will bundle all scripts inside scripts and all its subfolders.

You need to install @types/webpack-env to have context at your hand.

Specify false if you want to bundle only the scripts in the scripts folder.

You can do the same with other resources like images, you only have to adapt the regex

Solution 2:

Copy @Legends comment as answer here.

have no experience with vue files, but as I said you can bundle not only js files, but also image files, for example the regex for image files would be: /.(png|ico|svg|jpg|gif)$/.