webpack-react-starter-kit
Boilerplate to kick off your react app using webpack
This boilerplate makes the following available to your app at the start:
webpack_build
webpack_build contains pre-configured environments and composable presets.
Environments
Environments include the common
(which is loaded first) and either development
or production
(which is loaded on top of common
). There is also none
in case you want to provide your customized environment.
Usage
webpack --env.mode development
webpack-dev-server --env.mode development
if --env.mode
is not provided, default to environment production
Presets
Presets are bite-sized webpack configs you can apply using applyPresets
in your webpack.config.js
or supply --env.presets
through command line
webpack --env.presets noMinimize --env.presets analyze --env.openAnalyzer 0
Available presets
clean
Run clean-webpack-plugin
to clean the output folder specified in output.path
(default is build
). Setting output.path
using --env.output.path
.
outputDev
Applicable only when you use webpack-dev-server
, run write-file-webpack-plugin
to output the files to output.path
.
serveStatics
Run copy-webpack-plugin
to copy the static content files from the folder speficied in staticContents
to the build folder specified by output.path
. Those are the files which appear as links in your app instead of being imported and packed by webpack.
const DEFAULT_ENV = {
mode: 'production',
output: { path: path.resolve(__dirname, 'build') },
presets: ['serveStatics'],
staticContents: [path.resolve(__dirname, 'public')],
};
extractCss
Use mini-css-extract-plugin
to extract css to a separate file for fasting loading of bundle.js. This preset is applied for production
environment.
analyze
Start the webpack-bundle-analyzer
after completing the build, set --env.openAnalyzer 0
to prevent opening a new window to show bundle graph (default is true).
limitTimezones
If you use moment-timezone
in your app, you can apply this preset to replace the provided full timezone file by moment-timezone
with your own customize timezone file. This preset requires argument timezonesFilepath
to specify the path to your timezone file.
const DEFAULT_ENV = {
mode: 'production',
output: { path: path.resolve(__dirname, 'build') },
presets: ['limitTimezones'],
timezonesFilepath: path.resolve(__dirname, 'src/data/assets/i18n/timezones.json'),
};
trimLocales
If you use moment
in your app, you can apply this preset to only pack those locales your app want to support from moment/locale
via command line --env.locales
. If none is supplied, no locale is packed.
webpack --env.locales de --env.locales fr
You can create your own presets with naming convention webpack.nameOfPreset.js
and put them inside webpack_build/presets
babel
babel is pre-configured with 2 presets @babel/preset-env
and @babel/preset-react
and all the proposal from stage-0 to stage-3 (at the time of this writing) for your convenience.