The idea is just to have a ready to code webpack config.
It also minify css and js in an optimized way.
Production config is in a different file than Dev config.
I used WebpackMerge so the shared config options between those two files are not repeating(DRY purpose)
- Dev Server with hot reload
- You can type
ES06
and above, and also useJSX
* Babel-loader - You can use
S[ac]ss
as it will compile intocss
files * sass-loader - css-loader - style-loader
$ yarn install
$ yarn start
$ yarn build-dev
$ yarn build
Handle Output Management so =>
Instead of having a global /assets directory that contains everything, you can groups assets with the code that uses them.
For exemple check this structure:
/components/
/components/component-name/
/components/component-name/index.jsx
/components/component-name/index.css
/components/component-name/icon.svg
/components/component-name/img.png
Way more portable, you can even reuse this "component" in an other project as long as your dependencies belong the same.