@crystal-ball/webpack-base
Advanced tools
:status
:integrations
:flair
This package generates a base webpack configuration and dependencies for React web and Electron applications. Users can customize the generated base configurations to meet the specific needs of any project.
1. Install
npm i -D @crystal-ball/webpack-base
2. Add package.json commands
{
"scripts": {
"build": "NODE_ENV=production webpack --mode=production",
"start": "NODE_ENV=development webpack-dev-server --mode=development"
}
}
3. Add configuration files
Add configuration files for webpack and Babel to the project root. The @crystal-ball/react-application-prototype is a complete working reference application using this package. Projects require a:
.browserslistrc.eslintrc.jsbabel.config.jswebpack.config.jsOut of the box all of the webpack-base loaders and plugins will work with projects that use the default project directory structure:
project
├─ / src
│ └─ / api
│ └─ / components
│ └─ / dux
│ └─ / media
│ │ └─ / icons
│ └─ / styles
│ └─ / utils
│ ├─ index.html
│ ├─ index.js
│ └─ index.scss
├─ / static
│ └─ favicon.ico
├─ .browserslistrc
├─ .eslintrc.js
├─ babel.config.js
└─ webpack.config.js
@
alias from anywhere in the project.The project webpack.config.js should call the webpack-base package to generate
a base configuration. The base configuration can then be modified in any way to
support specific project needs.
// webpack.config.js
const webpackBase = require('@crystal-ball/webpack-base')
module.exports = () => {
const { configs } = webpackBase(/* options */)
/*
* Handle non-standard, advanced project customization by directly updating
* the generated base configs.
*/
configs.rules.push({
/* some custom loader */
})
return configs
}
The base configurations generated by the package can be customized by passing an options object:
const { configs } = webpackBase{
devServer,
envVars
paths,
sassOptions,
target,
})
const paths = {
/**
* 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.
* @default /
*/
context,
/**
* SVG files imported from these directories will be loaded+sprited using the
* `SVGSymbolSprite` package.
* @default ['/src/media/icons']
*/
iconSpriteIncludes,
/**
* JS files imported from these directories will be loaded using the JS loader.
* @default ['/src']
*/
jsLoaderIncludes,
/**
* Build assets are emitted to this directory.
* @default /public
*/
output,
/**
* Application source files directory. This directory is used as a base for
* the icon includes path.
* @default /src
*/
src,
/**
* 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.
* @default /static
*/
static,
}
jsLoaderIncludes with the
babel-loaderindex.htmlPUBLIC_PATH for routingDEVTOOL environment variable will override source mapsLong term asset caching is supported by including content based hashes in the generated asset filenames.
[contenthash] substitution is included in filenames in production builds to
append a hash that will change when the file contents changeThe following environment variables are injected by the build:
| Constant | Usage |
|---|---|
NODE_ENV | Defaults to match NODE_ENV, used by Babili to strip code in prod builds |
DEBUG | Defaults to false, can be used for adding detailed logging in dev environment |
PUBLIC_PATH | Defaults to '/', 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 a target flag in
options:
// webpack.config.js
const webpackBase = require('@crystal-ball/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, this is useful when setting up Storybook to pass additional loaders and plugins.
// webpack.config.js
const webpackBase = require('@crystal-ball/webpack-base')
module.exports = () => {
const { loaders, plugins } = webpackBase(/* options */)
}
config.loaders = {
jsLoader,
sassLoader,
svgSpriteLoader,
svgComponentLoader,
fileLoader,
rawLoader,
}
config.plugins = {
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:
# Build the image and start the container
npm run container
# Start the webpack-dev-server 🎉
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 😍
All 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.
FAQs
Customizable webpack base configuration generator
We found that @crystal-ball/webpack-base demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Research
A malicious npm campaign is targeting Ethereum developers by impersonating Hardhat plugins and the Nomic Foundation, stealing sensitive data like private keys.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.