I used webpack 3 and I want to transfer the project to webpack 4. now I use optimization.splitChunks . But I get an error enter image description here

here is my code:

 module.exports = function () { return { entry: { admin_app: exposePath('AdminApp', 'Components'), user_app: exposePath('UserApp', 'Components') }, output: { path: paths.CLIENT_BUILD_PATH, filename: '[name].client.bundle.js', sourceMapFilename: 'maps/[name].client.map.js', chunkFilename: "chunks/[name].client.chunk.js" }, /*plugins: [ // plugins from webpack 3 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module) { return module.context && module.context.indexOf('node_modules') !== -1; } }), new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', minChunks: Infinity }) ] */ optimization: { // so the code will be written on top (Webpack 4) splitChunks: { cacheGroups: { vendor: { name: 'vendor', test(module) { return module.context && module.context.indexOf('node_modules') !== -1; } }, manifest: { name: 'manifest', minChunks: Infinity } } } } }; };

    1 answer 1

    All optimization team webpack rendered property optimization . The splitChunks property configures the search for modules that are used by several modules, and chunks this module into a separate file to reduce duplication:

     // webpack.config.js module.exports = { ..., optimization: { splitChunks: { cacheGroups: { vendor: { test(module) { return module.context && module.context.indexOf('node_modules') !== -1; } }, manifest: { minChunks: Infinity } } } } };

    webpack allows webpack to render shared modules in separate chunks using the field optimization.splitChunks.cacheGroups . Chunking is also performed by default in production mode.

    • I copied your decision but I had problems. - Vladislav Zayets
    • I understand, thank you very much. I will understand - Vladislav Zayets