
A simple webpack starter without a framework - SinanMtl
https://github.com/SinanMtl/webpack-simple-starter
======
chvid
I recently went thru the exercise of creating a "starter" for a frontend
project; and I guess everyone has got their own way of doing things.

To be frank I don't consider your approach "simple"; just look at the number
of build and configuration files you got or the number of dependencies in
package.json.

IMHO a good starting point is one that you add to. Not one that you subtract
from.

------
DiThi
I wouldn't say it's "simple" and "without framework". It comes with jQuery,
bootstrap, popper.js, and for some reason it has a lot of dependencies
including "express" which is only for servers.

~~~
Klathmon
Express (and probably others) are for the build system. It's used to serve the
development mode application locally during development.

That's (part of the reason) why they are installed under devDependencies.

~~~
DiThi
I see, it has a "dev-server.js". Why is that not a package? We have super
simple functionality like "left pad" but not complex dev servers as a package?
What if it breaks? Do I need to update the template?

~~~
sciolistse
There are dev server packages for webpack
([https://webpack.github.io/docs/webpack-dev-
server.html](https://webpack.github.io/docs/webpack-dev-server.html)). I can't
tell you why it's not used in this specific project.

~~~
andrew_
It should be noted that those are the "old and busted" docs.
[https://webpack.js.org/configuration/dev-
server/#devserver](https://webpack.js.org/configuration/dev-server/#devserver)
is the place to visit these days.

~~~
sciolistse
my bad, i make that mistake all the time. doesn't help that searching for
webpack documentation always turns up the bad results first!

Thanks for the correction.

~~~
Klathmon
If you use Google, there are plugins which can hide certain domains from
search results.

I use to hide the old docs domain.

------
andrew_
I'm the primary maintainer for webpack-dev-server, and I was curious around
the choice to roll your own dev-server.js, versus using webpack-dev-server. If
there were shortcomings or things lacking, perhaps we can use that info to
improve the module.

~~~
SinanMtl
No, I have not used the webpack-dev-server before, but I will try. Thank you
:)

~~~
amnah
Not sure if you're aware, but the vue-webpack template actually switched over
to webpack-dev-server just last week

[https://github.com/vuejs-
templates/webpack/releases/tag/1.2....](https://github.com/vuejs-
templates/webpack/releases/tag/1.2.0)

~~~
SinanMtl
I'm looked at previous version. So I'm not awared.

------
johndoe489
Interesting thanks.

Is there an example in there of how you'd go about to create a basic bundle
with the css/js frameworks, and then create additional bundles which depend on
the first one, but do not include it?

It's an issue I need to solve now in a legacy app which already had a bundle
for one area of the site, and another for another area. I need the same in
Webpack, but I don't know how to declare the dependency on a common "root"
bundle in webpack.

------
antjanus
I built a similar starter kit that inludes both Webpack and Rollup.
[https://github.com/asteridux/asteridux](https://github.com/asteridux/asteridux)
it's definitely much simpler and bare-bones so it might not be for everyone.

~~~
cprecioso
Why does it have both webpack and rollup? Can't they both be configured to do
the same thing? Why the duplication?

~~~
52-6F-62
Yes they can. I can't speak for the offer, but I've used both in some
testing/research environments.

It's worth noting that they way Webpack will parse classes with any "standard"
build process will corrupt WebComponents custom element constructors. Rollup
performs well here.

Of course maybe there's a more enlightened method to work with Webpack and
WebComponents, but I don't know it.

So I have included both in one of my project-init scripts to run back-and-
forth tests and see which performs better for the feature at hand. It's then
pretty easy to remove one as a dependency once decided.

~~~
antjanus
They both have different use-cases. Webpack makes more sense on the front-end
for bundling web apps but it sucks for bundling libraries.

------
wolco
Just use jquery. In a few years jquery will be rediscovered and praised all
over again.

~~~
rtpg
There's a lot of jquery code out there that's basically lines and lines of for
loops to maintain a state machine. Stuff that all these nice frameworks handle
for you in a clean, bug-free way.

Almost every day of the year,

    
    
       <div id='business-class' ng-class="{selected:seatType=='business'}">
         Business Class
       </div>
    

feels better to me than:

    
    
        $('#seat_type').on('change', function(){
         if(this.value == 'business'){ 
             $('#business-class').addClass('selected');
         } else {
             $('#business-class').removeClass('selected');
         }
        });
    

There are other considerations, angular/React aren't the only solutions to
this... but having _something_ to handle this sort of stuff cleanly and
generally is a no-brainer to me.

jQuery's an amazing tool at the low level, but there are some higher-layer
stuff we can easily apply to manage state.

~~~
rimliu

       $('#business-class').toglleClass('selected', this.value === 'business');
    

And $('#business-class') should be in a var.

~~~
rtpg
this is indeed a cleaner example.

I think if you are diligent about your layout, you can separate out your DOM
operations from your logic operations (think Flux) and end up with nice and
simple code like this.

Personally I like the "rails" given to me in Angular/React (especially given I
know how to circumvent them). I also am more productive in them. But I bet a
lot of skilled programmers can go far with just simple tools like jQuery.

At least for me, having a paradigm enforced is useful, especially on larger
projects with multiple stakeholders.

------
superasn
Thanks. Even if I don't use this directly there is a lot to learn from this
project, like one thing I just learnt right now is how to create a vendor.js
file without explicitly specifying it in an array.

