site-key form made resulable

webpack.dev.js

@@ -2,6 +2,8 @@ const path = require('path');
 const common = require('./webpack.common');
 const merge = require('webpack-merge');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = merge(common, {
   mode: 'development',
@@ -9,12 +11,16 @@ module.exports = merge(common, {
     filename: '[name].js',
     path: path.resolve(__dirname, 'static-assets/bundle'),
   },
+  plugins: [
+    new MiniCssExtractPlugin({filename: '[name].css'}),
+    new CleanWebpackPlugin(),
+  ],
   module: {
     rules: [
       {
         test: /\.scss$/,
         use: [
-          'style-loader', //3. Inject styles into DOM
+          MiniCssExtractPlugin.loader, //3. Extract css into files
           'css-loader', //2. Turns css into commonjs
           'sass-loader', //1. Turns sass into css
         ],