https://github.com/diegohaz/webpack-blocks-split-vendor
A webpack block that splits vendor javascript into separated bundle
https://github.com/diegohaz/webpack-blocks-split-vendor
bundle vendor webpack webpack-blocks webpack2
Last synced: about 1 year ago
JSON representation
A webpack block that splits vendor javascript into separated bundle
- Host: GitHub
- URL: https://github.com/diegohaz/webpack-blocks-split-vendor
- Owner: diegohaz
- License: mit
- Created: 2017-04-02T22:44:02.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-03-07T16:40:14.000Z (about 8 years ago)
- Last Synced: 2025-04-17T17:43:05.950Z (about 1 year ago)
- Topics: bundle, vendor, webpack, webpack-blocks, webpack2
- Language: JavaScript
- Homepage:
- Size: 183 KB
- Stars: 15
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# webpack-blocks-split-vendor
[](https://github.com/diegohaz/nod)
[](https://npmjs.org/package/webpack-blocks-split-vendor)
[](https://travis-ci.org/diegohaz/webpack-blocks-split-vendor) [](https://codecov.io/gh/diegohaz/webpack-blocks-split-vendor/branch/master)
A webpack block that splits vendor javascript into separated bundle.
## Install
$ npm install --save webpack-blocks-split-vendor
## Usage
```js
const { createConfig, env } = require('webpack-blocks')
const splitVendor = require('webpack-blocks-split-vendor')
module.exports = createConfig([
// creates a vendor.js file (or vendor.[chunkhash].js in production)
splitVendor(),
// creates a foo.js file
splitVendor('foo'),
// creates a foo.js file, but keeps offline-plugin/runtime out of vendor
splitVendor({ name: 'foo', exclude: /offline-plugin\/runtime\.js/ })
// creates a vendor.js file, but keeps lodash and offline-plugin/runtime out of vendor
splitVendor({ exclude: [/lodash/, /offline-plugin\/runtime\.js/] })
])
```
## How it does
- changes the output filename to `[name].[chunkhash].js`;
- creates a bundle with `node_modules/**/*.js` files with the help of [`CommonsChunkPlugin`](https://webpack.js.org/plugins/commons-chunk-plugin/);
- uses [`webpack-md5-hash`](https://github.com/erm0l0v/webpack-md5-hash) instead of the standard webpack chunkhash so vendor bundle will have different hash from other bundles (otherwise, we would invalidate the vendor bundle cache everytime we update the app bundle, which would make this approach useless).
For more details, see [`src/index.js`](src/index.js).
## API
#### Table of Contents
- [splitVendor](#splitvendor)
- [Condition](#condition)
- [Options](#options)
### splitVendor
Returns a webpack block that splits vendor javascript bundle.
**Parameters**
- `options` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Options](#options))**
Returns **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)**
### Condition
Type: ([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [RegExp](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Condition](#condition)>)
### Options
Type: {name: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String), test: [Condition](#condition)?, exclude: [Condition](#condition)?}
**Properties**
- `name` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)**
- `test` **[Condition](#condition)?**
- `exclude` **[Condition](#condition)?**
## Other useful webpack blocks
- [`webpack-blocks-happypack`](https://github.com/diegohaz/webpack-blocks-happypack)
- [`webpack-blocks-server-source-map`](https://github.com/diegohaz/webpack-blocks-server-source-map)
## License
MIT © [Diego Haz](https://github.com/diegohaz)