A CLI tool for generating production webpack web apps with necessary boilerplate.
npm install -g atlas-webpack-init
As awesome as webpack4 is, it still requires boilerplate if you're trying to create production-ready webapps. There are tasks like minifying, gzipping and content-hashing that I would rather not think about every single time I want to make a new HTML widget. For small-medium apps, this stuff is pretty much the same 99% of the time.
ES6/babel-transpiling is already configured. If you need more features, edit the
.babelrc and install any new babel plugins. Provides a hot-reload dev-server and hot-reload test runner. Bootstrap test file already imports what you need from
chai. HTML/CSS/JS minification, stylesheet aggregation, content-hashed filenames, and gzipping are already configured for you. Provides static local server for your bundle. If you're building an app with webpack4, chances are it will start out looking like a lot like this. You can easily modify and extend this to fit your own needs as your project grows. There are no dependencies, only a few absolutely necessary dev-dependencies.
using the cli tool
You can specify a name, description, author and
index.html title. At least one field is required, the rest are optional:
webpack-init -n my-app -d "my description" -a "atlassubbed <email@example.com>" -t "Page Title"
If you don't specify any args, you will be prompted to enter the name, description, author and
index.html title. In this case, all responses are optional. If you don't specify a name, it will default to "webpack-app":
specifying an author
If you specify a full author (with a name and email), the generator will automatically initialize a repository and perform an initial commit.
the generated project
webpack-app/ src/ index.html index.js test/ index.test.js .babelrc .gitignore LICENSE.md README.md package.json webpack.common.js webpack.dev.js webpack.prod.js
You'll be provided with five scripts to simplify your workflow:
npm run test-server: pretty mocha test output to CLI with hot-rerun.
npm test: pretty mocha test output to CLI.
npm run dev-server: run your app at localhost:8080 with hot-reload.
npm start: build and serve production app at localhost:3030.
npm run build: builds fully minified, gzipped app in dist/ folder.
Once you've generated
my-app, all you need to do is:
cd my-app npm install
I'd like to have a global executable called
atlas which has the following sub-commands:
npm: generates a minimal npm starter app.
webpack: generates a minimal webpack starter app.
repo: automatically sync your project to github or fork/clone existing projects.
: Not needed, thanks to
As of right now, the
atlas command only has subcommands 3 and 4 above.
altas-webpack-init (this package) are their own commands, but I'd like to turn them into 1 and 2 above, respectively. The
atlas command should then be responsible for initializing pretty much everything in a new project.
React is not assumed, it only takes a minute to install
react and the associated babel plugins.
LICENSE.md defaults to MIT. Currently, there's no option to change it from the CLI. Changing it manually would simply require editing a line in
package.json and editing the
LICENSE.md file itself.
By default, packages will be private -- be sure to delete that line if you plan on publishing your generated package.
When I was writing this package, I included
sinon-chai, but I removed them because I found myself not using them in my tests.
sinon is great, but why don't I use it? Spying, stubbing and mocking is pretty easy without it.
Currently, the generator will automatically initialize a repo and make the first commit if you specify a full author. There's no way to turn this off right now. I understand that this can be undesirable, but I always needed these steps, so I figured it would just be a default.