Webpack watch double compile node modules

Question

I have a project, which consists of 3 parts, Application, Common and Configuration.

In watch mode, webpack (--watch --progress) compiles everything at the first run, which is okay, but the second run is always recompiling node_module dependecies again. It also happens sporadically meanwhile development, despite that node_modules is not changed at all.

Is it possible to tell the compiler to ignore vendor scripts always after first run?

Currently this is the first run:

Hash: a5023b9c06db9f1a79ac
Version: webpack 4.30.0
Time: 166927ms
Built at: 06/19/2020 1:15:38 PM
                   Asset       Size         Chunks             Chunk Names
          Application.js    831 KiB    Application  [emitted]  Application
      Application.js.map    801 KiB    Application  [emitted]  Application
               Common.js    332 KiB         Common  [emitted]  Common
           Common.js.map    297 KiB         Common  [emitted]  Common
        Configuration.js    851 KiB  Configuration  [emitted]  Configuration
    Configuration.js.map    857 KiB  Configuration  [emitted]  Configuration
                icon.png   2.54 KiB                 [emitted]
               vendor.js    6.3 MiB         vendor  [emitted]  vendor
           vendor.js.map   6.92 MiB         vendor  [emitted]  vendor
Entrypoint Configuration = vendor.js vendor.js.map Common.js Common.js.map Configuration.js Configuration.js.map
Entrypoint Application = vendor.js vendor.js.map Common.js Common.js.map Application.js Application.js.map

Second run the same slow process, because of vendor.js:

Hash: f1f697d9490a884e8ba9
Version: webpack 4.30.0
Time: 185104ms
Built at: 06/19/2020 1:20:06 PM
               Asset      Size         Chunks             Chunk Names
    Configuration.js   851 KiB  Configuration  [emitted]  Configuration
Configuration.js.map   857 KiB  Configuration  [emitted]  Configuration
           vendor.js   6.3 MiB         vendor  [emitted]  vendor
       vendor.js.map  6.92 MiB         vendor  [emitted]  vendor
 + 4 hidden assets
Entrypoint Configuration = vendor.js vendor.js.map Common.js Common.js.map Configuration.js Configuration.js.map
Entrypoint Application = vendor.js vendor.js.map Common.js Common.js.map Application.js Application.js.map

And the next runs are okay mostly (1-2 secs), but sometimes it is rebuilding vendor.js again.

This is my webpack.config.js:

...
entry: {
    Configuration: './src/Configuration/ConfigurationMain.tsx',
    Application: './src/Application/ApplicationMain.tsx'
},
output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'umd',
    library: "[name]"
},
optimization: {
    splitChunks: {
        cacheGroups: {
            vendor: {
              test: /[\/]node_modules[\/]/,
              name: "vendor",
              chunks: "all"
            },
            Common: {
              test: /[\/]Common[\/]/,
              name: "Common",
              chunks: "all"
            }
        }
    }
},
devtool: "source-map",
watchOptions: {
    ignored: [
        path.resolve(__dirname, 'dist'),
        path.resolve(__dirname, 'node_modules')
    ]
}
...

Any tips or suggestions?

Webpack watch double compile node modules

0 Answers