Share your repls and programming experiences

← Back to all posts
Repl Webpack Boilerplates
eankeen (1387)

repl webpack boilerplates

so a while ago i created some repls that essentially consisted of boilerplate, mostly related to webpack and frontend development. i posted them here in case anyone would find them useful. i created them a while ago, some may contain packages and configuration sort of out of date :P

most people will probably find the vuejs boilerplate repl most useful because repl.it does not have a vue preset yet. it takes a while to start up, but because this is very similar (literally almost exactly the same) compared to what we get from vue-cli-3, it has all the hmr goodness for fast development.

using webpack for a web app

using webpack-dev-middleware with express

using webpack-dev-server directly

a bit faster than using webpack-dev-middleware with express

using webpack-cli

note that clicking 'run' or 'restart' in the repl user interface will not start your app. consequentially, when someone visits the final url, it will not load because the 'run' button does not do anything

using typescript in node

note that if you want a more generic typescript integration, you can select 'typescript' as a 'language' when creating a repl

Commentshotnewtop
MatthewDoan1 (328)

Quick question, did you type this on your phone?

eankeen (1387)

@MatthewDoan1 nope, all these links were in a text file of mine, and it was a simple copy and paste job

if you're asking about the capitalization - and why i would prefer such a format if i am not on a phone - its because i like how it looks :P

MatthewDoan1 (328)

@eankeen Yeah, it was the capitalization thing. I usually see that you don't capitalize the first letter of a sentence or the word "I," and i was curious.

FredrikHarnevik (2)

I get an error when starting this repl:

ValidationError: webpack Dev Server Invalid Options
options.before should be {Function} (https://webpack.js.org/configuration/dev-server/#devserver-before
) at validateOptions (/home/runner/node_modules/schema-utils/src/validateOptions.js:32:11)
at new Server (/home/runner/node_modules/webpac
k-dev-server/lib/Server.js:84:5) at /home/runner/index.js:35:11
at Script.runInContext (vm.js:133:20)
at Object.<anonymous> (/run_dir/interp.js:156:20)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node

eankeen (1387)

@THEJOEMAN23 simplifying a bit, webpack is a build tool that enables you to bundle any source files you have into files that can directly be sent to browser clients. most of these repls are examples how to setup webpack to process your sources files. through webpack-dev-server, you are able to access the final bundle (and the web page, if there is one). for a way better exploration, i would look up 'module bundlers', 'build process', and 'task runners' for more information about this, and similar tools.