Develop Reference

A plugin System for react components using webpack

I'm developing a micro frontend architecture using module federation in Webpack in order to develop and deploy all parts of my web application separately. Everything sounds great but the problem is all remote modules should be specified explicitly in the Webpack configuration file. I need something like /plugins in the root directory of my built project And I want to import All .js files in that directory and render all of them in my react project.
Is there a way to implement a plugin system for react components using Webpack? Is there any way at all to achieve this goal?

Save `buildTime` and `hash` of react build when using webpack

I am using webpack to build my react project and I want to get buildTime and hash of the build and save in a json file.
I tried it using getStats method of compilation object using compiler hooks but I couldn't succeed. So, What's a better way of doing this? I do not want to use any third party plugins, neither using npm script. It has to be done exclusively from the webpack config file.

How to import webpack generated output file into an App that has already installed modules that are already in the output file?

I have 2 apps that have Highcharts already installed
and I developed a separate react component that uses the Highcharts lib.
So I used webpack to generate that component with its dependencies to be imported into the 2 apps.
I did that to make the code DRY so I don't have to write the component code into 2 Apps.
How to import the generated output file from webpack into these apps without giving me the error of reinitializing Highcharts?
In other words how to import the file without any conflicts with the already installed libs in the Apps?
Update
I want the lib to be in the bundled file when in case of importing it into an application that doesn't have the lib.
Update II
I want the lib to be in the bundled file when the client application doesn't have the lib, and when the application has the lib the bundled library is the one that is used by the component.

If you know that environment of your code already have some library you can exclude this library from bundle using externals: https://webpack.js.org/configuration/externals/
Lets say we make a react components library and we need to install react, but we know that we will use our components in our react application where react is already installed.
So, we can mark react as externals in our webpack config like:
module.exports = {
// ...
externals: {
react: 'React'
}
// ...
};
Also we can use DllPlugin for exclude any library or any code from our bundle. https://webpack.js.org/plugins/dll-plugin/
You should add external library to peerDependencies for your own library and add external library to dependencies for your application, then you should exclude external library from bundle of your own library using externals or DllPlugin and you will achieve your goal.
UPD:
If you want to include or exclude external library from your bundle depending on your application you should compile your library two times: with external library and without external library and import needed variant in your application.
Also you can use dynamic imports in your library: check exists the external library in current environment and if doesn't - import it.
But these two cases are not ok, we don't do so.
Webpack can't resolve dynamic imports and the external library anyway will still be bundled.
NPM team created peerDependencies specifically for occasions like yours. This is the industry standard.
Read these, please:
https://docs.npmjs.com/files/package.json#peerdependencies
https://webpack.js.org/guides/author-libraries/#externalize-lodash
https://nodejs.org/es/blog/npm/peer-dependencies/
I don't know how to convince you...

Project structure when using VueJS, VuelidateJS with NodeJS/Express

My web development is principally intranet sites and web front-ends for embedded devices using NodeJS.
My current structure is to have everything in one NPM package. I run NodeJS behind Nginx, and let Nginx serve css/image/client-side-javascript files directly from public.
I'm starting to use VueJS and Vuelidate, both of which use the now ES6 modules system - e.g. import { required, minLength } from 'vuelidate/lib/validators'.
While I've (rather hackily) made these work with my current structure, I think the time has come to get into the world of Javascript build-systems/bundlers.
If I use VueJS's preferred option of WebPack, how should I change the structure of my code?
Should I have one NPM package for the frontend (generated by vue-cli init) and another for the Express backend app?
Should I put my Express App into the generated Vue frontend package?
Should I use browserify to do the job of WebPack and stay with my existing structure?
Or something else entirely?

I’m not sure why you’re intent on putting your JavaScript code in other packages. If you have an application then you can keep your raw JavaScript files in there, along with the build script(s). Someone should be able to check your application out and be able to build it.
If you’re looking to get started with a build system, then a nice “bridge” might be to use Mix, a project created by Laravel for building front-end assets such as Sass and JavaScript. It uses Webpack under the hood, but in turn exposes a more user-friendly, fluid API.
If you go down this route, then you could put your raw JavaScript files in a lib/ or src/ directory. You could then use Mix to compile these components like this:
mix.js('lib/your-entry-point-script.js', 'public/js/app.js');
Your entry point script would just be the script that requires all your other scripts and components and the script that you want “built”. Mix would then compile that and place the resultant script at public/js/app.js.
Mix itself is just a npm package, so all you need to do is npm install laravel-mix --save-dev.
You can read more about Mix at https://laravel.com/docs/5.7/mix

Import class dynamically with browserify on client side

I'm using browserify to create a bundle file of my app.
This app get from some rest a list of js file links, each link is a bundle of tool that my app should import and init the imported tool class.
My problem is that browserify doesn't support dynamically import/require like require('www.example.com/myTool.js'). It only knows to require modules from his bundle which I created on the build process.
Do you have any idea how I can keep using browserify and still require files on the fly? I try to import requirejs and systemjs but I had some problems to create a bundle with browserify.
I can force the tool's developers to support any kind of require mechanism, even something I can make. so fill free to write any kind of solution you think.
Thanks