Webpack build and how to integrate it with Nette app

1. ♥
@jiripudil
#posobota

2. What is ?

3. MODULE BUNDLER

4. .js
.js
.js
.js
.js
.js
.js
.js
.js
.js

5. MODULE BUNDLER

6. MODULE BUNDLER

7. MODULE BUNDLER

8. MODULE BUNDLER

9. .scss
.js
.js
.jsx
.json
.png
.less
.woff
.css
.js .css .png .woff

10. entry
.scss
.js
.js
.jsx
.json
.png
.less
.woff
.css
loaders + plugins output
.js .css .png .woff

11. entry
The starting point of the dependency graph.
/webpack.config.js
module.exports = {
entry: 'src/index.js'
};

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. 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. loaders
Transform files into modules.
/webpack.config.js
module.exports = {
module: {
rules: [
{test: /.jsx?$/, loader: 'babel-loader'}
]
}
};
require('json-loader!./data.json');

15. loaders
Can be chained.
/webpack.config.js
module.exports = {
module: {
rules: [
{
test: /.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}
]
}
};

16. loaders
Can be configured.
/webpack.config.js
module.exports = {
module: {
rules: [
{
test: /.gif(?.*)?$/,
loader: 'url-loader?limit=5000&mimetype=image/gif'
}
]
}
};

17. plugins
Usually perform actions to bundled modules.
/webpack.config.js
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.optimize.UglifyJsPlugin ()
]
};

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. Production build: caching & cache busting
/webpack.config.js
module.exports = {
output: {
filename: '[name].[chunkhash].js'
}
};

20. -dev-server

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. How to integrate ?

23. SERVER CLIENT
API

24. /webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin' );
module.exports = {
plugins: [
new HtmlWebpackPlugin ()
]
};

25. SERVER CLIENT
HTTP

26. .../@layout.latte
<script src=" "

27. Production build: caching & cache busting
/webpack.config.js
module.exports = {
output: {
filename: '[name].[chunkhash].js'
}
};

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. $ composer require oops/webpack-nette-adapter@rc

30. .../config.neon
extensions:
webpack: OopsWebpackNetteAdapterDIWebpackExtension(%debugMode%)
webpack:
build:
directory: %wwwDir%/dist
publicPath: dist/
devServer:
url: http://localhost:3000
manifest:
name: manifest.json

31. .../@layout.latte
<script src="{webpack asset.js}"></script>

32. Bonus: Tracy debug bar panel!

33. rc → stable ?

34. Happy ing!
@jiripudil
#posobota