update webpack config

Author: robertoachar

webpack/webpack.common.js

@@ -8,11 +8,15 @@ module.exports = {
     vendor: './statik/scripts/vendor.js'
   },
   output: {
-    filename: '[name].[chunkhash].bundle.js',
+    filename: '[name].js',
     path: path.resolve('dist')
   },
   module: {
     rules: [
+      {
+        test: /\.html$/,
+        use: 'html-loader'
+      },
       {
         test: /\.js$/,
         exclude: /node_modules/,
@@ -24,14 +28,25 @@ module.exports = {
         }
       },
       {
-        test: /\.(eot|svg|ttf|woff2?)$/,
-        exclude: /images/,
+        test: /\.(eot|ttf|woff2?)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              useRelativePath: true
+            }
+          }
+        ]
+      },
+      {
+        test: /\.(gif|jpg|png|svg|ico)$/,
         use: [
           {
             loader: 'file-loader',
             options: {
               name: '[name].[ext]',
-              outputPath: 'fonts/'
+              useRelativePath: true
             }
           }
         ]

webpack/webpack.dev.js

@@ -3,23 +3,14 @@ const path = require('path');
 
 const common = require('./webpack.common');
 
-module.exports = merge(common, {
+module.exports = merge.smart(common, {
   mode: 'development',
   devtool: 'eval',
   module: {
     rules: [
-      {
-        test: /\.html$/,
-        use: 'html-loader'
-      },
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader']
-      },
-      {
-        test: /\.(gif|jpg|png|svg|ico)$/,
-        include: path.resolve('statik', 'images'),
-        use: ['file-loader']
       }
     ]
   },

webpack/webpack.prod.js

@@ -1,16 +1,18 @@
 const autoprefixer = require('autoprefixer');
 const merge = require('webpack-merge');
-const path = require('path');
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin');
 
 const common = require('./webpack.common');
 
-module.exports = merge(common, {
+module.exports = merge.smart(common, {
   mode: 'production',
   devtool: 'source-map',
+  output: {
+    filename: '[name].[chunkhash].js'
+  },
   module: {
     rules: [
       {
@@ -40,17 +42,7 @@ module.exports = merge(common, {
       },
       {
         test: /\.(gif|jpg|png|svg|ico)$/,
-        include: path.resolve('statik', 'images'),
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[ext]',
-              useRelativePath: true
-            }
-          },
-          'image-webpack-loader'
-        ]
+        use: 'image-webpack-loader'
       }
     ]
   },
@@ -75,8 +67,7 @@ module.exports = merge(common, {
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: '[name].bundle.css',
-      chunkFilename: '[id].css'
+      filename: '[name].[chunkhash].css'
     }),
     new UglifyJsWebpackPlugin({
       sourceMap: true