homehub/dev/webpack.config.js

const crypto = require('crypto');
const fs = require('fs');
const path = require('path');

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

const packageJSON = require('./package.json');

const IS_PRODUCTION = (process.env['NODE_ENV'] === 'production');
const IS_WDS = (process.env['WDS'] === 'true');
const MODULES_FOLDER = (
  (process.env['YARN_MODULES_FOLDER']) ? process.env['YARN_MODULES_FOLDER'] : 'node_modules'
);

const CONTEXT = path.resolve(__dirname);
const OUTPUT_DIR = path.resolve(CONTEXT, 'frontend');

const settingsContent = fs.readFileSync(path.resolve(CONTEXT, 'settings.js'));
const settingsHash = crypto.createHash('sha1');
settingsHash.update(settingsContent);
const BUILD = settingsHash.digest('hex');

const OUTPUT_FILENAME = `[name]-${BUILD}.js`;
const PUBLIC_PATH = (IS_WDS) ? '/' : '/frontend/';
const VENDOR_PATH = path.resolve('./vendor');

const HOMEHUB_CSS_PATTERN = (IS_PRODUCTION) ? 'homehub.css' : 'homehub.css*';
const HOMEHUB_COMPONENTS_CSS_PATTERN = (
  (IS_PRODUCTION) ? 'homehub-components.css' : 'homehub-components.css*'
);

const copyTransformPath = (targetPath, absolutePath) => {
  return path.basename(targetPath).replace('.css', `-${BUILD}.css`);
};

const copyTransform = (content, absolutePath) => {
  if (IS_PRODUCTION) {
    return content;
  }

  const filename = path.basename(absolutePath);
  const cssFilename = path.basename(filename, '.map');

  const stringContent = content.toString('utf-8').replace(
    cssFilename, cssFilename.replace('.css', `-${BUILD}.css`)
  );

  return stringContent;
};

const config = {
  mode: (IS_PRODUCTION) ? 'production' : 'development',
  devtool: (IS_PRODUCTION) ? false : 'source-map',
  context: CONTEXT,
  entry: {
    homehub: './index.js'
  },
  output: {
    path: OUTPUT_DIR,
    publicPath: PUBLIC_PATH,
    filename: OUTPUT_FILENAME
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        include: VENDOR_PATH,
        use: [
          'babel-loader'
        ]
      },
      {
        test: /\.css?$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  resolve: {
    modules: [MODULES_FOLDER],
    alias: {
      '@bthlabs/homehub-app': path.resolve(
        MODULES_FOLDER, '@bthlabs/homehub-app'
      ),
      '@bthlabs/homehub-components': path.resolve(
        MODULES_FOLDER, '@bthlabs/homehub-components'
      ),
      '@bthlabs/homehub-core': path.resolve(
        MODULES_FOLDER, '@bthlabs/homehub-core'
      ),
      '@bthlabs/homehub-icons': path.resolve(
        MODULES_FOLDER, '@bthlabs/homehub-icons'
      ),
      'prop-types': path.resolve(MODULES_FOLDER, 'prop-types'),
      react: path.resolve(MODULES_FOLDER, 'react'),
      'react-bootstrap': path.resolve(MODULES_FOLDER, 'react-bootstrap'),
      'react-dom': path.resolve(MODULES_FOLDER, 'react-dom'),
      'vendor': VENDOR_PATH
    }
  },
  devServer: {
    disableHostCheck: true,
    host: '10.100.100.101',
    port: 3012,
    proxy: {
      '/backend': 'http://10.100.100.101:3010'
    }
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.DefinePlugin({
      PRODUCTION: IS_PRODUCTION
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(CONTEXT, 'templates', 'index.html'),
      templateParameters: {
        build: BUILD,
        version: packageJSON.version,
        publicPath: PUBLIC_PATH
      }
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(
            MODULES_FOLDER, '@bthlabs', 'homehub-app', 'lib',
            HOMEHUB_CSS_PATTERN
          ),
          transformPath: copyTransformPath,
          transform: copyTransform
        }
      ]
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(
            MODULES_FOLDER, '@bthlabs', 'homehub-components', 'lib',
            HOMEHUB_COMPONENTS_CSS_PATTERN
          ),
          transformPath: copyTransformPath,
          transform: copyTransform
        }
      ]
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'assets/icon.png'
        }
      ]
    })
  ]
};

if (IS_PRODUCTION) {
  config.resolve.alias = {
    ...config.resolve.alias,
    'prop-types': path.resolve(MODULES_FOLDER, 'prop-types/prop-types.min.js'),
    'react': path.resolve(MODULES_FOLDER, 'react/umd/react.production.min.js'),
    'react-dom': path.resolve(
      MODULES_FOLDER, 'react-dom/umd/react-dom.production.min.js'
    )
  };
}

module.exports = config;