How could I build only one of multiple entries with webpack

[sheweichun]

I ask this question in webpack/gitter,but nobody answered ,so I come here
with webpack ,we can build multiple entries just like below:

{
       entry:{
         'a':'a.js',
         'b':'b.js'
       },
       ...
       plugins:[
          new webpack.optimize.CommonsChunkPlugin({
            name:'vendor'
            }),

       ]
    }

I just change the a.js,I only want to rebuild a.js,But the vendor.js and b.js should not change,how could I do that?

[geoffmiller]

I have been searching high/low for an answer to the same question without any luck.

[sheweichun]

thanks for your reply,I think this is a needed feature,It can make me spending little time on building projects.What method can replace it？

[sokra]

The watch mode does only rebuild changed chunks.

A whole compilation need to build all chunks, because they affect eachother

[WojciechRydel]

I have the same issue.
@sokra I agree that build process need to build all chunks, but assume that we have to build chunks for different purpose(different app), but shares some set of files/compoents. In such case when we are developing one of the apps, we must run webpack in watch mode for all chunks, thus webpack is watching on all files related to all apps. When we working at one of the apps, it is unnecessary to watch changes on those files which are not related.

Currently I have such case, and by having such feature to run webpack for one of the entries, I think that the development process would be much faster.

[CrouchingJahi]

One way you could do it is with the DllPlugin, which will require you to have multiple webpack configs. (There's also a module that lets you combine configs if you want to extract the common pieces of your configs, but for my usage, I didn't need it) Each config will deal with a separate area of the code, and you can build them independently of each other by calling webpack --config (the config you want).

[unlocomqx]

An easy way would be to create a separate config file and write something like this

var config = require('./webpack.config');

// replace with your own desired entry
const entry_target = "front";
const entry_path = config.entry[ entry_target ];
config.entry = {};
config.entry[ entry_target ] = entry_path;

module.exports = config;

This was useful for me because sometimes, I want to only rebuild the front-end scripts for example and gain a few seconds

Then in package.json, I added
"front": "webpack --config webpack.front.config.js",

In the teminal that would be
npm run front

[SKalt]

You could dynamically filter your entry points in your config based on environment variables.

// webpack.config.js
module.exports =  {
  entry: Object.entries({
    a: 'a.js',
    b: 'b.js'
  })
    .filter(/* some function of process.env */)
    .reduce((a, [name, entry]) => Object.assign(a, {[name]: entry}), {}),
  // rest of your config
}

or with object-rest-spread:

module.exports = {
  entry: {
    ...(process.env.a && {a: 'a.js'}), 
    ...(process.env.b && {b: 'b.js'})
  }
  // more config
}

[szubtsovskiy]

The watch mode does only rebuild changed chunks.

This claim seems to be false nowadays or at least does not apply to the topic. I have about 10 entries, each one targeting a single JS file. Each JS file is importing single Elm file loaded by elm-webpack-loader. I am running Webpack (4.41.0) in watch mode and can clearly see that if I change an Elm file imported by just one entry, elm-webpack-loader is instructed to build every other Elm file and it just takes too long to be acceptable. I tried both with and without HMR, with webpack-dev-server and webpack-plugin-serve - to the same outcome.

I don't have any issue with similar setup in a project with just one entry, but in my current project we have sort of an MPA described in Webpack docs and I need having multiple entries.

Any idea on how to get this?

[alexander-akait]

@szubtsovskiy will be great if you create minimum reproducible test repo, maybe problem on loader side

[szubtsovskiy]

@evilebottnawi Seems I don't have other options anymore, will see to do it!

[szubtsovskiy]

That's what I've been able to come with, seems showcasing the problem fine!

https://github.com/szubtsovskiy/webpack-sscce

Steps to reproduce are in README.

[alexander-akait]

@szubtsovskiy hm, try to run and got:

Error: Compiler process exited with error Compilation failed
-- HTTP PROBLEM ----------------------------------------------------------------

The following HTTP request failed:

    <https://package.elm-lang.org/all-packages>

Here is the error message I was able to extract:

    HttpExceptionRequest Request { host = "package.elm-lang.org" port = 443
    secure = True requestHeaders =
    [("User-Agent","elm/0.19.0"),("Accept-Encoding","gzip")] path =
    "/all-packages" queryString = "" method = "GET" proxy = Nothing rawBody =
    False redirectCount = 10 responseTimeout = ResponseTimeoutDefault
    requestVersion = HTTP/1.1 } (InternalException (HandshakeFailed (Error_Misc
    "Network.Socket.sendBuf: resource vanished (Connection reset by peer)")))

[szubtsovskiy]

Oh, package.elm-lang.org is known to be not accessible sometimes from IP addresses in some countries (Russia, for example), because of local regulations... Any chance you are on such an IP and if yes, any chance you can route it via some VPN?

[Shruthi48]

you can also divide the entries and run it on multiple dev servers , the webpack compiler in each of the dev server will watch the entry points defined and will only rebuild those when file changes.