javascript - How to do incremental builds with Webpack, across each invocation from the command line? - Stack Overflow

admin管理员组

文章数量:1323732

When I run webpack from mand line, it just builds everything from scratch. How can we make Webpack do incremental builds across invocations of webpack CLI, so that it parses and transpiles only files that have changed?

I'd like for this to work across each invocation of webpack without a long-running process.

webpack --watch and webpack-dev-server are not options because they stay running, which I don't want.

For example, I want to run webpack and it will exit, then the next time I run webpack I would like it to be smart and not rebuild everything all over, just rebuild changed files.

When I run webpack from mand line, it just builds everything from scratch. How can we make Webpack do incremental builds across invocations of webpack CLI, so that it parses and transpiles only files that have changed?

I'd like for this to work across each invocation of webpack without a long-running process.

webpack --watch and webpack-dev-server are not options because they stay running, which I don't want.

For example, I want to run webpack and it will exit, then the next time I run webpack I would like it to be smart and not rebuild everything all over, just rebuild changed files.

• javascript
• node.js
• webpack

Share Improve this question Follow edited Mar 8, 2017 at 20:37 trusktr asked Mar 8, 2017 at 18:39 trusktrtrusktr 45.5k5858 gold badges210210 silver badges287287 bronze badges 5

• 1 Does anyone know if this is possible yet? Seems like an old issue but I can't find the solution anywhere. If so, it would be great to have it in this post, since this is the first stackoverflow post I got addressing this issue. – Joan Puigcerver Commented Dec 13, 2020 at 0:36
• Vite is aiming to address this. vitejs.dev – Robert Commented Nov 6, 2021 at 13:51
• @Robert Is Vite built on Webpack? – trusktr Commented Nov 18, 2021 at 0:10
• @trusktr It's built on Rollup – Robert Commented Nov 19, 2021 at 0:35
• I am facing the same issue here. Did you managed to find any solution for this? Thanks – Thelearning Commented Feb 28, 2022 at 9:22

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Not incremental per-se, but webpack 5 introduced build cache: https://webpack.js/configuration/cache/ (see also related issue https://github./webpack/webpack/issues/6527)

Just add the following to webpack.config.js:

module.exports = {
  // ...
  cache: {
    type: 'filesystem'
  },
};

Running a small benchmark on my application, build time with cache is cut by about 55-80%

Note however this feature is not remended for CI use at the moment. See for example https://github./webpack/webpack/issues/13291

This is about webpack 1.x but should be the same for 2.x:

Build Performance > Incremental Build:

Make sure you don’t do a full rebuild. Webpack has a great caching layer that allows you to keep already piled modules in memory. There are some tools that help to use it:

webpack-dev-server: Serves all webpack assets from memory. Best performance.
webpack-dev-middleware: The same performance as webpack-dev-server for advanced users.
webpack –watch or watch: true: Caches stuff but write assets to disk. Ok performance.

They don't mention incremental build explicitly in the docs of 2.x, but they still mention the the caching in Command Line Interface (CLI).

I highly remend webpack --watch. "When using watch mode, webpack installs file watchers to all files, which were used in the pilation process. If any change is detected, it’ll run the pilation again. When caching is enabled, webpack keeps each module in memory and will reuse it if it isn’t changed."

• https://webpack.github.io/docs/tutorials/getting-started/

本文标签：