Fast builder for your SPA projects.
Easily configure and add webpack modules and style your app without any stress with styled-components
- Installation
- Boilerplate concept
- File location
- Build production
- Aliases
- Used plugins
- The idea behind the example
-
Clone the branch you need
-
cd
to react-starter folder. -
Install webpack dependencies via npm
npm i
or yarnyarn install
. -
Start your web server
yarn start
||npm run start
.
All your webpack modules are in webpack folder. You can easily call the module you need in webpack.config.js
file.
const rules = [babel(), images(), fonts(), anyOtherModule()];
const common = merge([
{
// ...
module: {
rules,
},
}
]);
There are 2 modes you can work with: production
and development
which are declared in package.json
file.
.
├── src/ # App folder with all developer stuff
│ ├── components/ # All components used in the project
│ ├── index.ejs # Used as a html template
│ └── ...
├── webpack/ # Modules you can easily add to config
├── webpack.config.js # All webpack settings
├── prettierrc # Prettier rules to make your code look better
├── tscongig.json # Rules for typescript
├── tslint.json # Linter for typescript projects
└── ...
To build a production version of your app you need to type
npm run build
|| yarn build
This will create dist folder where everything will be compressed and minified.
If you need to configure your custom aliases you don't need .env file or something like eslint-import-resolver-babel-root-import. All you need is set aliases in webpack.config.js
file.
// webpack.config.js
const common = merge([
{
entry: {
index: './src/index.js',
},
// ...
resolve: {
extensions: ['.js', '.jsx'],
modules: ['node_modules'],
alias: {
src: path.resolve(__dirname, 'src'),
},
},
}
]);
import actionName from 'src/actions';
const MyComponent = () => ();
Show one of the possible webpack typescript configurations
Also remind me stuff :D