Use webpack-merge.

Move html export config to own file.
Delete unnecessary config options.
Use cheap source maps.

Signed-off-by: David Mehren <[email protected]>

Author: davidmehren

package.json

@@ -188,6 +188,7 @@
     "url-loader": "^1.0.1",
     "webpack": "^4.14.0",
     "webpack-cli": "^3.1.0",
+    "webpack-merge": "^4.1.4",
     "webpack-parallel-uglify-plugin": "^1.1.0"
   },
   "standard": {

webpack.common.js

@@ -10,6 +10,7 @@ var gracefulFs = require('graceful-fs')
 gracefulFs.gracefulify(fs)
 
 module.exports = {
+  name: 'app',
   plugins: [
     new webpack.ProvidePlugin({
       Visibility: 'visibilityjs',

webpack.dev.js

@@ -1,41 +1,14 @@
-var baseConfig = require('./webpack.common')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-var path = require('path')
+const common = require('./webpack.common.js')
+const htmlexport = require('./webpack.htmlexport')
+const merge = require('webpack-merge')
 
-module.exports = [Object.assign({}, baseConfig, {
-  plugins: baseConfig.plugins.concat([
-    new MiniCssExtractPlugin({
-      filename: '[name].css',
-      chunkFilename: '[id].css'
-    })
-
-  ]),
-  devtool: 'source-map'
-}), {
-  devtool: 'source-map',
-  entry: {
-    htmlExport: path.join(__dirname, 'public/js/htmlExport.js')
-  },
-  module: {
-    rules: [{
-      test: /\.css$/,
-      use: ['style-loader', 'css-loader']
-    }, {
-      test: /\.scss$/,
-      use: ['style-loader', 'sass-loader']
-    }, {
-      test: /\.less$/,
-      use: ['style-loader', 'less-loader']
-    }]
-  },
-  output: {
-    path: path.join(__dirname, 'public/build'),
-    publicPath: '/build/',
-    filename: '[name].js'
-  },
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: 'html.min.css'
-    })
-  ]
-}]
+module.exports = [
+  // merge common config
+  merge(common, {
+    mode: 'development',
+    devtool: 'cheap-module-eval-source-map'
+  }),
+  merge(htmlexport, {
+    mode: 'development',
+    devtool: 'cheap-module-eval-source-map'
+  })]

webpack.htmlexport.js

@@ -0,0 +1,25 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const path = require('path')
+
+module.exports = {
+  name: 'save-as-html',
+  entry: {
+    htmlExport: path.join(__dirname, 'public/js/htmlExport.js')
+  },
+  module: {
+    rules: [{
+      test: /\.css$/,
+      use: [MiniCssExtractPlugin.loader, 'css-loader']
+    }]
+  },
+  output: {
+    path: path.join(__dirname, 'public/build'),
+    publicPath: '/build/',
+    filename: '[name].js'
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'html.min.css'
+    })
+  ]
+}

webpack.prod.js

@@ -1,75 +1,23 @@
-var baseConfig = require('./webpack.common')
-var webpack = require('webpack')
-var path = require('path')
+const common = require('./webpack.common.js')
+const htmlexport = require('./webpack.htmlexport')
+const merge = require('webpack-merge')
+const path = require('path')
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
-module.exports = [Object.assign({}, baseConfig, {
-  plugins: baseConfig.plugins.concat([
-    new webpack.DefinePlugin({
-      'process.env': {
-        'NODE_ENV': JSON.stringify('production')
-      }
-    })
-  ]),
-
-  optimization: {
-    minimizer: [
-      new UglifyJsPlugin({
-        parallel: true,
-        cache: true
-      })
-    ],
-    splitChunks: {
-      chunks: 'async',
-      minChunks: Infinity
+module.exports = [
+  merge(common, {
+    mode: 'production',
+    output: {
+      path: path.join(__dirname, 'public/build'),
+      publicPath: '/build/',
+      filename: '[name].[contenthash].js'
     }
-  },
-
-  output: {
-    path: path.join(__dirname, 'public/build'),
-    publicPath: '/build/',
-    filename: '[id].[name].[hash].js'
-    // baseUrl: '<%- url %>'
-  }
-}), {
-  // This Chunk is used in the 'save as html' feature.
-  // It is embedded in the html file and contains CSS for styling.
-
-  entry: {
-    htmlExport: path.join(__dirname, 'public/js/htmlExport.js')
-  },
-
-  output: {
-    path: path.join(__dirname, 'public/build'),
-    publicPath: '/build/',
-    filename: '[name].js'
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        'NODE_ENV': JSON.stringify('production')
-      }
-    }),
-    new MiniCssExtractPlugin({
-      filename: 'html.min.css'
-    })
-  ],
-
-  optimization: {
-    minimizer: [
-      new OptimizeCSSAssetsPlugin({})
-    ]
-  },
-
-  module: {
-    rules: [{
-      test: /\.css$/,
-      use: [
-        MiniCssExtractPlugin.loader,
-        'css-loader'
+  }),
+  merge(htmlexport, {
+    mode: 'production',
+    optimization: {
+      minimizer: [
+        new OptimizeCSSAssetsPlugin({})
       ]
-    }]
-  }
-}]
+    }
+  })]