Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Packing for the Web with Webpack

720 views

Published on

A presentation on how to use Webpack to bundle and build a web application using TypeScript and CSS. The presentation demonstrates how to use a few of Webpack's loaders and plugins.

Published in: Technology
  • Be the first to comment

Packing for the Web with Webpack

  1. 1. Packing for the Web with Webpack THIAGO TEMPLE
  2. 2. A few months ago…
  3. 3. Initial state • Plain JavaScript • Global functions and variables • Unorganized code (no structure) • Repeated code • No tests • Server and client code together • Different libraries
  4. 4. What we wanted • TypeScript • Modules • Structure • Tests
  5. 5. Modules
  6. 6. Loading
  7. 7. Module loaders SystemJS
  8. 8. Bundling
  9. 9. Module bundlers SystemJS
  10. 10. Task runners
  11. 11. = + +
  12. 12. One tool
  13. 13. To rule them all
  14. 14. How does it work? App.js MoviesService.js AnotherModule.js MoviesCache.js UsersService.js Lodash.js
  15. 15. Configuration module.exports = { entry: './src/app.js', output: { path: './dist', filename: 'bundle.js' } }
  16. 16. Module resolution • CommonJS • AMD (RequireJS) • ES6 (version 2)
  17. 17. Migration
  18. 18. Multiple entry points module.exports = { entry: { page1: './src/app.js', page2: './src/movies.js', page3: './src/admin.js', }, output: { path: './dist', filename: '[name].js' } }
  19. 19. Loaders
  20. 20. A loader module.exports = { … module: { loaders:[ { test: /.jsx?$/, include: path.resolve(__dirname, 'src'), loader: 'babel', } ] }
  21. 21. TypeScript loader module.exports = { … module: { loaders:[ { test: /.tsx?$/, include: path.resolve(__dirname, 'src'), loader: 'ts', } ] }
  22. 22. Multiple loaders module.exports = { … module: { loaders:[ { test: /.tsx?$/, include: path.resolve(__dirname, 'src'), loaders: ['babel', 'ts'], } ] }
  23. 23. Not only JavaScript, css… module.exports = { … module: { loaders:[ { test: /.css?$/, include: path.resolve(__dirname, 'src'), loaders: ['style', 'css'], } ] }
  24. 24. Sass module.exports = { … module: { loaders:[ { test: /.scss?$/, include: path.resolve(__dirname, 'src'), loaders: ['style', 'css', 'sass'], } ] }
  25. 25. Importing CSS /// a file.js require('./mymodule.css'); import './mymodule.css';
  26. 26. CSS with images module.exports = { … module: { loaders:[ { test: /.(gif|jpg|png)?$/, include: path.resolve(__dirname, 'src'), loader: 'url?limit=10000?name=images/[name].[ext]', } ] }
  27. 27. CSS modules module.exports = { … module: { loaders:[ { test: /.css?$/, include: path.resolve(__dirname, 'src'), loader: 'style!css?modules&camelCase' } ] }
  28. 28. CSS modules var styles = require('./app.css'); var el = document.createElement('div'); el.innerText = 'Hello opencode'; el.className = styles.testClass; document.body.appendChild(el);
  29. 29. CSS modules .test-class { width: 200px; height: 200px; background-color: purple; font-size: 1.5em; }
  30. 30. CSS modules
  31. 31. Create your own module.exports = function (source) { return source; };
  32. 32. Developing tools
  33. 33. Dev server • Easy to configure • In memory • Hot reloading
  34. 34. Hot reloading
  35. 35. React hot reloader loader
  36. 36. Source maps module.exports = { entry: './src/app.js', devtool: 'eval-source-map', output: { path: './dist', filename: 'bundle.js' } }
  37. 37. Linting module.exports = { … module: { preloaders:[ { test: /.tsx?$/, loader: 'tslint', } ], tslint: { emitErrors: true, failOnHint: true } }
  38. 38. Plugins
  39. 39. Extract CSS var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { … module: { loaders:[ { test: /.css$/, loader: ExtractTextPlugin.extract('style', 'css'), } ], plugins:[ new ExtractTextPlugin('bundle.css') ]
  40. 40. Long-term caching var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { … output: { path: '…', filename: 'bundle.[hash].js' }, plugins:[ new ManifestPlugin(), ]
  41. 41. Long-term caching { "bundle.js": "bundle.2f0ffb545e5607fc8b8d.js" }
  42. 42. Long-term caching • Generate html from server • Generate html using Webpack • HtmlWebpackPlugin
  43. 43. Common chunk plugin module.exports = { entry: { page1: './src/app.js', page2: './src/movies.js', page3: './src/admin.js', }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'shared' }) ] }
  44. 44. Common chunk plugin - vendors module.exports = { entry: { app: './src/app.js', vendor: ['jquery', 'react', 'lodash'] }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }) ] }
  45. 45. Some other plugins • Provide • I18n
  46. 46. Some other considerations • Webpack –p • Webpack validator • Attention to the object exported
  47. 47. Conclusion • One tool for bundling and building • Loaders for individual files • Plugins for the complete bundle
  48. 48. Merci @vintem12 Thiago Temple https://templecoding.com

×