Add aptoprefixer and format webpack config

Makefile

@@ -14,6 +14,7 @@ build-prod:
 	./tools/npm run build-prod
 
 format:
+	./tools/npm run format-webpack
 	./tools/npm run format-js
 	./tools/npm run format-vue
 	./tools/npm run format-style

package.json

@@ -5,27 +5,30 @@
   "version": "1.0.0",
   "description": "Homepage",
   "devDependencies": {
+    "autoprefixer": "^8.6.3",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.4",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
     "css-loader": "^0.28.11",
     "node-sass": "^4.9.0",
+    "postcss-loader": "^2.1.5",
     "predictor": "git+https://github.com/anwinged/predictor.git",
     "prettier": "^1.13.5",
-    "sass-loader": "^7.0.1",
+    "sass-loader": "^7.0.3",
     "style-loader": "^0.21.0",
-    "underscore": "^1.9.0",
+    "underscore": "^1.9.1",
     "vue": "^2.5.16",
     "vue-loader": "^15.2.4",
     "vue-style-loader": "^4.1.0",
     "vue-template-compiler": "^2.5.16",
-    "webpack": "^4.5.0",
+    "webpack": "^4.12.0",
-    "webpack-cli": "^2.0.14"
+    "webpack-cli": "^2.1.5"
   },
   "scripts": {
     "watch": "",
     "build": "webpack --config webpack.config.js --progress",
     "build-prod": "webpack --config webpack.config.js --env.production",
+    "format-webpack": "prettier --single-quote --trailing-comma es5 --write \"./webpack.config.js\"",
     "format-js": "prettier --single-quote --trailing-comma es5 --write \"./source/_assets/**/*.js\"",
     "format-vue": "prettier --single-quote --trailing-comma es5 --write \"./source/_assets/**/*.vue\"",
     "format-style": "prettier --single-quote --write \"source/_assets/**/*.scss\"",

webpack.config.js

@@ -1,12 +1,54 @@
 const path = require('path');
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const autoprefixer = require('autoprefixer');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
-
+module.exports = (env = {}) => {
-module.exports = income_env => {
-
-    const env = income_env || {};
     const is_prod = !!env.production;
-    const dist_dir = is_prod ? 'output_prod' : 'output_dev';
+    const dist_dir = is_prod ? './output_prod' : './output_dev';
+
+    const STYLE_LOADER = { loader: 'style-loader' };
+
+    const CSS_LOADER = {
+        loader: 'css-loader',
+        options: {
+            importLoaders: true,
+        },
+    };
+
+    const POSTCSS_LOADER = {
+        loader: 'postcss-loader',
+        options: {
+            plugins: [
+                autoprefixer({
+                    browsers: ['last 8 version'],
+                }),
+            ],
+        },
+    };
+
+    const SCSS_LOADER = { loader: 'sass-loader' };
+
+    const BABEL_LOADER = {
+        loader: 'babel-loader',
+        options: {
+            presets: ['babel-preset-env'],
+        },
+    };
+
+    const VUE_LOADER = {
+        loader: 'vue-loader',
+        options: {
+            loaders: {
+                css: ['vue-style-loader', CSS_LOADER, POSTCSS_LOADER],
+                scss: [
+                    'vue-style-loader',
+                    CSS_LOADER,
+                    POSTCSS_LOADER,
+                    'sass-loader',
+                ],
+            },
+        },
+    };
 
     return {
         mode: is_prod ? 'production' : 'development',
@@ -25,37 +67,27 @@ module.exports = income_env => {
                 {
                     test: /\.js$/,
                     exclude: /node_modules/,
-                    use: {
+                    use: [BABEL_LOADER],
-                        loader: 'babel-loader',
-                        options: {
-                            presets: ['babel-preset-env']
-                        }
-                    },
-
                 },
                 {
                     test: /\.css$/,
-                    use: ['style-loader', 'css-loader'],
+                    use: [STYLE_LOADER, CSS_LOADER, POSTCSS_LOADER],
                 },
                 {
                     test: /\.scss$/,
-                    use: ['style-loader', 'css-loader', 'sass-loader'],
+                    use: [
+                        STYLE_LOADER,
+                        CSS_LOADER,
+                        POSTCSS_LOADER,
+                        SCSS_LOADER,
+                    ],
                 },
                 {
                     test: /\.vue$/,
-                    loader: 'vue-loader',
+                    use: [VUE_LOADER],
-                    options: {
-                        loaders: {
-                            'css': 'vue-style-loader!css-loader',
-                            'scss': 'vue-style-loader!css-loader!sass-loader',
-                            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
-                        }
-                    }
                 },
-            ]
+            ],
         },
-        plugins: [
+        plugins: [new VueLoaderPlugin()],
-            new VueLoaderPlugin(),
+    };
-        ],
-    }
 };