@viewar/webpack

latest CHANGELOG

ATTENTION: All conventional-commits merged into master will trigger a new release!

• Installation
• Usage
• Constants
• Features
  • Module Resolver
  • remote console
  • errorOnUsedPort()
  • Integration Tests per 'karma-webpack'
    • Configuration
    • Writing Tests

Installation

npm i @viewar/webpack

includes all packages related to webpack:
*-loader's, babel-presets/plugins, typescript-presets/plugins, karma-plugins + puppeteer, sass/postcss, etc.

Usage

Info: no need to add babel config for webpack usage,
as it is already included in webpacks babel-loader options

node - default

// webpack.config.js
module.exports = require('@viewar/webpack');

node - extended

// webpack.config.js
const configViewAr = require('@viewar/webpack');

module.exports = env => {
  const config = configViewAr(env);
  // modify config as you need
  config.plugins.push(new MySpecialPlugin());
  return config;
};

node - project types

@viewar/webpack is able to handle different types of projects:

• "react-js": React with Javascript (default)
• "react-ts": React with Typescript (deprecated)
• "angular": Angular - not available yet
• "angularjs: AngularJS - not available yet

// webpack.config.js
const configViewAr = require('@viewar/webpack');

module.exports = env => {
  // Use react with typescript as project type.
  return configViewAr(env, {
    type: 'react-js',
  });
};

cli

webpack-dev --config ./node_modules/@viewar/webpack or
webpack-dev-server --config ./node_modules/@viewar/webpack

Constants

name	default	env overwrite
PATHS.src	'src'	WEBPACK_PATH
PATHS.assets	'assets'	WEBPACK_ASSETS
PATHS.build	'build'	WEBPACK_BUILD
PORT	8080	PORT

Features

Module Resolver

• enables absolute import paths
  like import Header from 'components/Header'

• uses 'tsconfig-paths-webpack-plugin' to resolve import paths
  requires: workspaceRoot/tsconfig.json

• if tsconfig.json is not present it won't use that plugin
  and uses the default resolve config:

    resolve: {
      extensions: ['.jsx', '.js', '.ts', '.tsx', '.json'],
      // paths are relative to workspace root
      alias:      { assets: PATHS.assets },
      modules: [PATHS.src, 'node_modules'],
    }

  • if you use '/src' you probably don't have to change anything
  • overwrite PATHS.src with WEBPACK_PATH (see constants)

• you can overwrite this config to fit your projects module resolvement,
  if you add 'webpack.config.resolve.js' to your workspaceRoot
  (use format of 'src/webpack.config.resolve.js')

  • This config will also be used by '@viewar/config-eslint'
  • for more information see webpack's resolve config

remote console

// on client
import { remoteConsoleInjector } from '@viewar/webpack/remoteConsole';

remoteConsoleInjector();

all native console outputs are sent to our endpoint of remote-console,
and get catched server-side to log them in the terminal.

The endpoint '/remote-console' is injected per webpack-dev-server's 'before' function:
webpackConfig.devServer.before = viewArMiddleware;

TODO: see issues #17 and #39

errorOnUsedPort()

before exporting the config,
we check if the port is free to use and throw an Error, if not.

Integration Tests per 'karma-webpack'

may be moved to own package together with cypress setup in undefined future

Usage
npm i karma --save-dev npx karma start ./node_modules/@viewar/webpack/karma

Explanation
Karma is a test runner for JavaScript applications with several features integrated:

• real browser instances - no fake DOM!
  supports Chrome, Firefox, IE11+, Safari
  uses headless chrome in CI environment
• native webpack module bundling
  'karma-webpack' lets you use your projects webpack config
• built-in mocha runner
  • 'chai' for unit-test assertions (expect, should, ...)
  • 'enzyme' for integration-tests (shallow, mount, render)
  • 'chai-enzyme' for extended integration-tests assetions

Configuration

karma - src/test/karma.config.js
contains karma-config: file pattern, karma plugins, browser settings, usw, ...

mocha - src/test/mocha.setup.js
contains mocha setup: configures chai-enzyme and sets up global assertion functions

Writing Tests

• example integration tests
  /test/App.spec.js and /test/components/Test.spec.js
• component related assertions ➡️ 'chai-enzyme'