Configuration: A Webpack Story

2. ABOUT ME ▸ Fabian Buentello ▸ Twitter: @initFabian ▸ Senior Frontend Developer at Dragos ▸ Former iOS Developer
3. $ sass input/main.scss output/styles.css
4. $ sass input/main.scss output/styles.css
5. $ sass input/main.scss output/styles.css
6. task readFrom('path/to/src') doSomething() moveTo('path/to/dist') task readFrom('path/to/src') doSomething() moveTo('path/to/dist') task readFrom('path/to/src') doSomething() moveTo('path/to/dist') task readFrom('path/to/src') doSomething() moveTo('path/to/dist')
7. src styles + app Tasks dist styles src
8. src styles + app dist styles src Tasks
10. ▸ Created by Tobias Koppers (@wSokra) ▸ Created: 2012 OSCON 2014: How Instagram.com Works; Pete Hunt Fun Fact: Webpack is actually a fork of ‘modules-webmake’
12. 13 module.exports = { entry: './src/js/app.js', module: { rules: [ {!!"}, {!!"}, {!!"}, {!!"} ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] };
13. 14 module.exports = { entry: './src/js/app.js', };
14. 15 module.exports = { entry: './src/js/app.js', };
15. 16 module.exports = { entry: './src/js/app.js', };
17. 18 JS Modules
18. 19 JS Modules bundle.js
19. 20 JS Modules bundle.js
20. 21 JS Modules bundle.js
21. 22 JS Modules bundle.js
22. 23 JS Modules Loaders bundle.js
23. 24 JS Modules Loaders { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options: { presets:[ '@babel/env', '@babel/preset-react' ] } } bundle.js
24. 25 JS Modules Loaders bundle.js
25. 26 JS Modules Loaders { test: /\.(scss|css)$/, use: [ {loader: 'style-loader'}, {loader: 'css-loader'}, {loader: 'sass-loader'}, ], } bundle.js styleLoader(cssLoader(sassLoader(input)))
26. 27 JS Modules Loaders { test: /\.(scss|css)$/, use: [ {loader: 'style-loader'}, {loader: 'css-loader'}, {loader: 'sass-loader'}, ], } bundle.js styleLoader(cssLoader(sassLoader(input)))
27. 28 JS Modules Loaders { test: /\.(scss|css)$/, use: [ {loader: 'style-loader'}, {loader: 'css-loader'}, {loader: 'sass-loader'}, ], } bundle.js styleLoader(cssLoader(sassLoader(input)))
28. 29 JS Modules Loaders { test: /\.(scss|css)$/, use: [ {loader: 'style-loader'}, {loader: 'css-loader'}, {loader: 'sass-loader'}, ], } <style> !!" !$style> bundle.js styleLoader(cssLoader(sassLoader(input)))
29. 30 JS Modules Loaders { test: /\.(scss|css)$/, use: [ {loader: 'style-loader'}, {loader: 'css-loader'}, {loader: 'sass-loader'}, ], } <style> !!" !$style> bundle.js
30. 31 JS Modules Loaders bundle.js
31. 32 JS Modules Loaders { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options: { presets:[ '@babel/env', '@babel/preset-react' ] } } bundle.js
32. 33 JS Modules Loaders bundle.js
33. 34 JS Modules Loaders { test: /\.(eot|woff|woff2|ttf|svg)$/, use: [ { loader: 'url-loader' } ] } bundle.js
34. 35 JS Modules Loaders { test: /\.(eot|woff|woff2|ttf|svg)$/, use: [ { loader: 'url-loader' } ] } bundle.js
35. 36 JS Modules Loaders bundle.js
36. 37 JS Modules Loaders { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] } bundle.js
37. 38 JS Modules Loaders dist { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] } bundle.js
38. 39 JS Modules Loaders dist
39. BREAKDOWN
40. BREAKDOWN: module.exports = { entry: './src/js/app.js', module: { rules: [ {!!"}, {!!"}, {!!"}, {!!"} ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] };
41. BREAKDOWN: module.exports = { entry: './src/js/app.js', module: { rules: [ {!!"}, {!!"}, {!!"}, {!!"} ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; ENTRY
42. BREAKDOWN: module.exports = { entry: './src/js/app.js', module: { rules: [ {!!"}, {!!"}, {!!"}, {!!"} ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; OUTPUT
43. BREAKDOWN: module.exports = { entry: './src/js/app.js', module: { rules: [ {!!"}, {!!"}, {!!"}, {!!"} ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; WEBPACK DEV SEVER $ npm install webpack-dev-server --save-dev
44. BREAKDOWN: module.exports = { entry: './src/js/app.js', module: { rules: [ {!!"}, {!!"}, {!!"}, {!!"} ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; PLUGINS
45. BREAKDOWN: module.exports = { entry: './src/js/app.js', module: { rules: [ {!!"}, {!!"}, {!!"}, {!!"} ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; PLUGINS entryOption run watchRun beforeCompile compile done Compilation Lifecycle
46. BREAKDOWN: module.exports = { entry: './src/js/app.js', module: { rules: [ {!!"}, {!!"}, {!!"}, {!!"} ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; PLUGINS class ExampleWebpackPlugin { apply(compiler) { compiler.hooks.emit.tapAsync('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); compiler.hooks.run.tap('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); compiler.hooks.done.tapAsync('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); } }
47. BREAKDOWN: module.exports = { entry: './src/js/app.js', module: { rules: [ {!!"}, {!!"}, {!!"}, {!!"} ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; PLUGINS class ExampleWebpackPlugin { apply(compiler) { compiler.hooks.emit.tapAsync('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); compiler.hooks.run.tap('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); compiler.hooks.done.tapAsync('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); } }
48. BREAKDOWN: module.exports = { entry: './src/js/app.js', module: { rules: [ {!!"}, {!!"}, {!!"}, {!!"} ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; PLUGINS class ExampleWebpackPlugin { apply(compiler) { compiler.hooks.emit.tapAsync('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); compiler.hooks.run.tap('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); compiler.hooks.done.tapAsync('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); } }
49. BREAKDOWN: module.exports = { entry: './src/js/app.js', module: { rules: [ {!!"}, {!!"}, {!!"}, {!!"} ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; PLUGINS class ExampleWebpackPlugin { apply(compiler) { compiler.hooks.emit.tapAsync(‘ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); compiler.hooks.run.tap('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); compiler.hooks.done.tapAsync('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); } }
50. BREAKDOWN: module.exports = { entry: './src/js/app.js', module: { rules: [ {!!"}, {!!"}, {!!"}, {!!"} ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; PLUGINS class ExampleWebpackPlugin { apply(compiler) { compiler.hooks.emit.tapAsync('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); compiler.hooks.run.tap('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); compiler.hooks.done.tapAsync('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); } }
51. BREAKDOWN: module.exports = { entry: './src/js/app.js', module: { rules: [ {!!"}, {!!"}, {!!"}, {!!"} ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; PLUGINS class ExampleWebpackPlugin { apply(compiler) { compiler.hooks.emit.tapAsync('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); compiler.hooks.run.tap('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); compiler.hooks.done.tapAsync('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); } }
52. BREAKDOWN: module.exports = { entry: './src/js/app.js', module: { rules: [ {!!"}, {!!"}, {!!"}, {!!"} ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; PLUGINS class ExampleWebpackPlugin { apply(compiler) { compiler.hooks.emit.tapAsync('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); compiler.hooks.run.tap('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); compiler.hooks.done.tapAsync('ExampleWebpackPlugin', (!!") !% { !& some code gets executed!!" }); } }
53. BREAKDOWN: module.exports = { entry: './src/js/app.js', module: { rules: [ {!!"}, {!!"}, {!!"}, {!!"} ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; PLUGINS
54. BREAKDOWN: module.exports = { entry: './src/js/app.js', module: { rules: [ {!!"}, {!!"}, {!!"}, {!!"} ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; PLUGINS !& app.js !!" render( <App!', document.getElementById('root') );
55. BREAKDOWN: module.exports = { entry: './src/js/app.js', module: { rules: [ {!!"}, {!!"}, {!!"}, {!!"} ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; PLUGINS !& app.js !!" render( <App!', document.getElementById('root') );
56. BREAKDOWN: module.exports = { entry: './src/js/app.js', module: { rules: [ {!!"}, {!!"}, {!!"}, {!!"} ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; PLUGINS !!!( src/index.html !!) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> !$head> <body> <div id="root">!$div> !$body> !$html> !& app.js !!" render( <App!', document.getElementById('root') );
57. GOOD PRACTICE ▸ Keep build system up-to-dated ▸ Configuration files are not programs ▸ Separate configurations by environment ▸ DRY can hurt you, use webpack-merge wisely ▸ Keep configurations together ▸ Get rid of .babelrc ▸ Avoid configurations in npm scripts if possible: webpack !*hot !*progress !*mode development !*config webpack.dev.js
58. NOTABLE PLUGINS ▸ Case Sensitive Paths
59. NOTABLE PLUGINS ▸ Case Sensitive Paths !& src/components/header.js import Header from './components/Header'
60. NOTABLE PLUGINS ▸ Case Sensitive Paths !& src/components/header.js import Header from './components/Header'
61. NOTABLE PLUGINS ▸ Case Sensitive Paths var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); var webpackConfig = { plugins: [ new CaseSensitivePathsPlugin() !& other plugins !!" ] !& other webpack config !!" } !& src/components/header.js import Header from './components/Header'
62. NOTABLE PLUGINS ▸ Case Sensitive Paths ▸ Webpack Deadcode Plugin
63. NOTABLE PLUGINS ▸ Case Sensitive Paths ▸ Webpack Deadcode Plugin
64. PERFORMANCE
65. PERFORMANCE Default configuration
66. PERFORMANCE Default configuration optimization
67. MEASURE ▸ cloc
68. MEASURE: 69 SPEED MEASURE PLUGIN $ npm install speed-measure-webpack-plugin --save-dev
69. MEASURE: 70 SPEED MEASURE PLUGIN $ npm install speed-measure-webpack-plugin --save-dev const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); const smp = new SpeedMeasurePlugin(); const webpackConfig = smp.wrap({ !!" });
70. SPEED TIPS ▸ Avoid anything that has the word “minimize” ▸ Use ‘style-loader’ ▸ Split node_modules into a vendor bundle(splitChunks) ▸ Use Hot Module Replacement(HMR)
71. $ npm install react-hot-loader
72. import { hot } from 'react-hot-loader/root'; const App = !+ !, export default hot(App);
73. MEASURE: 74 SIZE "package": "webpack !*config webpack.production.js"
74. MEASURE: 75 SIZE "package": "webpack !*config webpack.production.js", "package:profile": "webpack !*config webpack.production.js !*profile !*json > stats.json", stats.json $ npm run package:profile
75. https://webpack.js.org/guides/code-splitting/#bundle-analysis
76. http://webpack.github.io/analyse
77. https://chrisbateman.github.io/webpack-visualizer
78. CODE SPLITTING
79. https://github.com/jamiebuilds/react-loadable
80. https://github.com/jamiebuilds/react-loadable
81. const App = import('./App'); import App from './App';
82. https://github.com/jamiebuilds/react-loadable
85. REFERENCES ▸ Webpack Documentation ▸ SurviveJS: Webpack
86. Q/A ▸ @initFabian