Webpack 3 to 4 - CommonsChunkPlugin to splitChunks Conversion

Question

Failing to migrate to Webpack 4.

I'm providing a library and my goal is to have libs, core, extensions files (Like i managed to do in webpack 3).

Therefore I've created 3 entry points which imports all my code (in order to bundle it).

This is Part of webpack config 3:

const outputFileName = `MyInfra`;


...
entry: {
   "myLibs": './infra/libs",
   "myCore": './infra/core",
   "MyExt1": './infra/ext1",
},
output: {
    path: path.join(__dirname, 'dist'),
    filename: `${outputFileName}.js`,
    sourceMapFilename: `maps/${outputFileName}.map.js`,
    libraryTarget: 'umd',
    umdNamedDefine: true
},
plugins: [
     new webpack.optimize.OccurrenceOrderPlugin(),
     new webpack.optimize.CommonsChunkPlugin({ names: ['myCore', 
         'myLibs'], filename: `${outputFileName}.js` })
        ],

This creates the 3 files I wanted, and only In the libs file the addition of webpackBootstrap code.

From my user I expect to include the libs, core, and extension in his html in this order.

I'm trying now to migrate to splitChunks.cacheGroups - but without succeeding.

The closest result I've managed to reach is: (I've changed the entry point names without comas)

optimization:{
    splitChunks: {
        cacheGroups:{
          default: false,
          myLibs: { name:"libs", test: "myLibs", chunks: "initial", enforce:true, reuseExistingChunk: true},
          myCore: { name:"core", test: "myCore", chunks: "initial", enforce:true, reuseExistingChunk: true},
          myExt1: { name:"ext1", test: "myExt1", chunks: "initial", enforce:true, reuseExistingChunk: true}
        }
    }
}

The result is 6 files and not 3. libs.js, myLibs.js, core.js, myCore.js, ext1.js, myExt1.js.. All the my files are just 7 Kb with the code of webpackBootstrap.. each code will load the modules if only all 3 libs core and ext1 will be included first.

This is one problem that i have.. Why do we have this additional 2 files. And why do I need to include all files in order to load the module libs ?

And then I continued and included all my scripts and ran a demo application.

I've found out another thing that changed and now stopped working.

In my infra I've provided a configuration object that the user can change, That I'm importing in my classes and acting accordingly. I've noticed that importing the configuration object returning different instance of the object that the user imported.

const Defaults = {
   ...
   option : value,
   ...
}
export default Defaults;

It used to work in webpack 3.6 as expected..

Please help me here.. I'm banging my head here with this 2 problems.

Webpack 3 to 4 - CommonsChunkPlugin to splitChunks Conversion

0 Answers0