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 fucking idea 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:

  1. People make offer to write documentations. Appreciate their work!
  2. "YouTube development"
  3. Search for real-life examples
  4. Write a blog post?
  5. 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 hell do 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

Made with Slides.com