@schlagerkhan/webpack-simple v0.1.3
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
: stringdistDir
: 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
: stringport
number - for the devServerhtmlOptions
- Creates a config for frontend development including:
- Loaders:
babelLoader
,cssLoader
,imageLoader
,manifestLoader
, - Plugins:
- CssPlugin (
mini-css-extract-loader
)
- CssPlugin (
- DevServer
- Optimization
- Loaders:
- Extends from