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.
♥
@jiripudil
#posobota
What is ?
MODULE BUNDLER
.js
.js
.js
.js
.js
.js
.js
.js
.js
.js
MODULE BUNDLER
MODULE BUNDLER
MODULE BUNDLER
MODULE BUNDLER
.scss
.js
.js
.jsx
.json
.png
.less
.woff
.css
.js .css .png .woff
entry
.scss
.js
.js
.jsx
.json
.png
.less
.woff
.css
loaders + plugins output
.js .css .png .woff
entry
The starting point of the dependency graph.
/webpack.config.js
module.exports = {
entry: 'src/index.js'
};
entry
Depends on other modules.
/index.js
require('./foo');
/index.scss
@import 'foo.css';
/foo.js
import './index.scss';
...
output
Tells webpack where and how to bundle your application.
/webpack.config.js
const path = require('path');
module.exp...
loaders
Transform files into modules.
/webpack.config.js
module.exports = {
module: {
rules: [
{test: /.jsx?$/, loader: 'b...
loaders
Can be chained.
/webpack.config.js
module.exports = {
module: {
rules: [
{
test: /.scss$/,
loader: 'style-loader!c...
loaders
Can be configured.
/webpack.config.js
module.exports = {
module: {
rules: [
{
test: /.gif(?.*)?$/,
loader: 'url-lo...
plugins
Usually perform actions to bundled modules.
/webpack.config.js
const webpack = require('webpack');
module.exports ...
Production build
$ node_modules/.bin/webpack --config webpack.config.js
Hash: f0ae5bf7c6a1fd3b2127
Version: webpack 2.2.0
...
Production build: caching & cache busting
/webpack.config.js
module.exports = {
output: {
filename: '[name].[chunkhash].js...
-dev-server
Using webpack-dev-server
$ yarn add --dev webpack-dev-server
$ node_modules/.bin/webpack-dev-server 
--config webpack.conf...
How to integrate ?
SERVER CLIENT
API
/webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin' );
module.exports = {
plugins: [
new HtmlWebpac...
SERVER CLIENT
HTTP
.../@layout.latte
<script src=" "
Production build: caching & cache busting
/webpack.config.js
module.exports = {
output: {
filename: '[name].[chunkhash].js...
Production build: caching & cache busting
/webpack.config.js
const WebpackManifestPlugin = require('webpack-manifest-plugi...
$ composer require oops/webpack-nette-adapter@rc
.../config.neon
extensions:
webpack: OopsWebpackNetteAdapterDIWebpackExtension(%debugMode%)
webpack:
build:
directory: %ww...
.../@layout.latte
<script src="{webpack asset.js}"></script>
Bonus: Tracy debug bar panel!
rc → stable ?
Happy ing!
@jiripudil
#posobota
Upcoming SlideShare
Loading in …5
×

Nette &lt;3 Webpack

527 views

Published on

Webpack build and how to integrate it with Nette app

Published in: Technology

Nette &lt;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

×