Bundle your modules with Webpack
0 likes•470 views
The document discusses webpack as a module bundler essential for front-end development, focusing on its capabilities such as code splitting, caching, and automatic reloading. It explains how to configure webpack using a webpack.config.js file to bundle modules efficiently while mentioning various useful plugins. Additionally, it highlights resources for learning and implementing webpack in React applications.
Bundle your modules with Webpack
- 1. Webpack Bundle your modules with Jake Peyser November 2nd, 2016
- 2. “The module bundler. That also supports pre-processing, code splitting, request caching, automatic reloading…”
- 3. • Front end development involves many repetitive tasks • Production SPAs require a lot of code per page • Scalable web apps require efficient static content delivery But… why?
- 4. Output index.js webpack.config.js • Specify your source code entry point • Designate your bundled output destination The Basics
- 5. Outputindex.js message.js • Webpack will crawl the dependency graph, starting at your entry • Creates a single JS file for each designated bundle Module Bundling
- 6. webpack.config.js index.js App.js Output • Transpile source code using loaders (eg. jsx -> js) • Chain and automate the order in which loaders run • Common functionality is provided by webpack and others through plugins Task Running & Plugins
- 7. Output webpack.config.js • Split your code into main and vendor bundles • Creates a single JS file for each designated bundle • Cache code that does not change often to decrease initial page load time Code Splitting
- 8. • Most popular build tool adopted by the React community • Powerful and very heavy on configuration • create-react-app provides a boilerplate with nice abstraction • Most advanced features are not necessary outside of production Key Points
- 9. • Webpack: When to Use and Why • Gulp vs Grunt: Why use task runners and the elegance of plugins • Create React Apps with No Configuration • Utilizing Webpack and Babel to build a React.js App • SurviveJS: Webpack from Apprentice to Master • Webpack Docs • Webpack 2.0 Docs (work in progress) • jakepeyser/webpack-intro Helpful Resources
- 10. • DedupePlugin - Deduplicate equal or similar files in the output • UglifyJSPlugin - Minimize all JavaScript output of chunks • CommonsChunkPlugin - Split code into chunks • OfflinePlugin - Makes your app offline ready by caching all (or some) output assets • DefinePlugin - Create global constants which can be configured at compile time • HotModuleReplacementPlugin - Enables Hot Module Replacement • HtmlWebpackPlugin - Simplifies creation of HTML files to serve your webpack bundles Useful Plugins