18 ms·
A simple webpack starter without a framework
- DiThi 9y agoI 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 9y agoExpress (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 9y agoI 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 9y agoThere 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_ 9y agoIt 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 9y agomy 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.
- deleted 9y ago[deleted]
- Klathmon 9y agoThey do have packages for that, several, but they all don't work in all cases. Some tend to be fairly custom, so they do it themselves. Ours for example serves several apps in the same repo, with both HTTPS and HTTP, including some hot reload middleware and integration with our CDN for some live assets in development. As for "why we have left-pad but not this", anyone can make a package. If you want to make a `uselessjs` package that does literally nothing, you can.
- SinanMtl 9y agoLike I said in README. Bootstrap and depended javascript frameworks like jquery. Also, express.js is using to only development process. You can see dependencies in project.json. I meant "without frameworks" Vue, Angular and React-like frameworks.
- TAForObvReasons 9y agoFor those not familiar with NPM or package.json specs, the "devDependencies" are generally intended for development only and are not included when you do a standard `npm install` or add it as a dependency of your own project. This starter actually has 5 dependencies: bootstrap, jquery, lodash, object.observe, and popper.js
- jessaustin 9y agoAt the very least, one might say that those dependencies lock one into a quite particular style of coding... not a "framework" but not far from one.
- wolco 9y agoJust use jquery. In a few years jquery will be rediscovered and praised all over again.
- oneweekwonder 9y ago$, _, backbone what more do you need? :D
- baruchvelez 9y agoA gun to kill myself.
- sbr464 9y agoWhiskey
- oneweekwonder 9y agoWhat? was the grunt, gulp and pack not enough yet? ps. I use closure-compiler and some py scripts... I hope ur running!
- code_chimp 9y agoMarionette.js?
- oneweekwonder 9y agoThanks for the headsup. I will look into backbone.radio but mn being 50k loc makes it hard for me to consume.
- acemarke 9y agoYeah, if you _are_ still using Backbone, then Marionette is a must-have. I can also recommend Ampersand.State as a vastly improved version of Backbone.Model, and Epoxy.js for data binding. That said, an even better answer is to start using React for your views instead. I wrote a post about how we started adding React and Redux into our existing Backbone codebase, incrementally: http://blog.isquaredsoftware.com/2017/07/react-redux-backbone-integration/ http://blog.isquaredsoftware.com/2017/07/react-redux-backbon... .
- antjanus 9y agoI 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 9y agoWhy does it have both webpack and rollup? Can't they both be configured to do the same thing? Why the duplication?
- 52-6F-62 9y agoYes 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 9y agoThey both have different use-cases. Webpack makes more sense on the front-end for bundling web apps but it sucks for bundling libraries.
- antjanus 9y agoso you can choose which one you want. I use both. Webpack is great for front-end apps. Rollup is way better for bundling libraries.
- pygy_ 9y agoIt would be great if you could add some docs here, detailing the motivation and how to best take advantage of what you're bundling.
- andrew_ 9y agoI'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 9y agoNo, I have not used the webpack-dev-server before, but I will try. Thank you :)
- amnah 9y agoNot 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.0 https://github.com/vuejs-templates/webpack/releases/tag/1.2....
- SinanMtl 9y agoI'm looked at previous version. So I'm not awared.
- johndoe489 9y agoInteresting 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.
- chvid 9y agoI 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.
- superasn 9y agoThanks. 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.