Webpack Split Application Code And Vendor Packages
September 16, 2017Edit webpack config file (e.g. webpack.config.js
). It will generate a separate vendor.js
files for vendor packages in node_modules
directory.
Note: the following code is based on the work of vuejs-templates/webpack
var webpack = require('webpack')
module.exports = {
...
plugins: [
...
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.js',
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
],
...
};
If you are extracting CSS with ExtractTextPlugin
and want to generate vendor.css
as well, you should replace /\.js$/
with /\.(js|css|sass|scss|less)$/
for the above configuration.
- android
- android-ktx
- android-studio
- bootstrap
- coroutines
- crashlytics
- css
- dagger2
- datastore
- eslint
- firebase
- flask
- fontawesome
- git
- glide
- google-app-engine
- google-drive
- google-maps
- google-places
- google-play
- hugo
- java
- java-time
- javascript
- kotlin
- lets-encrypt
- linux
- markdown
- moshi
- nginx
- npm
- pip
- python
- room
- rxjava
- selenium
- ssl
- static-site-generator
- ubuntu
- unit-test
- uwsgi
- vue-cli
- vuejs
- web-development
- web-hosting
- webpack
- windows
- workmanager