Three methods for extracting public code using CommonsChunkPlugin webpack are described in detail,

Three methods for extracting public code using CommonsChunkPlugin webpack are described in detail,

The CommonsChunkPlugin plug-in of Webpack is responsible for packaging the JS modules used for multiple times.

Problems solved by CommonsChunkPlugin

Before using the plug-in, consider the following:

1. Which chunks are extracted? This determines how chunks, children, and name are configured.
2. Whether the common chunk is asynchronous determines how async is configured.
3. The granularity of the common chunk determines how the minChunks and minSize are configured.

The following are common official scenarios:

1. Extract two or more chunks of Public Code
2. Extract the Chunk cut from the Code Split into the parent Chunk.
3. Extract the Chunk cut by Code Split to a new asynchronously loaded Chunk.
4. Extract A code library similar to jquery or react

Previously, we implemented multi-page separation of resource references and referenced JS and css as needed.

But there is a problem: the last three JavaScript codes generated all have repeated code. We should extract this part of public code separately.

Method 1: input string Parameters

New webpack. optimize. CommonsChunkPlugin ('common. js'), // by default, the public code of all entry nodes is extracted to generate a common. js

Var HtmlWebpackPlugin = require ('html-webpack-plugin'); var webpack = require ('webpackage'); var extractTextPlugin = require ('extract-text-webpack-plugin '); module. exports = {// entry is an entry file, which can contain multiple entries, representing the js // entry :['. /src/main. js ','. /src/login. js ','. /src/reg. js'], entry: {'main ':'. /src/main. js', 'user ':['. /src/login. js ','. /src/reg. js'], 'index ':['. /src/index. js']}, externals: {'jquery ': 'jquery'}, modul E: {loaders: [// {test:/\. css $/, loader: 'style-loader! Css-loader '}, {test :/\. css $/, loader: extractTextPlugin. extract ('style', 'css ')}],}, output: {path: _ dirname +'/build/js ', // output to that directory (_ dirname current project directory) filename: '[name]. js '// the final package name}, plugins: [new HtmlWebpackPlugin ({filename: _ dirname +'/build/html/login-build.html ', template: __dirname + '/src/tpl/login.html', inject: 'body', hash: true, chunks: ['main', 'user', 'common. js '] // This template corresponds to the above node}), new HtmlWebpackPlugin ({filename: _ dirname +'/build/html/index-build.html ', template: __dirname + '/src/tpl/index.html', inject: 'body', hash: true, chunks: ['index', 'common. js'] // This template corresponds to the node above}), // css extracts new extractTextPlugin ("[name).css"), // provides public code new webpack. optimize. commonsChunkPlugin ('common. js'), // by default, the public code of all entry nodes is extracted to generate a common. js]};

Method 2: select public code extraction

// Provide public code // by default, the public code of all entry nodes is extracted to generate a common. js // extract only the main node and the index node new webpack. optimize. commonsChunkPlugin ('common. js', ['main', 'index']),

Method 3: selective extraction (passing parameters as an object)

Recommendation

New webpack. optimize. CommonsChunkPlugin ({name: 'common', // do not use. js suffix chunks: ['main', 'user', 'index']}),

Through CommonsChunkPlugin, we extract the public code to a common. js, so that the Business Code is only in index. js, main. js, user. js

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.