I am looking for information on how to bundle dependencies with Webpack. Haven't been doing front-end development much recently and behind the latest trends.
(a) I would like to bundle x number of dependencies with Webpack, but I do not wish to specify an entry point. Such that if the bundle was require'd, nothing would execute.
(b) This has probably nothing to do with (a) - ideally I could bundle them as AMD modules. Basically, would like to take NPM modules and my code and convert things to AMD.
I am guessing that the above can be accomplished through some webpack.config.js
configuration, but I haven't see anything online demonstrating how you can bundle deps with Webpack without specifying an entry point.
Out of the box, webpack won't require you to use a configuration file. However, it will assume the entry point of your project is src/index. js and will output the result in dist/main.
By default, every entry chunk stores all the modules that it uses. With dependOn option you can share the modules from one entry chunk to another: module. exports = { //... entry: { app: { import: './app.
webpack.config.jsmodule. exports = { entry: { main: './path/to/my/entry/file. js', }, }; We can also pass an array of file paths to the entry property which creates what is known as a "multi-main entry".
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.
You have to specify an entrypoint, otherwise Webpack won't be able to parse your modules and statically analyze the dependencies.
That said, you don't have to directly specify an entrypoint in your configuration. You can use the webpack --entry path/to/entry.js $OTHER_ARGS
and then require all the dependencies therein, or you could use the configuration can and specify all the required modules:
{
entry: ['react', 'foo', 'bar', './ours/a', './ours/b']
}
In any case, the way Webpack evaluates your modules during runtime does not make these modules readily available. I suspect what you actually may be interested in is creating library targets, which are compiled independently and then reused in other Webpack builds.
Here is a nice article that explains the approach in detail and then you can refer to the official documentation.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With