The purpose of this repository is to give myself a starting point for creating new front-end repos. I wanted a fast, simple way to get myself up-and-running with Webpack, ES6, SCSS, React, Redux, etc.
There are plenty of great tools already that do this (like create-react-app).
The reason I'm building my own, and the only advantages that my tool will have over other tools, is:
- It's a good excuse for me to get more experience with Webpack.
- I can tweak the configuration of this repo to fit my exact needs.
- This repo will only include what I think I need for my projects (fewer moving parts).
- I'll understand all of the "parts" of this repo, and can comment it to my heart's content.
Obviously, anyone else is free to use this, but you may get better mileage with one of the more widely-used tools.
npm run build- Compiles the JavaScript, CSS, etc, and outputs the result to dist/bundle.js
npm run watch- Does the same as
npm run build, but will watch files and update automatically if there are changes
- Does the same as
npm run webpack-dev-server- Very similar to
npm run watch, but serves the results at http://localhost:8080/webpack-dev-server/ - Note that the link above will auto-update whenever you make changes to your app.
- Also note that this makes changes in-memory.
- In other words, you will not see the changes outside of the dev website unless you run
npm run build
- In other words, you will not see the changes outside of the dev website unless you run
- http://localhost:8080/webpack-dev-server/ will also tell you if you have any lint errors or warnings.
- In my opinion, this is best/fastest when you are doing ongoing development.
- Very similar to
- ES6
- React / JSX
- ESLint errors
- Sourcemaps (allows you to see any errors/log messages as if they were coming from JSX directly, instead of from bundle.js)
- SCSS compilation
- Importing SCSS modules inline in your JavaScript code! (See js/App.jsx for an example)
- The sourcemaps point to the .jsx file (not bundle.js)
- ESLint warning shows up at the top of the page
- The SCSS file is required inline in App.jsx, and everything just works!
- Webpack is awesome! I can't believe I didn't explore it sooner.