What
A simple way to build webpack configs
Why
Because creating creating a webpack config for each project is very much similar and cumbersome.
Also all the dependencies are cluttering the package.json. Of course this is not best practice, but for working with a project where webpack's sole purpose is to build the source files to a dist file with minimal customimzation it seems reasonable to create this abstraction that declutters the project a bit.
Usage
API
The following components are exported from webpack-simple
.
Loaders
Exports the following predefined loaders:
- cssLoader
- A
css-loader
withstyle-loader
in dev mode andmini-css-extract-plugin
loader in prod
- A
- babelLoader
- Simply a
babel-loader
. - Checks for
.js
,.jsx
,.ts
,.tsx
,
- Simply a
- babelFileLoader
- Prepends
file-loader
to the babelLoader above
- Prepends
- imageLoader
- Uses
url-loader
andimage-webpack-loader
- Checks for
.png
,.svg
,.jps
,.gif
- Uses
- manifestLoader
- Uses
file-loader
- Checks for
.webmanifest
- Uses
Plugins
Exports the following plugins:
- CssPlugin (
mini-css-extract-plugin
) - TerserPlugin (
terser-webpack-plugin
) - HtmlPlugin (
html-webpack-plugin
) - HtmlRootPlugin (
html-wwebpack-root-plugin
) - HtmlInjectPlugin (
html-wwebpack-inject-plugin
)
And the following helpers
- createEnvPlugin
- Takes in an object of environment variables
- Falls back on
NODE_ENV
,RUNTIME_ENV
,PORT
- createHtmlPlugin
Environment
The package reads the environment variables with the following fallback values:
-
NODE_ENV
='development'
-
RUNTIME_ENV
='local'
-
PORT
='3000'
Files
- The files emitted by the webpack build (in dev/prod respectively) is the following:
-
index.js
/index.[hash].js
-
styles.css
/styles.[hash].css
- images with their source names
-
Templates
The templates are the function one actually uses to create configs (if you don't want to puzzle them together from the components above). They are the following:
-
createDefaultConfig
- The default config that all other extends from. Takes in the following arguments:
- opts
-
entry
: string -
distDir
: string; -
distFile
: string; -
env
: object
-
- config: Webpack configuration
- opts
- Mergen them and creates very basic config with:
-
mode
, entry
output
resolve
plugins
stats
devtool
watchOptions
-
- The default config that all other extends from. Takes in the following arguments:
-
createNodeConfig
- Extends from
createDefaultConfig
- Also takes in the option
whitelist
that is injected into thewebpack-node-externals
package. - Creates a config with:
target: node
- __dirname is set to false
- Includes the babel-loader
- minimization is set to false
- externals injected from
webpack-node-externals
- Extends from
-
createTranspilerConfig
- Extends
createNodeConfig
- Uses
babelFileLoader
instead ofbabelLoader
in order to only transpile the files instead of creating a bundle.
- Extends
-
createApiConfig
- Extends from
createNodeConfig
- Creates a config where the output file is
index.js
- Extends from
-
createRenderConfig
- Not implemented yet but the purpose of it is to create a config for a React SSR server.
-
createFrontendConfig
- Extends from
createDefaultConfig
- Takes in the following arguments:
-
publicPath
: string -
port
number - for the devServer htmlOptions
-
- Creates a config for frontend development including:
- Loaders:
babelLoader
,cssLoader
,imageLoader
,manifestLoader
, - Plugins:
- CssPlugin (
mini-css-extract-loader
)
- CssPlugin (
- DevServer
- Optimization
- Loaders:
- Extends from