Webpack4 splitchunksplugin && runtimechunkplugin Configuration Notes

Webpack2 has not studied well, found that upgrade to 4, how can you so fast ~

Recently to do project scaffolding, project construction ready to re-do, because the previous writing is too bad ... Then found that the Webpack large version has risen to 4 (again to see one eye, 4.5), so fast rhythm, not adapt ah ... Since it's new, just use the new one, and skip the Version3 first.

There are a number of changes in webpack4 relative to the previous version, including some non-compatible changes. What's the change here? (4.0 changelog, translated), today the main record of the abolition commonChunksPlugin , how to use splitChunksPlugin &&runtimeChunkPlugin

Just keep track of what you know and update it regularly.

Splitchunksplugin

splitChunksPlugin 默认配置项：

{    "Chunks": "All",    "MinSize": 0,    "Mischunks": 1,    "Maxasyncrequests": 1,    "Maxinitialrequests": 1,    "Name": undefined,    "Automaticnamedelimiter": "~",    "FileName": undefined,    "Cachegroups": {}}

A little bit to explain the following configuration:

• chunks: All, async, initial, chunks range of plug-in action
• minSize: Minimum size
• mischunks: Min chunks
• maxasyncrequests: Maximum asynchronous request chunks
• maxinitialrequests: Maximum initialization chunks
• name: Split's chunks name
• automaticnamedelimiter: If name is not specified, the delimiter for name is automatically generated (' Runtime~[name] ')
• filename: "
• cachegroups: The literal meaning of the cache group, the main configuration here

cacheGroups配置项：

[Key]: {    "Priority": "Cache priority weight",    "Name": "Split out the chunk's name.",    "Chunks": "range should be used",    "Enforce": "Unknown",    "MinSize": "Minimum Size",    "Minchunks": "min chunks",    "Maxasyncrequests": "",    "Maxinitialrequests": "",    "FileName": "file name for last output",    "Reuseexistingchunk": "Unknown"}

Runtimechunkplugin

"runtimeChunk":{    "name":"manifest"}

Directly on the example:

Unnecessary attributes are not configured and need to be associated to the output and Extracttextplugin configuration

Webpackconf: {...,    Output: {        Path: Path.Join(Process.CWD(), ' Dist '),Publicpath,        filename: ' [name].js ',        Chunkfilename: ' [name].js '    },    optimization: {        splitchunks: {            chunks: ' initial ', //Only for Portal file processing            cachegroups: {                Vendor: { //Split ' node_modules ' directory to be packaged code to ' Page/vendor.js &&. css ' without the packaging file, then no. CSS needs to rely on ' extracttextplugin '                    Test: /node_modules\//,                    name: ' Page/vendor ',                     Priority: Ten,                    Enforce: true                },                Commons: { //split ' common ' and ' components ' directories packaged in code to ' Page/commons.js &&. css '                    Test: /common\/| Components\//,                    name: ' Page/commons ',                     Priority: Ten,                    Enforce: true                }            }        },        Runtimechunk: {            name: ' Page/manifest '        }    },     Plugins:[New Extracttextplugin({            filename: ' [name].css ',            Ignoreorder: true        }),...    ] ...}

如果没有css文件，说明对应目录下没有相关css资源引用，或者未使用ExtractTextPlugin

Dist
└──page
├──[COMMONS.CSS]
├──commons.js
├──[MANIFEST.CSS]
├──manifest.js
├──[VENDOR.CSS]
├──vendor.js
└──demo//entry in configuration
├──index.css
└──index.js
```

Written in the last

The above example is the optimization configuration item form, you can also use the plugin form, configuration parameters should be the same.

Before the search related configuration, the introduction of the article less, there are some simple demo, but always feel not useful.
Reference to a lot of articles, and then probably read the webpack splitChunksPlugin source code, to understand the next have what parameters, look at the source is very good

Done **********************************

Webpack4 splitchunksplugin && runtimechunkplugin Configuration Notes