webpack is a module bundler for the web
- Webpack dev server
- Fast live reload, incremental build
- JS/css example https://github.com/masone/legalwalls-web/blob/master/app/index.js
Entry, output, loaders, and plugins
Entry point (file) to build the dependency graph from
Output defines where to emit the bundles and the naming
- https://webpack.js.org/concepts/#output
- https://webpack.js.org/configuration/output/#output-filename
Loaders describe to webpack how to process non-JavaScript modules
Examples
- https://webpack.js.org/loaders/
- https://webpack.js.org/loaders/postcss-loader/
- https://webpack.js.org/loaders/url-loader/
- https://webpack.js.org/loaders/file-loader/
Examples
- https://webpack.js.org/plugins/
- https://webpack.js.org/plugins/i18n-webpack-plugin/
- https://webpack.js.org/plugins/html-webpack-plugin/
- https://webpack.js.org/plugins/uglifyjs-webpack-plugin/
- https://webpack.js.org/guides/development/#using-source-maps
- https://webpack.js.org/guides/asset-management/#loading-css
- https://webpack.js.org/guides/asset-management/#loading-images
- https://webpack.js.org/guides/asset-management/#loading-fonts
- https://webpack.js.org/guides/tree-shaking/
- https://webpack.js.org/concepts/hot-module-replacement/
- https://webpack.js.org/guides/code-splitting/
- https://webpack.js.org/plugins/commons-chunk-plugin/#commons-chunk-for-entries
- https://webpack.js.org/guides/lazy-loading/#src/components/Sidebar/Sidebar.jsx
- it’s becoming a standard for bundling frontend assets
- nifty features, tons of loaders and plugins
- great docs
- speed up development (incremental build, hot reloading)
- smaller bundles (only bundles what you actually use, code splitting, tree shaking)