O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Packing for the Web with Webpack

731 visualizações

Publicada em

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.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

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

×