Webpack requires files dynamically - javascript

I am trying to require files dynamically with Webpack like so:
this.svg = require(`resources/assets/images/svg/${this.name}.svg`);
Of course because this code only runs in NodeJS, Webpack has no clue what this.name is and creates a context.
With the context it grabs all the files from that particular directory and jams them into my javascript bundle. I do not want all of the files from this directory though I just want the ones want this exact name.
Since this can't be achieved at runtime is there a way to provide a static list of files which Webpack can run through?
Sort of like a forEach with require.

Related

Using webpack and publicPath for static resources

The following question was rewritten, because I have now a working solution, but no answer to the question above.
The repository that shows different scenarios how to use resources packed with webpack is named example-webpack-dynamic-resources. It contains 3 modules:
inline: a solution, but not useful in my context (many resource files)
file: a solution by using the plugin webpack-require-from
public-path: no solution yet, shows how I would like to use __webpack?public_path__.
I think I have read any resource about webpack and publicPath and __webpack_public_path__, but I don't get it to work. I try to dynamically change the path to static resources, but it fails.
Here is my context:
I build a Javascript library that will be used on web pages (HTML, CSS, Javascript).
It provides a lot (>100) static resources to small image files, combined > 500 KB. Only a fraction of it will be used by the user looking at the web site.
Therefore I would like to pack the CSS into the bundle, but keep the image resources in a directory located on the server somewhere. The default path to it will be /img.
As long as I use the same structure (which means, images only under ROOT/img/**, everything is ok.
But the users of the library should be able to configure the path to the image resources on their will.
You will find all relevant files in my example repository example-webpack-dynamic-resources in the module public-path-resources.
webpack.js: Use file-loader for images, which are referenced in CSS files. CSS will be inlined by style-loader and css-loader.
src/public-path.js: Define the global variable with a default (no environment variable).
src/index.js: require first public-path, then the logic.
examples/exam1-root/index.html: Tries to use the assets in the sub directory lib, sets the value therefore to __webpack_public_path__ = '/lib/. Not working.
examples/exam2-different-dirs/index.html: Moves the library to a different dir (not relevant), but uses the originally defined directory pgnv-assets for the assets. Working.
examples/exam3-non-standard-dirs/index.html: Try to use instead my-assets as directory for the assets. Not working.
How could the __webpack_public_path__ defined at runtime in the index.html file?

Is it possible for webpack to automatically register index files for a given directory?

I'm wondering if, instead of building index files manually, ie. if I have a directory of 'Helper' classes, or Repositories, and I would prefer to import/use them like:
import { UserHelper, GroupHelper } from 'src/helpers';
Can webpack automatically generate the /src/helpers/index.js file which would export each Helper file within that directory automatically? Or should I have to manually create the index file myself?
Thanks,
Ryan

Gulp - Inject js from one file into another without Browserify

Using gulp, what is a proper way to inject one js file into another?
I know about gulp-browserify, but that wraps each require'd file in it's own IIFE so variables are no longer global and, unfortunately, I need them to be global.
I know I can also concat all JS files into one, but I would like to generate separate JS files.
Is there a way to simply include the contents of one file within another where I can specify the concatenation in the JS file itself instead of in Gulp's configuration file?

I don't see the "node_modules/bin" folder after installing browserify

I'm trying to repeat this tutorial:
https://ampersandjs.com/learn/npm-browserify-and-modules/#npm-browserify-amp-modules
But after installing browserify I don't see folder: node_modules/.bin
Instead I see a folder node_modules/browserify. Inside there is a bin folder, and Iinside of it - cmd.js and args.js.
How should I change this line of code in my case: ./node_modules/.bin/browserify app.js -o app.bundle.js to compile all js files into one file?
Or maybe I need to install browserify some other way?
Put together, the flow of creating a very simple web application with these tools might look something like this:
You simply need to point your cmd prompt to the browserify node_module, so drop the .bin if it's not there => /node_modules/browserify yourjsfile.js myjsfile.bundle.js
As far as I can understand this guide: the app.js file or yourjsfile.js needs to have all the library requirements included in order for it to work.
var squareNumbers = require('./square-numbers');
This means you need to write this file as an entry point for all your scripts you need to bundle.
TIP: try to find a youtube video or something to get a better understanding of this guide.
The dot in front of these directories tells you it's a system folder, in this case, not of your operating system, but from another "system/application", like node. It puts these kind of folders alphabetically on top to make a distinction.

Getting yeoman/usermin to uglify .kml file references

I am attempting to use yeoman to scafold a web site, my website includes references to files such as images/foo.kml
Running Grunt results in these files being filerev, i.e. the file images/foo.kml is copied to the dist directory but now called images/3333.foo.kml.
The only problem is that usermin task does not replace the references to images/foo.kml in the requested javascript file, but it does manage to process all the references to css and javascript files.
References to images, css and javascript files are normally listed by html tags, eg , etc. In my case I am making a programmtic request to a kml file which is used by a bit of add hock javascript, can usermin deal with type of problem? Or would I be better off putting all of the files that are going to be accessed by a javascript application in a different directory and ensure that references to these files are not subject to filerev?
Bottom line I was using OpenLayers to process the kml files, as the files are not used my img tags and only by a Java script program, the file name has to remain a constant. Since the uglify task has no concept of understanding a file name within a block of Javascript.
My solution was to change the grunt file so that my kml files are copied from the app to the dist directory.

Categories

Resources