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.

1. Packing for the Web with Webpack
THIAGO TEMPLE

2. A few months ago…

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. What we wanted
• TypeScript
• Modules
• Structure
• Tests

5. Modules

6. Loading

7. Module loaders
SystemJS

8. Bundling

9. Module bundlers
SystemJS

10. Task runners

11. =
+
+

12. One tool

13. To rule them all

14. How does it work?
App.js
MoviesService.js
AnotherModule.js
MoviesCache.js
UsersService.js Lodash.js

15. Configuration
module.exports = {
entry: './src/app.js',
output: {
path: './dist',
filename: 'bundle.js'
}
}

16. Module resolution
• CommonJS
• AMD (RequireJS)
• ES6 (version 2)

17. Migration

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. Loaders

20. A loader
module.exports = {
…
module: {
loaders:[
{
test: /.jsx?$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel',
}
]
}

21. TypeScript loader
module.exports = {
…
module: {
loaders:[
{
test: /.tsx?$/,
include: path.resolve(__dirname, 'src'),
loader: 'ts',
}
]
}

22. Multiple loaders
module.exports = {
…
module: {
loaders:[
{
test: /.tsx?$/,
include: path.resolve(__dirname, 'src'),
loaders: ['babel', 'ts'],
}
]
}

23. Not only JavaScript, css…
module.exports = {
…
module: {
loaders:[
{
test: /.css?$/,
include: path.resolve(__dirname, 'src'),
loaders: ['style', 'css'],
}
]
}

24. Sass
module.exports = {
…
module: {
loaders:[
{
test: /.scss?$/,
include: path.resolve(__dirname, 'src'),
loaders: ['style', 'css', 'sass'],
}
]
}

25. Importing CSS
/// a file.js
require('./mymodule.css');
import './mymodule.css';

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. CSS modules
module.exports = {
…
module: {
loaders:[
{
test: /.css?$/,
include: path.resolve(__dirname, 'src'),
loader: 'style!css?modules&camelCase'
}
]
}

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. CSS modules
.test-class {
width: 200px;
height: 200px;
background-color: purple;
font-size: 1.5em;
}

30. CSS modules

31. Create your own
module.exports = function (source) {
return source;
};

32. Developing tools

33. Dev server
• Easy to configure
• In memory
• Hot reloading

34. Hot reloading

35. React hot reloader loader

36. Source maps
module.exports = {
entry: './src/app.js',
devtool: 'eval-source-map',
output: {
path: './dist',
filename: 'bundle.js'
}
}

37. Linting
module.exports = {
…
module: {
preloaders:[
{
test: /.tsx?$/,
loader: 'tslint',
}
],
tslint: {
emitErrors: true,
failOnHint: true
}
}

38. Plugins

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. Long-term caching
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
…
output: {
path: '…',
filename: 'bundle.[hash].js'
},
plugins:[
new ManifestPlugin(),
]

41. Long-term caching
{
"bundle.js": "bundle.2f0ffb545e5607fc8b8d.js"
}

42. Long-term caching
• Generate html from server
• Generate html using Webpack
• HtmlWebpackPlugin

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. Common chunk plugin - vendors
module.exports = {
entry: {
app: './src/app.js',
vendor: ['jquery', 'react', 'lodash']
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' })
]
}

45. Some other plugins
• Provide
• I18n

46. Some other considerations
• Webpack –p
• Webpack validator
• Attention to the object exported

47. Conclusion
• One tool for bundling and building
• Loaders for individual files
• Plugins for the complete bundle

48. Merci
@vintem12
Thiago Temple
https://templecoding.com