Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack - bundling scripts without specifying an entry point

Tags:

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.

like image 503
Alexander Mills Avatar asked Dec 12 '16 09:12

Alexander Mills


People also ask

Is it mandatory to use a configuration file when setting up a webpack project?

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.

What is the default entry point in webpack?

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.

How do you define an entry point in webpack?

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".

How do you bundle on a webpack?

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.


1 Answers

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.

like image 94
Filip Dupanović Avatar answered Sep 22 '22 16:09

Filip Dupanović