Skip to content

stackr23/webpack

Repository files navigation

@stackr23/webpack

Build Status NPM Release Conventional Commits Semantic Versioning

latest CHANGELOG

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

Installation

npm i @stackr23/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('@stackr23/webpack');

node - extended

// webpack.config.js
const stackr23Webpack = require('@stackr23/webpack');

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

cli

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

node - project types

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

  • react: React with Javascript and Typescript (default)
  • planned for future releases:
    • angular:: Angular - not available yet
    • react-next: NextJs - not available yet
// webpack.config.js
const stackr23Webpack = require('@stackr23/webpack');

module.exports = (env) => {
  return stackr23Webpack(env, { type: 'react' });
};

Constants

can be overwritten by ENV VARS

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')

remote console

// on client
import { remoteConsoleInjector } from '@stackr23/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 = stackr23Middlewares

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/@stackr23/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'