Webpack Bower Components externals
Easily exclude Bower components in Webpack (Forked from https://github.com/liady/webpack-node-externals)
Webpack allows you to define externals - modules that should not be bundled.
When bundling with Webpack for the backend - you usually don't want to bundle its bower_components
dependencies.
This library creates an externals function that ignores bower_components
when bundling in Webpack.
(Inspired by the great Backend apps with Webpack series)
Quick usage
npm install webpack-bower-externals --save-dev
In your webpack.config.js
:
var bowerExternals = ;...moduleexports = ... target: 'umd' // in order to ignore built-in modules like path, fs, etc. externals: // in order to ignore all modules in bower_components folder ...;
And that's it. All Bower components will no longer be bundled but will be left as require('module')
.
Detailed overview
Description
This library scans the bower_components
folder for all bower_components names, and builds an externals function that tells Webpack not to bundle those modules, or any sub-modules of theirs.
Configuration
This library accepts an options
object.
options.whitelist (=[])
An array for the externals
to whitelist, so they will be included in the bundle. Can accept exact strings ('module_name'
), regex patterns (/^module_name/
), or a function that accepts the module name and returns whether it should be included.
Important - if you have set aliases in your webpack config with the exact same names as modules in bower_components, you need to whitelist them so Webpack will know they should be bundled.
options.importType (='commonjs')
The method in which unbundled modules will be required in the code. Best to leave as umd
for bower components.
options.modulesDir (='bower_components')
The folder in which to search for the bower components.
options.modulesFromFile (=false)
Read the modules from the .bower.json
file instead of the bower_components
folder.
Example
var bowerExternals = ;...moduleexports = ... target: 'umd' // important in order not to bundle built-in modules like path, fs, etc. externals: ...;
For most use cases, the defaults of importType
and modulesDir
should be used.
Q&A
Why not just use a regex in the Webpack config?
Webpack allows inserting regex in the externals array, to capture non-relative modules:
externals: // Every non-relative module is external // abc -> require("abc") /^[a-z\-0-9]+$/
However, this will leave unbundled all non-relative requires, so it does not account for aliases that may be defined in webpack itself.
This library scans the bower_components
folder, so it only leaves unbundled the actual Bower components that are being used.
How can I bundle required assets (i.e css files) from bower_components?
Using the whitelist
option, this is possible. We can simply tell Webpack to bundle all files with extensions that are not js/jsx/json, using this [regex](https://regexper.com/#%5C.(%3F!(%3F%3Ajs%7Cjson)%24).%7B1%2C5%7D%24):
......
Thanks @wmertens for this idea.
Contribute
Contributions and pull requests are welcome. Please run the tests to make sure nothing breaks.
Test
npm run test
License
MIT