finish

.env.development

@@ -0,0 +1 @@
+NODE_ENV=development

.env.production

@@ -0,0 +1 @@
+NODE_ENV=production

build-utils/addons/webpack.bundleanalyze.js

@@ -0,0 +1,11 @@
+const WebpackBundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+module.exports = {
+  plugins: [
+    new WebpackBundleAnalyzer({
+      analyzerMode: 'static',
+      reportFilename: './report.html',
+      openAnalyzer: false
+    })
+  ]
+};

build-utils/addons/webpack.bundlevisualizer.js

@@ -0,0 +1,7 @@
+const Visualizer = require('webpack-visualizer-plugin');
+
+module.exports = {
+  plugins: [
+    new Visualizer()
+  ]
+};

webpack.config.js → build-utils/webpack.common.js

@@ -1,3 +1,4 @@
+const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 
@@ -23,11 +24,11 @@ module.exports = {
     })
   ],
   output: {
-    path: __dirname + '/dist',
+    path: path.resolve(__dirname, '../', 'dist'),
     publicPath: '/',
     filename: 'bundle.js'
   },
   devServer: {
     contentBase: './dist'
-  }
+  },
 };

build-utils/webpack.config.js

@@ -0,0 +1,20 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const path = require('path');
+
+const commonConfig = require('./webpack.common.js');
+
+const getAddons = addonsArgs => {
+  let addons = Array.isArray(addonsArgs) ?
+    addonsArgs : [addonsArgs];
+
+  return addons
+    .filter(Boolean)
+    .map(name => require(`./addons/webpack.${name}.js`));
+};
+
+module.exports = ({ env, addon }) => {
+  const envConfig = require(`./webpack.${env}.js`);
+
+  return webpackMerge(commonConfig, envConfig, ...getAddons(addon));
+};

build-utils/webpack.dev.js

@@ -0,0 +1,11 @@
+const Dotenv = require('dotenv-webpack');
+
+module.exports = {
+  mode: 'development',
+  devtool: 'eval-source-map',
+  plugins: [
+    new Dotenv({
+      path: './.env.development',
+    })
+  ],
+};

build-utils/webpack.prod.js

@@ -0,0 +1,11 @@
+const Dotenv = require('dotenv-webpack');
+
+module.exports = {
+  mode: 'production',
+  devtool: 'source-map',
+  plugins: [
+    new Dotenv({
+      path: './.env.production',
+    })
+  ],
+};