How to Load All Files in a Directory Using Webpack Without Require Statements

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

This is what I did to achieve this:

function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('./modules/', true, /\.js$/));

Best way to have all files in a directory be entry points in webpack?

I think glob is the right way to go here (AFAIK webpack wont do this for you). This is what I ended up with, it will find all files in a directory and create an entry with a name matching the file:

var glob = require('glob');
var path = require('path');

module.exports = {
  entry: glob.sync('../source/js/**.js').reduce(function(obj, el){
     obj[path.parse(el).name] = el;
     return obj
  },{}),
  output: {
    path: path.resolve(__dirname, '../static/js'),
    filename: "[name]"
  },
...

adapt the search path to meet your specific needs. It might also be useful to pass in {cwd: someRoot} as the second argument to sync if you have a special scripts directory which will make this the new root of relative path searches.

webpack require every file in directory

Solution:

var req = require.context("../someDir", true, /^(.*\.(js$))[^.]*$/igm);
req.keys().forEach(function(key){
    req(key);
});
// or just: req.keys().forEach(req)

extra:

regex to match js but ignore test.js

/^(?!.*test.js)((.*\.(js\.*))[^.]*$)/igm)

how to load using webpack import in sub-directories?

In webpack, typescript and esnext, you can loading files in sub directories using require.context, just use lazy option from webpack.

Your typescript code should look like:

const requireApplicationRoutes = (require.context as any)('./', true, /routes.ts$/, 'lazy');

requireApplicationRoutes.keys().forEach((fileName: any) => {
  routes = routes.concat(requireApplicationRoutes(fileName).default);
});

But, require.context return Promise in webpack version, so your code should be:

const routes = Promise.all(
  requireApplicationRoutes.keys().map((fileName: string) => requireApplicationRoutes(fileName).then((route: any) => route.default)),
).then(([ modules ]) => modules);

And you should have all the lazy bundles in your files and routes are array of your routes. :)

Webpack - Require.context -How to require all .js files except `_test.js` in a directory?

Ok, I was able to use the answer in Slava.K's comment to answer my question. Here's the final code below. I had to include (?!.*index) in the regex because this code was including itself index.views.js.

var context = require.context('.', true, /^(?!.*index).*\/(?!.*test).*\.js$/);

var moduleNames = _.chain(context.keys())
  .map(function(key) {
    return context(key)
  })
  .value();

module.exports = angular.module('myApp.demoApp.views', moduleNames).name;

Can I use require with webpack for external files?

Because I didn't find a way with webpack, I modified the files from JS extension to JSON and I used fetch to get the JSON data.

See this for more details:

HERE

---

Related Topics