webpack-shared

Shared webpack config

Install

pnpm add -D webpack-shared

Usage

ESModules only

import { join } from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin'

import {
	shared,
	base,
	css,
	react,
	typescript,
	devServer,
	plugin
} from 'webpack-shared'

// Custom part
function entry() {
	return { entry: './example/index.tsx' }
}

// Custom plugin
const html = plugin(({ template, root }) => {
	return {
		plugins: [
			new HtmlWebpackPlugin({
				template: join(root, template),
				inject: 'body'
			})
		]
	}
})

// Config
export default shared(import.meta.url, [
	base(),
	css(),
	devServer(),
	react(),
	typescript(),

	entry,
	html({ template: 'index.html' })
])

The config parts will be merged by mergeAndConcat from merge-anything library.

See the example app.