
Vue.js and Brunch: Webpack Alternative - sandGorgon
https://vuejsdevelopers.com/2017/08/20/vue-js-brunch/?jsdojo_id=reddit_vpb
======
dingle_thunk
Great ideas. It seems like this sort of 'sane defaults' functionality could
easily be added to future versions of webpack, and that might really help with
adoption... rather than this community endlessly switching tool chains.

~~~
alexlrobertson
I'm surprised we haven't seen config packages for webpack take off along the
lines of the configs in the ESLint community. There's nothing stopping anyone
from publishing an extensible base config.

~~~
antjanus
There IS an abstraction on top of Webpack called "terse webpack":

[https://github.com/ericclemmons/terse-
webpack](https://github.com/ericclemmons/terse-webpack)

It seems to have presets for sane defaults on the roadmap.

~~~
ericclemmons
I'm redoing that whole stack, as it was a prototype to get buy-in to "fix" the
Webpack API for most cases.

For an eslint-style plugin system I'd recommend webpack-blocks.

------
mikewhy
I loved Brunch back a few years ago. But I wasn't happy with how plugins
worked, or their "all files get included in your bundle even if you never
required them".

So I built my own build system on top of Gulp, and added a set of tasks using
browserify for web apps ([https://github.com/BraveNewWorldDev/parched-example-
app](https://github.com/BraveNewWorldDev/parched-example-app)). It's heavily
"convention over configuration", like "npm install parched-babel" is all you
need to get Babel integrated.

I'm still using it in production on websites, Cordova apps, and Electron apps,
but I'd still recommend webpack nowadays since that's where the community is.

~~~
bfred_it
Oh boy I just finished moving my old gulp+browserify(+sass+postcss) config to
webpack. It was a bunch of custom nonsense.

In return I got a faster build, 20% lighter output and a lot more information
(webpack shows size, etc)

------
TekMol
Do you guys use any public websites that are based Vue, React or alike?

Everytime I search for sites that use frameworks like Vue or React, I came up
with mostly empty hands. Except for example pages or pages by coders for
coders. Or pages that "use" one of the frameworks but seem to make no use at
all of the functionality.

When I ask around people usually tell me "Well, at my company we make a
dashboard for another company and it's based on ..."

Any popular public sites (Aka no login needed to access it. So Facebook
doesn't count.) for non-coders out there that use these frameworks?

~~~
abledon
Just install the React Developer Tool extension on chrome:
[https://chrome.google.com/webstore/detail/react-developer-
to...](https://chrome.google.com/webstore/detail/react-developer-
tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)

It will light up whenever you are navigating a page built w/ React. Plus, you
can dig around and see how they structured it.

Some times you get funny surprises, like how the Microsoft node js page was
using React, but they had deployed a Development build instead of a Production
build.

~~~
tym0
Isn't it Slack that deploys a Dev build because "it's easier to debug people's
problems this way"?

------
timdorr
Brunch has a good "vs Webpack" section in their docs:
[http://brunch.io/docs/why-brunch#brunch-vs-
webpack](http://brunch.io/docs/why-brunch#brunch-vs-webpack)

Some of the big table stakes features that Brunch is missing are code
splitting and handling of binary assets (allowing things like image inlining).
It also doesn't have true hot module reloading, which is a pretty useful dev
feature.

~~~
christilut
I can't live without hot module reloading anymore.. With my Vue projects (no
idea if React does it like this too) I can update my code and it only reloads
either CSS, JS or HTML and it completely maintains state. Textfields maintain
their content while I edit their CSS, just great.

Wasn't long ago that auto reload on file change was a fancy feature...

------
hhandoko
I looked into Vue + Webpack vs Vue + Brunch on my last project. I ended up
with Brunch because the requirements are fairly basic and Brunch are easier to
grok. Had the requirements be a little bit more complex, I could have easily
gone for Webpack.

IMO, there are a few key things lacking with the Vue + Brunch combo:

\- The `vue-brunch` plugin seems to be no longer in active development?
([https://github.com/theocodes/vue-brunch](https://github.com/theocodes/vue-
brunch))

\- The `sass-loader` plugin allows me to use Sass dialect in SFC-style Vue
(Single File Component). I'm using plain CSS with Vue + Brunch SFC as I cannot
find a Brunch plugin offering similar functionality.

\- There are some Brunch idiosyncracies. For one, the processing pipeline is
executed as per `package.json` (dev)Dependencies ordering. I spent quite a bit
of time before figuring this out.

------
aarondf
I really love using Laravel Mix [1], which is a wrapper around webpack. I know
nothing about webpack, because mix makes it easy to just get going on my
actual project instead of futzing about with configuration.

Edit: FYI, Laravel not required.

1\. [https://github.com/JeffreyWay/laravel-
mix/tree/master/docs#r...](https://github.com/JeffreyWay/laravel-
mix/tree/master/docs#readme)

~~~
dabernathy89
Agreed - Laravel Mix makes it absurdly easy to get started with Webpack, while
still getting a lot of power out of it. And you can use it in anything: a
mostly server-side app (like a typical Laravel project, where Mix originated),
a complex SPA, or even a WordPress theme (which I found myself doing over the
weekend).

------
pselbert
Years ago when Phoenix was adding JS support I lobbied Chris McCord to go with
Webpack. He took a lengthy look at the setup/configuration process for all of
the popular build tools and ended up choosing Brunch. For most tasks it is a
great choice, and an excellent default for a "batteries included" web
framework.

------
petepete
I've been writing a Brunch/Vue.js app for the last few months and, for a
relative newcomer to JavaScript frameworks, Brunch was _far_ easier to get up
and running with than Webpack. I spent a couple of days failing to get things
working the way I wanted with Webpack and after discovering Brunch I was
productive within half an hour.

My `brunch-config.js` is about 30 lines long and everything works as I'd
expect.

------
hardwaresofton
If you're looking for alternatives to Webpack, please also check out JSPM (a
good short description might be "preprocessing system + package manager +
systemjs"):

[https://jspm.io/](https://jspm.io/)

It takes a little more to get it to work with vue (the plugin that makes .vue
files work is older and unsupported nowadays), but I use it just fine, with my
template, styling and component files separated (I wrote a little thing:
[https://gitlab.com/mrman/systemjs-plugin-vue-template-
compil...](https://gitlab.com/mrman/systemjs-plugin-vue-template-
compiler#readme))

If you dislike how complex webpack is, you'll like JSPM -- here's the video
that got me hooked (it's pretty old but still valid):
[https://www.youtube.com/watch?v=iukBMY4apvI](https://www.youtube.com/watch?v=iukBMY4apvI)

~~~
aweiland
Rollup looks pretty good too. It's on my list to play with.

[https://rollupjs.org/](https://rollupjs.org/)

~~~
kevmo314
Rollup and webpack serve two somewhat different purposes:
[https://medium.com/webpack/webpack-and-rollup-the-same-
but-d...](https://medium.com/webpack/webpack-and-rollup-the-same-but-
different-a41ad427058c)

------
MOdMac
This does look nice but we can solve the configuration difficulty of Webpack
without switching tools. Webpack should be the standard we all get behind
until there is a tool that offers significant improvements, not just being
easier to use.

We are using an internal NPM package for common Webpack settings similar to
the JetBrains library [1]. With that setup, our Webpack configs are much
easier to use. There are other libraries like webpack-config [2] that give you
a fluent api and allow common configs to be extended.

[1] [https://github.com/JetBrains/ring-ui](https://github.com/JetBrains/ring-
ui) [2] [https://www.npmjs.com/package/webpack-
config](https://www.npmjs.com/package/webpack-config)

------
zackify
How can you use this for any real production apps over webpack when it doesn't
even support code splitting. This is nice for bootstrapping projects, or using
just a little JS on certain pages. Otherwise I don't see how you could use it
in an all JS app

~~~
rosylamp
in the first paragraph the author addresses this directly. The author suggests
this may be suitable for smaller projects

> Webpack is a crucial tool for building sophisticated, highly optimized web
> applications, and is encouraged by many influential web developers.

However, for newer developers, or those working on less ambitious projects,
Webpack mostly occurs as a barrier

------
Shorel
Do we still need Webpack when all connections can use HTTP/2 and TLS thanks to
LetsEncrypt ?

~~~
BrandoElFollito
You need webpack to actually use a Vue component (template + script + CSS).

~~~
dabernathy89
You can use Browserify or Rollup too.

[https://github.com/vuejs/vueify](https://github.com/vuejs/vueify)

[https://github.com/vuejs/rollup-plugin-vue](https://github.com/vuejs/rollup-
plugin-vue)

~~~
BrandoElFollito
Yes, I meant that the OP comment missed a large chunk of webpack use cases,
such as compilation of components.

------
agnivade
I thought the vue-cli([https://github.com/vuejs/vue-
cli](https://github.com/vuejs/vue-cli)) tool did a pretty good job of creating
sane webpack configurations by asking just a few basic questions.

------
patleeman
For those new to Vue, Vue-CLI + templates have all the webpack configuration
set up already for you. This makes setting up a Vue project very quick and
simple.

[https://github.com/vuejs/vue-cli](https://github.com/vuejs/vue-cli)
[https://github.com/vuejs-templates](https://github.com/vuejs-templates)

------
thex10
Similar to Brunch but more opinionated is Jus.
[http://jus.js.org/](http://jus.js.org/) I really enjoyed using it, but alas I
wanted a different Markdown loader (theirs is based off Github markdown, which
doesn't support footnotes), so I switched to Metalsmith. But Jus and Brunch
and the like are great options.

------
marcofatica
not sure if i did something wrong, but i cloned the app and ran the build and
there's over 7500 lines of boilerplate included before the 'main.js' import in
public/app.js. what is going on?

------
jstewartmobile
How long can we keep adding to the tower of javascript shitware before it
falls over? Honestly I thought it would have fallen over a long time ago.

Just looking at long chains of mystery-meat that npm imports, and the time it
takes Babel to compile the simplest of projects make me just want to say the
hell with it all and do everything as GET/POST.

~~~
VectorLock
I wonder the same thing myself. Occasionally I look into these frameworks to
see if they really add anything to the development of complex web applications
vs. the amount of work they take to integrate them and it always heavily seems
like a waste of time.

~~~
omg_ketchup
VueJS absolutely adds to the development of complex applications, and takes
almost no time to set up.

Webpack... not so much. I've spent days fighting with webpack over nonsense.

~~~
jstewartmobile
I tried Vue because someone said the Chinese like it since they can use it
without npm (great firewall & such), but everyone including Evan You stresses
webpack and npm!

I've been successfully rolling it as an SPA without node/npm/webpack so far,
but I'm wondering when the other boot is about to drop.

------
bricss
Webpack is a new Grunt, if we talking about configuration.

