Does the vue webpack template (via vue-cli) become easier to use later on?

Question

Background

Starting on a new vue.js (2.0) project. I've worked with vue-cli in other projects (vuejs-templates/webpack) and found the build process difficult to grasp when doing any kind of changes. On top of that, webpack is infamous for its lacking documentation, therefore it turned out to be a lot of work even to achieve minor tweaks to the build process. In general, I believe I understand both webpack and vue-loader. I'm still having a hard time getting the full picture of vuejs-templates/webpack though.

Question

I'm considering rolling my own webpack config for this app, but I'm concerned I'll eventually end up with a build process as big as the current vuejs-templates/webpack. My plan was to work my way up from vuejs-templates/webpack-simple and not overcomplicate things too much. What I have in mind is a config / build process situated somewhere in between vuejs-templates/webpack-simple and vuejs-templates/webpack.

I'm interested to see how others (with perhaps more experience that I have) feel about vuejs-templates/webpack. Wonder if it will just get harder to use as the project grows or if it will all make sense eventually.

Does it make sense to roll my own webpack config / build process or should I just suck it up and use vuejs-templates/webpack?

Answer 1

After about a month of working with Vue, vue-cli & webpack, I figured out the following:

1. Roll-your-own boilerplate

This feels a lot like re-inventing the wheel. There's more than meets the eye: writing up all the config, loaders, picking a folder structure & setting up tests takes a considerable amount of time.

You'll be frequently shifting focus from developing your app to tweaking the build. There will be many small things you need as you develop, but the pain will be considerably reduced by using vue-loader from the start.

To sum up: this is a very big decision & you'll need to be ready to invest a considerable amount of time in it to be fully set up.
If your setup is so custom that you have to roll your own boilerplate, then be sure you'll have to redo a lot of the work that's been done already in templates/webpack. If you must, don't hesitate to get some inspiration from the current templates/webpack boiler, there are some neat tricks that you might want to use in your boiler. You could also start from the simpler webpack template and work your way up from there.

2. Fork templates/webpack

If you plan to redo some of the folder structure and perhaps change some of the core libs, it's a good idea to do your own fork of templates/webpack instead of starting from scratch.

It's not going to be easy at first, but as you begin to comprehend the structure & tools involved you'll realize the initial frustrations were well worth it.

As a bonus, you can install it through vue-cli and easily re-use it for other projects:

vue init username/repo my-project

3. Tweak templates/webpack

Sometimes you won't know in advance how your boilerplate will look like. In that case, I've realized it's fine to start with templates/webpack and do small changes along the way.
In that case, it's going to be hard to move it to it's own repo and install it via vue-cli. My recommendation is to take notes on whatever changes you do to the boilerplate (or add a #hash or smth to those commits).
That way, when you start your next project you can follow approach #2 and use it via vue-cli.

Conclusion

I think many of the issues you'll have with changing templates/webpack are also bound to pop up while doing it from scratch. It's probably because of Webpack's poor documentation (hey, Webpack 2 is looking better!) and the ridiculous amount of tools you need nowadays to build a JavaScript project.

Use templates/webpack and don't look back, the time you'll spent understanding it and vue-loader is waaay below the time you'll spend setting up your own boilerplate.