latest CHANGELOG
ATTENTION: All conventional-commits merged into master will trigger a new release!
npm i @stackr23/webpack
includes all packages related to webpack:
*-loader's, babel-presets/plugins, typescript-presets/plugins, karma-plugins + puppeteer, sass/postcss, etc.
Info: no need to add babel config for webpack usage,
as it is already included in webpacks babel-loader options
node - default
// webpack.config.jsmodule.exports=require('@stackr23/webpack');node - extended
// webpack.config.jsconststackr23Webpack=require('@stackr23/webpack');module.exports=(env,args)=>{constconfig=stackr23Webpack(env, ...args);// modify config as you needconfig.plugins.push(newMySpecialPlugin());returnconfig;};cli
webpack-dev --config ./node_modules/@stackr23/webpack orwebpack-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.jsconststackr23Webpack=require('@stackr23/webpack');module.exports=(env)=>{returnstackr23Webpack(env,{type: 'react'});};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 |
enables absolute import paths
likeimport Header from 'components/Header'uses 'tsconfig-paths-webpack-plugin' to resolve import paths
requires: workspaceRoot/tsconfig.jsonif 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 rootalias: {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 '@stackr23/config-eslint'
- for more information see webpack's resolve config
// on clientimport{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
before exporting the config,
we check if the port is free to use and throw an Error, if not.
may be moved to own package together with cypress setup in undefined future
Usagenpm i karma --save-devnpx 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
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
- example integration tests
/test/App.spec.jsand/test/components/Test.spec.js - component related assertions ➡️ 'chai-enzyme'