webpack4-config-for-react

webpack4-config-for-react is designed for different kinds of web app. It is based on create-react-app, but it's more flexible.

Installation

$ npx install-peerdeps -D webpack4-config-for-react

Usage

const createReactConfig = require('webpack4-config-for-react')

const config = createReactConfig({
  mode = process.env.NODE_ENV
})

API

createReactConfig.options:

• webpack internal config

name	type	default	description
mode	string	'development'	see webpack mode
publicPath	string	'./'	see webpack publicPath

• app path config

name	type	default	description
appRoot	string	'.'	the application's root dir
appSrc	string	'./src'	source code dir
appEntry	string	'./src/index.js'	source code entry file
appBuild	string	'./dist'	output dir after bundling
appPkgJson	string	'./package.json'	package.json file path
appNodeModules	string	'./node_modules'	dependency's dir
appHtml	string	'./public/index.html'	the application's html file
appTsConfig	string	'./tsconfig.json'	tsconfig.json file path
swSrc	string	'./src/service-worker'	service worker dir

• feature config

name	type	default	description
useReactRefresh	boolean	false	whether or not use @pmmmwh/react-refresh-webpack-plugin
useSourceMap	boolean	false	whether or not use sourceMap
useTypescript	boolean	false	whether or not use typescript
useTsCheck	boolean	false	whether or not check ts type
useInlineRuntimeChunk	boolean	true	whether or not use react-dev-utils/InlineChunkHtmlPlugin

• loader & plugin config

name	type	default	description
imageInlineSizeLimit	string	'10000'	image inline size limit, see url-loader limit
interpolateHtmlPlugin	object	{ PUBLIC_URL: './' }	new InterpolateHtmlPlugin(HtmlWebpackPlugin, interpolateHtmlPlugin)
definePlugin	object	{}	DefinePlugin params
forkTsCheckerWebpackPlugin	object	{reportFiles: ['../**/src/**/*.{ts,tsx}','**/src/**/*.{ts,tsx}','!**/src/**/__tests__/**','!**/src/**/?(*.)(spec|test).*',]}	react-dev-utils/ForkTsCheckerWebpackPlugin params, only valid when useTypescript and useTsCheck are enabled

• other

name	type	default	description
appName	string	'app'	the application's name

Caveats

You have to set process.env.NODE_ENV by yourself, cause babel needs process.env.NODE_ENV not undefined.