I've got a node module that no matter what doesn't bundle well when using webpack. So the only way forward is to exclude this particular module from my webpack bundle.
However, i still have to include the unbundled module files in my package for deployment to my aws lambda. I'm scratching my head about how to do this. Can I get webpack to put only this module and it's dependencies in a seperate node_modules folder in my dist folder? What's the best way to do this?
Related
I'm trying to bundle the project with webpack 5.
There is a problem with dynamic import, and I can't fix it, so I decided to exclude this library from the bundle, and then it works fine.
But, In the production version, I'm removing node_modules because it's running on lambda.
So here is a question: Can we exclude library from bundle but use it without node_modules? If yes, how we can achieve this?
For example, copy the library from node_modules to the dist folder and then change import * from "library_name" to point to the import * from "./dist/library_name" directory.
I was recently using a react pakage and importing like so:
import ReactRegionSelect from 'react-region-select';
Now how does react know in my case where to import react-region-select from ?
I.E. if i were building the plugin react-region-select, which can be found HERE.
do i need to build it in a way that webpack or guld or node knows where to pick it from , considering it will be in node_modules ?
or is it just because in my package.json file i have the property name: 'react-region-select', that webpack, gulp or node knows where to pick it from ?
It checks node_modules folder by default.
You would need to publish to npm to use it in another project remotely.
Yes, using the name. NPM uses the published name to download the module under the same name when resolving dependancies.
https://webpack.js.org/concepts/module-resolution/#module-paths
https://webpack.js.org/configuration/resolve/#resolvemodules
I start learning webpack , node , and react and I am bit confused about some basic staff.
Does webpack bundle whole react.js + my javascript files into one output file, so when deploying to production I don't need to install node packages used in project (assuming that they are added to webpack.config.js file) ?
If above is right:
On my server I just need to place index.html + output from
webpack ( bundle.js) ? ( In simple scenario) ?
package.json will be used only on development side ?
You only need index.html and the bundle.js (or any name you gave the file) for the app to work, provided that you are not using any local assets. You don't need to include node modules. Package.json should tell you what to include in your project so that you don't have to include node modules whenever you want to upload your project along with few other decalarations.
The way Webpack works is that you specify one or more entry points and one or more output files. Webpack then reads the entry point and also traverses through the import / require statements recursively. It then generates final bundle file(s) which includes all the traversed files.
Yes, Webpack outputs everything in the the bundle.js file(s). You can configure multiple output bundles. So, you just need HTML and output bundle to deploy the app.
The package.json specifies the packages upon which the app depends, apart from several other things. While traversing through the entry points, webpack will also include the packages specified in import / require. Function of package.json is to tell npm to install those packages.
I've got an Electron project in node.js and am currently attempting to make distribution easier by collapsing the massive node_modules hierarchy into an asar. This way I can have app.asar and modules.asar, as suggested by various places such as grunt-asar.
The problem is that this needs me to change all require() statements to have the asar in the path, like: require('modules.asar/package'). That's fine for modules I'm including from my code but when a module itself uses require('dependency-package') that then fails to resolve. As I understand it, node.js will resolve in the "node_modules" folder for these but there is no "node_modules" directory anymore due to packaging modules into an asar.
Is there anything I can do to help this?
My application has a directory structure more or less like this:
src-program/ - contains frontend code including package.json and webpack.config.js
src-server/ - contains backend code including a different package.json and .babelrc
shared/foo.js - is JavaScript code that is needed by both the frontend and the backend
All code uses ES2015 syntax and thus is transpiled using Babel.
For the frontend the "transpilation" is done during the Webpack build by using the babel-loader.
For the backend it is done on-the-fly by babel-register.
shared/foo.js requires other modules, that are found in the package.json files of both the frontend and the backend.
Due to how NodeJS/Webpack resolve modules, the shared module isn't found normally.
For Webpack I solved this in a somewhat hacky way using this configuration:
resolve: {
root: __dirname,
fallback: [
__dirname + "/../shared",
__dirname + "/node_modules"
],
extensions: ['', '.js', '.jsx']
},
The first fallback makes sure that the "shared" module is resolved and the second fallback makes sure that modules required by the shared module are still resolved to the frontend node_modules directory.
This allows including the shared module as simple as this:
import * as foo from 'foo';
However, I'm having difficulties to make the backend (ie. NodeJS) resolve the shared module the same way.
I tried with app-module-path, which makes foo.js resolve, but then the file is either not processed by Babel or additional Babel modules like transform-runtime (indirectly needed by foo.js) cannot be resolved since they reside in src-server/node_modules...
I could probably work around the problem by pre-transpiling the code instead of using babe-register but it all doesn't feel right anyway.
So, what is a good way to share code between a Webpack build and the NodeJS server process?
Can you package the shared module up as an npm package (even a package just residing on your filesystem)? Then your src-program and src-server projects can add it as a dependency in their package.json, and it will get copied into their respective node_modules folders.
See: how to specify local modules as npm package dependencies