Initial boilerplate setup

client/tools/webpack/helpers/webpack.common.config.js

@@ -0,0 +1,25 @@
+const pathConfig = require('./webpack.path.config')
+
+module.exports = {
+  context: pathConfig.context,
+
+  entry: ['babel-polyfill', './src/index.js'],
+
+  module: {
+    rules: [
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
+      {
+        test: /\.(png|svg|jpg|gif)$/,
+        use: [{ loader: 'file-loader' }
+        ]
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader'
+        }
+      }
+    ]
+  }
+}

client/tools/webpack/helpers/webpack.path.config.js

@@ -0,0 +1,7 @@
+const path = require('path')
+
+const context = path.resolve(__dirname, '../../..')
+
+module.exports = {
+  context
+}

client/tools/webpack/webpack.dev.config.js

@@ -0,0 +1,54 @@
+const webpack = require('webpack')
+const Dotenv = require('dotenv-webpack')
+const path = require('path')
+const merge = require('webpack-merge')
+const history = require('connect-history-api-fallback')
+const convert = require('koa-connect')
+const commonConfig = require('./helpers/webpack.common.config')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin')
+const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
+
+module.exports = merge(commonConfig, {
+  mode: 'development',
+  devtool: 'inline-sourcemap',
+
+  output: {
+    path: path.resolve(__dirname, '../../build'),
+    filename: 'script.js'
+  },
+
+  plugins: [
+    new Dotenv({
+      path: '.env'
+    }),
+    new webpack.NamedModulesPlugin(),
+    new HtmlWebpackPlugin({
+      template: 'html/index.html',
+      alwaysWriteToDisk: true
+    }),
+    new ScriptExtHtmlWebpackPlugin({
+      defaultAttribute: 'async'
+    }),
+    new HtmlWebpackHarddiskPlugin()
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.s?[ac]ss$/,
+        loader: 'style-loader!css-loader!postcss-loader!sass-loader'
+      }
+    ]
+  },
+  target: 'web'
+})
+
+module.exports.serve = {
+  hot: {
+    port: 4536
+  },
+  host: 'localhost',
+  add: (app, middleware, options) => {
+    app.use(convert(history()))
+  }
+}

client/tools/webpack/webpack.prod.config.js

@@ -0,0 +1,73 @@
+const webpack = require('webpack')
+const path = require('path')
+const merge = require('webpack-merge')
+const commonConfig = require('./helpers/webpack.common.config')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin')
+const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
+const Dotenv = require('dotenv-webpack')
+
+module.exports = merge(commonConfig, {
+  mode: 'production',
+  devtool: 'inline-sourcemap',
+  output: {
+    path: path.resolve(__dirname, '../../build'),
+    filename: 'script.js'
+  },
+
+  optimization: {
+    minimizer: [
+      new UglifyJsPlugin({
+        cache: true,
+        parallel: true,
+        sourceMap: false
+      }),
+      new OptimizeCSSAssetsPlugin({})
+    ],
+    splitChunks: {
+      cacheGroups: {
+        styles: {
+          name: 'styles',
+          test: /\.css$/,
+          chunks: 'all',
+          enforce: true
+        }
+      }
+    }
+  },
+  plugins: [
+    new Dotenv(),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css'
+    }),
+    new HtmlWebpackPlugin({
+      template: 'html/index.html',
+      alwaysWriteToDisk: true
+    }),
+    new ScriptExtHtmlWebpackPlugin({
+      defaultAttribute: 'async'
+    }),
+    new HtmlWebpackHarddiskPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          { loader: 'css-loader', options: { importLoaders: 2 } },
+          'postcss-loader',
+          { loader: 'sass-loader' }
+        ]
+      }
+    ]
+  },
+  target: 'web'
+})