This package generates a base webpack configuration and requires the necessary tooling dependencies for React web and Electron applications. Consuming projects can customize the generated base configurations to meet the specific needs of any project.
ℹ️ See the test-app
for a complete example application setup
npm i -D @ns-private/webpack-base
package.json
commands{
"scripts": {
"build": "NODE_ENV=production webpack --mode=production",
"start": "NODE_ENV=development webpack-dev-server --mode=development"
}
}
Setup a .babelrc
config file and a
webpack.config.js
config file in the project
root.
webpack base works out of the box for projects with projects that use the default project structure:
project
├─ / public
│ └─ favicon.ico
├─ / src
│ └─ / api
│ └─ / components
│ └─ / dux
│ └─ / lib
│ └─ / media
│ │ └─ / icons
│ └─ / styles
│ │ └─ / dev
│ │ └─ / prod
│ ├─ index.html
│ └─ index.js
├─ .babelrc
├─ .eslintrc.js
└─ webpack.config.js
dev
and prod
directories are
passed as importPaths
to node-sass
according to the build env.The project webpack.config.js
should call the webpack base package to generate
the base configuration set. The base configurations can then be modified in any
way to support specific project needs.
// webpack.config.js
const webpackBase = require('@ns-private/webpack-base')
module.exports = () => {
const { configs } = webpackBase(/* options */)
/*
* Handle non-standard, advanced project customization by directly updating
* the generated base configs.
*/
// eg: configs.bail = false
return configs
}
The base configurations generated by the package can be customized per project by passing an options object:
// The top level overrides allow specifying the build env, dev server
// customizations and default path overrides
const options = {
devServer,
envVars
paths,
target,
}
const paths = {
/**
* Application public static files directory. This directory is copied to the
* build without manipulation by the `CopyWebpackPlugin` and provides an
* escape hatch to include assets in a build without importing them in the
* application source.
*/
appPublic, // ./public
/**
* Application source files directory. The directory is added to the webpack
* `resolve.modules` config to allow using imports relative to the source
* directory.
*/
appSrc, // ./src
/**
* Project root directory that is used by webpack (eg to handle resolutions).
* webpack base attempts to automatically set the project context, but it
* can help fix resolution errors to specify it.
*/
context, // ./
/**
* Directories/files that will be loaded && sprited using the
* `SVGSymbolSprite` system.
*/
iconSpritePaths, // [./src/media/icons]
/**
* Directories that will be loaded using the JS loader, is passed as the
* loader `include` property.
*/
jsLoaderPaths, // [./src]
/**
* Directory that build assets are emitted to.
*/
outputPath, // ./dist
/**
* The prefix appended to every URL created by the runtime or loaders. This
* enables serving an application with a CDN or server subdirectory.
*/
publicPath, // '/'
/**
* Directories included in the SASS resolver. Resources in these directories
* will be available using relative imports. Useful for importing shared SASS
* resources inside component SASS definitions.
*/
sassIncludePaths, // ['src/styles']
}
babelLoaderInclude
with the
babel-loader
index.html
PUBLIC_PATH
for routingDEVTOOL
environment variable will override source mapsThe build configures the following module resolutions for convenient shorthand imports of common project directories.
Module | Usage |
---|---|
/src |
Allows relative imports from the src directory, useful for shared utilities |
/src/styles |
Allows importing style variables directly from any SASS partial |
The following environment variables are injected by the build:
Constant | Usage |
---|---|
process.env.NODE_ENV |
Defaults to match NODE_ENV, used by Babili to strip code in prod builds |
process.env.DEBUG |
Defaults to false, can be used for adding detailed logging in dev environment |
process.env.PUBLIC_PATH |
Set to publicPath configuration, useful for importing media and configuring CDN paths |
Additional environment variables can be passed in an envVars
option and they
will be injected into the build
webpackBase({
envVars: { TRACKING_ID: 'x-123456' }
})
Electron renderer processes can be bundled by passing an target
flag in
options:
// webpack.config.js
const webpackBase = require('@ns-private/webpack-base')
module.exports = () => {
return webpackBase({ target: 'electron-renderer' }).configs
}
By default webpack-base
will look for project source files in /src/renderer
instead of /src
and builds are output to /src/build
instead of /dist
. This
is for working with Electron build systems.
When working within a Docker setup, the dev server port (default 3000
) must be
exposed and the host set to 0.0.0.0
. Including a start command for Docker is
recommended:
{
"start:docker": "NODE_ENV=development webpack-dev-server --host=0.0.0.0 --mode=development"
}
The configured loaders and plugins can be accessed directly in the return value:
// webpack.config.js
const webpackBase = require('@ns-private/webpack-base')
module.exports = () => {
const { loaders, plugins } = webpackBase(/* options */)
}
jsLoader, sassLoader, svgSpriteLoader, svgComponentLoader, fileLoader, rawLoader
progressBarPlugin, environmentPlugin, htmlPlugin, svgSymbolSpritePlugin, copyPlugin, hotModuleReplacementPlugin, friendlyErrorsPlugin
This can be useful for adding loaders to projects like Storybook.
Development and testing of the repository use a Docker workflow to ensure that
the generated configs work with the packages required and the minimum version of
Node supported. The /test-app
directory includes a complete test application.
npm run container
(The image/container will be
created and started)npm run start:docker
Unit tests are run with Jest and use snapshots to validate the generated configs for development and production environments.
Interested in contributing? Start here 😍
.babelrc
,
webpack.config.js
)test-app
for quick validation
that package is working with acceptance tests.svg-symbol-sprite-loader
loader, plugin and exampleAll contributions are greatly appreciated 👍🎉. To contribute please:
Node version running inside Atom's Electron instance is support target to ensure users of ESLint import plugin are able to parse these webpack configs.