Configure with Responsibility
@ HackSoft Conf 2017
Martin Angelov
What are we going to talk about?
- Why did I decide to make this presentation?
- What is Webpack?
- Configure it
- My first webapck configuration - Demo
Why did I decide to make this presentation?
- How many times have you just copy-pasted something from a documentation?
- How many times have you left such pieces of code in your project without really knowing what they exactly do?
- Do you have some dot-files in your project that you have no
fuckingidea what they are used for? -
Why?
This means:
"Bro, go drink a beer ;)"
What is the biggest deal?
“All for one and one for all.”
- Alexandre Dumas, The Three Musketeers
After this presentation, please:
- Go through your projects and check its configurations.
- Try to understand the things you don't know (Google, mate).
- Never leave anything in your project without really knowing it.
- Write better configurations ->
Steps to better configuration:
- People make offer to write documentations. Appreciate their work!
- "YouTube development"
- Search for real-life examples
- Write a blog post?
- Make a presentation?
Everything is configurable
- linters
- tests
- editors
- third-party apps
- servers
- front-end
- etc.
Everything is configurable
but do it with responsibility
- linters
- tests
- editors
- third-party apps
- etc.
- servers
- front-end
Let's configure something at least...
Webpack
What is Webpack?
- It's a module bundler.
- Core concept - dependency graph
-
Why
the helldo I need it?
Dependency graph
- No more strict ordering of <script> tags
- Use require()
<script src="jquery.min.js"></script>
<script src = "jquery.debug.js"></script>
<script src="main.js"></script>var path = require('path');
Things I didn't know:
- dependency graph
- npm
- package.json
- babel
- building UI
- JS
Things I've learned about:
- dependency graph
- npm
- package.json
- babel
- building UI
- JS
*And that is the best part learning one thing - you learn a lot more every time!
What about Webpack configuration?
4 main properties
- entry
- output
- loaders
- plugins
of the webpack config object
Entry
is used to define which is/are the main file/files of you application.
entry: [
'babel-polyfill',
'./path/to/index.jsx'
]
entry: [
'./path/to/ComponentA.jsx',
'./path/to/ComponentB.jsx',
'./path/to/ComponentC.jsx'
]
TC-acquire
TC-colab
Output
is used to define where you want you app to be bundled. You can specify several files buy in most cases you will give just one file:
output: {
path: configDirs.BUILD_DIR,
filename: 'bundle.js',
publicPath: '/'
},output: {
filename: config.DIST_DIR + '/react/[name].js',
sourceMapFilename: config.DIST_DIR + '/react/[name].js.map'
},TC-acquire
TC-colab
Loaders
- are capable of transforming non-JS files into valid JS
- They replace require() with URL string
- put the static assets (like images) in the dist/ folder
- are responsible to the transformed files into the dependency graph
- are so important because Webapck understands only JS
Common Loaders
- style-loader + css-loader
- babel-loader
- file-loader
- url-loader
Plugins
are used to perform some custom actions on your bundled modules. As loaders, they have to be installed in you node_modules/ in order to be used.
Common Plugins
- HtmlWebpackPlugin
- LiveReloadPlugin
- webpack.optimize.UglifyJsPlugin
*One I found really useful -> webpack.EnvironmentPlugin
That's pretty much everything you need to know to configure your own Webpack...
To be honest ...
- Awful documentation
- Awful source code
- Awful for configuring the first time
- Maintained mostly by one person
Webapck is not that perfect
Alternatives
- Gulp/Grunt
- No dependency graph :(
- Browserify
- + Parcelify
Once Webpack, always Webpack
Example
Thank you!
Q&A
Configure smarter
By Martin Angelov
Configure smarter
HackSoft Conf 2017
