refactor(webpack): update webpack configs

Author: stefankeil

.gitignore

@@ -2,4 +2,5 @@
 *.log
 npm-debug.log*
 dist
-node_modules
+node_modules
+.DS_Store

README.md

@@ -9,7 +9,7 @@ A lightweight foundation for your next webpack based frontend project.
 npm install
 ```
 
-### Start Dev Server 
+### Start Dev Server
 
 ```
 npm run dev
@@ -26,6 +26,5 @@ npm run build
 * ES6 Support via [babel-loader](https://github.com/babel/babel-loader)
 * SASS Support via [sass-loader](https://github.com/jtangelder/sass-loader)
 * Linting via [eslint-loader](https://github.com/MoOx/eslint-loader)
-* Hot Module Replacement
 
 When you run `npm run build` we use the [extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin) to move the css to a separate file and included in the head of your `index.html`, so that the styles are applied before any javascript gets loaded. We disabled this function for the dev version, because the loader doesn't support hot module replacement.

package-lock.json

@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "description": "A light foundation for your next frontend project based on webpack.",
   "scripts": {
-    "build": "webpack --config webpack-prod.config.js --colors",
-    "dev": "webpack-dev-server --open --config webpack-dev.config.js --watch --colors"
+    "build": "webpack --config webpack/webpack.config.prod.js  --colors",
+    "dev": "webpack-dev-server --open --config webpack/webpack.config.dev.js"
   },
   "repository": {
     "type": "git",
@@ -36,24 +36,31 @@
       "semi": 2
     }
   },
+  "babel": {
+    "presets": [
+      "es2015"
+    ]
+  },
   "homepage": "https://github.com/wbkd/yet-another-webpack-es6-starterkit#readme",
   "devDependencies": {
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.4",
     "babel-preset-es2015": "^6.24.1",
     "clean-webpack-plugin": "^0.1.19",
+    "copy-webpack-plugin": "^4.5.1",
     "css-loader": "^0.28.11",
     "eslint": "^4.19.1",
     "eslint-loader": "^2.0.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^1.1.11",
     "html-webpack-plugin": "^3.2.0",
     "node-sass": "^4.9.0",
     "sass-loader": "^6.0.7",
     "style-loader": "^0.18.2",
-    "uglifyjs-webpack-plugin": "^1.2.5",
     "webpack": "^4.12.0",
     "webpack-cli": "^2.1.5",
-    "webpack-dev-server": "^3.1.4"
+    "webpack-dev-server": "^3.1.4",
+    "webpack-merge": "^4.1.3"
   },
   "dependencies": {
     "babel-polyfill": "^6.9.0"

package.json

@@ -1,7 +1,2 @@
 'use strict';
-
-if (module.hot) {
-  module.hot.accept();
-}
-
 import '../styles/index.scss';

public/.gitkeep

@@ -0,0 +1 @@
+import 'babel-polyfill';

src/scripts/index.js

@@ -0,0 +1,47 @@
+'use strict';
+
+const Path = require('path');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const Webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const dest = Path.join(__dirname, '../dist');
+
+module.exports = {
+  entry: [
+    Path.resolve(__dirname, './polyfills'),
+    Path.resolve(__dirname, '../src/scripts/index')
+  ],
+  output: {
+    path: dest,
+    filename: 'bundle.[hash].js'
+  },
+  plugins: [
+    new CleanWebpackPlugin([dest]),
+    new CopyWebpackPlugin([
+      { from: Path.resolve(__dirname, '../public'), to: 'public' }
+    ]),
+    new HtmlWebpackPlugin({
+      template: Path.resolve(__dirname, '../src/index.html')
+    })
+  ],
+  resolve: {
+    alias: {
+      '~': Path.resolve(__dirname, '../src')
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: '[path][name].[ext]'
+          }
+        }
+      }
+    ]
+  }
+};