If you’ve ever configured Parcel, Webpack will blow your mind! (duh…)

3 min readMar 25, 2018

And how to never configure Webpack repetitively, ever again

Here we will talk about how Webpack should feel like, with a project using Vue, SASS, Postcss. ZERO-CONFIG

‘zero-config’ on webpack LOL?

Yes everyone knows ‘zero config’ is just a joke in Webpack 4, since once you need to use more extensions like SCSS, PNG, JSX, you will still need a webpack.config.js .

But that is because Webpack is giving way too much flexibility. I mean who have even ever imported SCSS / SASS without sass-loader, or PNG / JPG without url-loader?

Using Webpack (the right way): See for yourself

What if we have been using it the wrong way? Let me show you something.

1 — File Structure

.
├── package.json
├── src
│   ├── App.vue
│   └── index.js
└── clipped.config.jsclipped.config.js

Everything seems pretty straight-forward here, package.json for npm dependencies, src for project code, …wait what the heck is the clipped thing?

2 — Installing Clipped and Pug and Vue

Run below command to install dependencies:

npm init -y
npm i -g clipped && npm i -d @clipped/preset-webpack4-frontend pug && npm i vue
echo "module.exports = clipped => clipped.use(require('@clipped/preset-webpack4-frontend')" > clipped.config.js

That’s it. Now pug, vue, css, images, postcss are handled, even the autoprefixer. So starting from here you are not configuring anything

3 — Some content

Inside index.js , paste in:

import Vue from 'vue'import './styles.sass'
import App from './App.vue'new Vue({
  render () {
    return (
      <App /> // Sexy jsx
    )
  }
}).$mount('#root')

Obviously we are going to show off that the JSX, vue, sass works, so in App.vue , paste the following content:

<template lang="pug">
div
  h1( class="header" ) {{value}}
  button( @click="addCounter" ) +
</template><script>
export default {
  data: () => ({
    value: 102
  }),
  methods: {
    addCounter () {
      this.value++
    }
  }
}
</script>

And in styles.sass, maybe just a highlighter:

.header
  color: red

To get autoprefixer to work? We don’t need to do anything. To get babel to work? we don’t need to to anything as well.

4 — Fire up

We are going to need npm scripts to fire up the server… or do we?

NODE_ENV=development clipped dev

🎉🎉 Just open localhost:8080 to see the magic!

Conclusion

As you might see, the setup is really no different or even less than Parcel. The point is, Webpack can be very easy to use without losing any flexibility, if used the right way.

I do love Parcel, and was one of the first 100 stargazers for Parcel. But I think promoting ‘zero-config’ is just boasting how much you abstract the setup, which sacrifices flexibility.