Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to load all files in a directory using webpack without require statements

I have a large amount of javascript files split into 4 subdirectory in my app. In grunt I grab all of them and compile them into one file. These files do not have a module.exports function.

I want to use webpack and split it into 4 parts. I don't want to manually go in and require all my files.

I would like to create a plugin that on compilation walks the directory trees, then grabs all the .js file names and paths, then requires all files in the sub directories and adds it to the output.

I want all the files in each directories compiled into a module that I could then require from my entry point file, or include in the assets that http://webpack.github.io/docs/plugins.html mentions.

When adding a new file I just want to drop it in the correct directory and know it will be included.

Is there a way to do this with webpack or a plugin that someone has written to do this?

like image 476
ChickenFur Avatar asked Apr 02 '15 19:04

ChickenFur


People also ask

How do I bundle files with webpack?

You can bundle your JavaScript using the CLI command by providing an entry file and output path. Webpack will automatically resolve all dependencies from import and require and bundle them into a single output together with your app's script.

When using webpack Why do we need loader?

Webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node.

How does webpack file loader work?

Webpack goes through all the import ed and require d files in your project, and for all those files which have a . svg extension, it uses as an input to the webpack file loader. For each of these files, the file loader emits the file in the output directory and resolves the correct URL to be referenced.

What is bundling webpack?

Webpack is an aggressive and powerful module bundler for JavaScript applications. It packages all the modules in your application into one or more bundles (often, just one) and serves it to the browser.


1 Answers

This is what I did to achieve this:

function requireAll(r) { r.keys().forEach(r); } requireAll(require.context('./modules/', true, /\.js$/)); 
like image 176
splintor Avatar answered Sep 20 '22 14:09

splintor