How to make Webpack splitChunks work with Webpack-dev-server?

Viewed 1046

I am trying to use splitChunks in Webpack 4, expecting to bundle the modules in node_modules into one bundle that won't be re-compiled each time I make a change to my code.

I added this code in my webpack.config.js:

optimization: {
   splitChunks: {
      chunks: 'all'
   }
},

And I added this line in my index.html:

<script src="./vendors~app.js"></script>

The file 'vendor~app.js' being the new bundle generated.

When I run the webpack-dev-server the first time, it says:

Built at: 2018-09-13 13:32:47
             Asset      Size  Chunks                    Chunk Names
            app.js  3.15 KiB       0  [emitted]         app
    vendors~app.js  1.91 MiB       1  [emitted]  [big]  vendors~app
        app.js.map  13.7 KiB       0  [emitted]         app
vendors~app.js.map  3.98 MiB       1  [emitted]         vendors~app

When I make a change to my source code and save, the webpack-dev-server starts compiling as expected and says:

Built at: 2018-09-13 13:33:46
             Asset      Size  Chunks                    Chunk Names
            app.js  3.16 KiB       0  [emitted]         app
    vendors~app.js  1.91 MiB       1  [emitted]  [big]  vendors~app
        app.js.map  13.7 KiB       0  [emitted]         app
vendors~app.js.map  3.98 MiB       1  [emitted]         vendors~app

I was expecting the compiler not to re-compile vendors~app.js! I thought that was the point of using splitChunks? Am I wrong? how can I avoid the compiler to re-compile vendors~app.js?

Thank you very much.

0 Answers
Related