Simple Webpack 4 Config => Rdy-to-code

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)

What it can do for you ?

Loaders

• Dev Server with hot reload
• You can type ES06 and above, and also use JSX * Babel-loader
• You can use S[ac]ss as it will compile into css files * sass-loader - css-loader - style-loader

Plugins

• CleanWebPackPlugin
• HTMLwebpackPlugin
• MiniCssExtractPlugin
• TerserWebpackPlugin

Setup

$ yarn install

Run dev-server

$ yarn start

Run build-dev

$ yarn build-dev

Production

$ yarn build

Next features

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.