@cdoublev/webpack-parts

Webpack parts

1. About
2. Installation
3. Configuration

About

@cdoublev/wepback-parts simplifies creating common Webpack configurations.

It exposes functions taking an optional object of a minimal set of parameters with sane default values, returning one or more parts of a Webpack configuration (to merge with webpack-merge).

Example (webpack.config.js)

  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const { merge } = require('webpack-merge')
  const parts = require('@cdoublev/webpack-parts')

  module.exports = merge(
    { mode: 'development' },
    parts.extractFiles(),
    parts.extractCss(),
    parts.loadJs(),
    parts.serve())

Installation

  npm i @cdoublev/webpack-parts

@cdoublev/webpack-parts can be safely used with Webpack v5 in the active LTS version of NodeJS.

Configuration

buildRender

Option	Default
filename	'render.js'
mode	'production'

buildRender() bundles a JavaScript entry point and imported modules without CSS assets. This entry point should be located in a server directory at the root of the project.

It is intented for bundling a server or static render script.

externalize

Option	Default
keep	[]

externalize() excludes all native and installed modules from the bundle but keep the given module names.

It is intended for bundling a server application that will import externalized modules with require().

extractCss

Option	Type	Default
chunkFilename	'[name]-[contenthash].[ext]'
exclude	undefined
filename	'[name]-[contenthash].[ext]'
include	undefined
modules	{ localIdentName: '[name]_[local]_[hash:base64:5]' }

extractCss() resolves CSS files imported in JavaScript files, transpiles their PostCSS syntax and features, generates locally scoped CSS class names (CSS modules), and emits the corresponding files into the output directory.

Note: hot module replacement requires not defining filename and chunkFilename using [hash], [chunkhash], or [contenthash].

extractFiles

Option	Type	Default
filename	String	'[hash][ext][query]'

extractFiles() resolves multimedia files (images, fonts, pdf) imported from other files, and creates a copy in the output directory.

hotModuleReload

hotModuleReload() enables hot module replacement.

It is automatically enabled with serve() (webpack-dev-server) therefore it is intented to be used in the client configuration of a server side rendered application.

loadJs

Option	Default
include	undefined
exclude	undefined

loadJs() forwards the JavaScript entry points and imported modules to babel, so that it transpiles the syntax and polyfills the interfaces.

loadJs() also gathers common modules into a single common.js file, and extracts the Webpack runtime into a separate runtime.js file.

serve

Option	Default
[domain]https://webpack.js.org/configuration/dev-server/#websocketurl (hostname)	'localhost'
port	8080
watch	watch

serve() runs an HTTP server serving the bundled application loaded in src/index.html with hot module replacement enabled.

watch

Option	Default
poll	200
aggregateTimeout	200
ignored	/node_modules/

watch() enables files watching and automatic recompilation on change.