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.

Nette <3 Webpack

312 views

Published on

Webpack build and how to integrate it with Nette app

Published in: Technology

Nette <3 Webpack

  1. 1. ♥ @jiripudil #posobota
  2. 2. What is ?
  3. 3. MODULE BUNDLER
  4. 4. .js .js .js .js .js .js .js .js .js .js
  5. 5. MODULE BUNDLER
  6. 6. MODULE BUNDLER
  7. 7. MODULE BUNDLER
  8. 8. MODULE BUNDLER
  9. 9. .scss .js .js .jsx .json .png .less .woff .css .js .css .png .woff
  10. 10. entry .scss .js .js .jsx .json .png .less .woff .css loaders + plugins output .js .css .png .woff
  11. 11. entry The starting point of the dependency graph. /webpack.config.js module.exports = { entry: 'src/index.js' };
  12. 12. entry Depends on other modules. /index.js require('./foo'); /index.scss @import 'foo.css'; /foo.js import './index.scss'; /foo.css .foo { background: url('foo.png'); }
  13. 13. output Tells webpack where and how to bundle your application. /webpack.config.js const path = require('path'); module.exports = { output: { path: path.join(__dirname, 'dist'), publicPath: 'dist/', filename: '[name].js' } };
  14. 14. loaders Transform files into modules. /webpack.config.js module.exports = { module: { rules: [ {test: /.jsx?$/, loader: 'babel-loader'} ] } }; require('json-loader!./data.json');
  15. 15. loaders Can be chained. /webpack.config.js module.exports = { module: { rules: [ { test: /.scss$/, loader: 'style-loader!css-loader!sass-loader' } ] } };
  16. 16. loaders Can be configured. /webpack.config.js module.exports = { module: { rules: [ { test: /.gif(?.*)?$/, loader: 'url-loader?limit=5000&mimetype=image/gif' } ] } };
  17. 17. plugins Usually perform actions to bundled modules. /webpack.config.js const webpack = require('webpack'); module.exports = { plugins: [ new webpack.optimize.UglifyJsPlugin () ] };
  18. 18. Production build $ node_modules/.bin/webpack --config webpack.config.js Hash: f0ae5bf7c6a1fd3b2127 Version: webpack 2.2.0 Time: 28ms Asset Size Chunks Chunk Names index.js 112 kB 0 [emitted] index index.css 816 bytes 0 [emitted] index
  19. 19. Production build: caching & cache busting /webpack.config.js module.exports = { output: { filename: '[name].[chunkhash].js' } };
  20. 20. -dev-server
  21. 21. Using webpack-dev-server $ yarn add --dev webpack-dev-server $ node_modules/.bin/webpack-dev-server --config webpack.config.js --inline --hot --port 3000 http://localhost:3000/ webpack result is served from http://localhost:3000/ ... webpack: bundle is now VALID.
  22. 22. How to integrate ?
  23. 23. SERVER CLIENT API
  24. 24. /webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin' ); module.exports = { plugins: [ new HtmlWebpackPlugin () ] };
  25. 25. SERVER CLIENT HTTP
  26. 26. .../@layout.latte <script src=" "
  27. 27. Production build: caching & cache busting /webpack.config.js module.exports = { output: { filename: '[name].[chunkhash].js' } };
  28. 28. Production build: caching & cache busting /webpack.config.js const WebpackManifestPlugin = require('webpack-manifest-plugin' ); module.exports = { output: { filename: '[name].[chunkhash].js' }, plugins: [ new WebpackManifestPlugin () ] };
  29. 29. $ composer require oops/webpack-nette-adapter@rc
  30. 30. .../config.neon extensions: webpack: OopsWebpackNetteAdapterDIWebpackExtension(%debugMode%) webpack: build: directory: %wwwDir%/dist publicPath: dist/ devServer: url: http://localhost:3000 manifest: name: manifest.json
  31. 31. .../@layout.latte <script src="{webpack asset.js}"></script>
  32. 32. Bonus: Tracy debug bar panel!
  33. 33. rc → stable ?
  34. 34. Happy ing! @jiripudil #posobota

×