webpack-config-react
v0.2.0
Published
A bare, modern Webpack 5 config to create a react app without create-react-app. Not battery included!
Downloads
13
Readme
webpack-config-react
A bare, modern Webpack 5 config to create a react app without create-react-app. Not battery included!
Note: This package is only for those who are experienced with web bundling, transpilation (eg. @babel/preset-env
), optimization, since it comes with no opinionated configuration out of the box. If you are a beginner, it's better to stick with create-react-app or use Next.js.
Features
- Freedom to config CSS, images, svg, etc. (eg. Use the new Asset Modules)
- Support both babel and swc. Allow custom config files.
- Public folder (
./public
) - Examples to incrementally add back features like CSS, PostCSS, SASS, Modules or TypeScript.
Installation
npm i --save-dev webpack-config-react webpack webpack-cli webpack-dev-server
Usage
package.json scripts
Add the following scripts to your package.json
:
{
"scripts": {
"build": "webpack --mode=production",
"dev": "webpack serve"
}
}
To serve the built app, you can use sirv-cli:
{
"scripts": {
"start": "sirv build"
}
}
Create React App Deployment article also helps since this config also outputs file to build
(by defaults).
webpack.config.js
Create webpack.config.js
:
const { createConfig } = require("webpack-config-react");
module.exports = async (env, argv) => {
const webpackConfig = await createConfig(
argv.mode === "production" || env.production
);
return webpackConfig;
};
To extend webpack-config-react
, we can use webpack-merge to merge additional configs into the return value of await createConfig()
.
npm i --save-dev webpack-merge
See examples for some usages.
Up next, depending on your preferences and requirements, we can either use babel or swc.
With babel
Install dependencies:
npm i --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
Create babel.config.json
(or other formats)
{
"presets": [
["@babel/preset-env"],
["@babel/preset-react", { "runtime": "automatic" }]
]
}
With swc
Install dependencies:
npm i --save-dev @swc/core swc-loader
Create .swcrc
:
{
"jsc": {
"parser": {
"syntax": "ecmascript",
"jsx": true
},
"transform": {
"react": {
"runtime": "automatic"
}
}
}
}
Recommended Configs
Aiming to be simple, this does not include configs that are helpful to development. The following shows how to re-enable them.
module.exports = async (env, argv) => {
const isEnvProduction = argv.mode === "production" || env.production;
const webpackConfig = await createConfig(isEnvProduction);
return merge(webpackConfig, {
devtool: isEnvProduction ? "source-map" : "eval-source-map",
module: {
rules: [
{
test: /\.(js|mjs|jsx|ts|tsx|css)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
enforce: "pre",
use: ["source-map-loader"],
},
],
},
});
};
Configurations
An options param can passed as the second argument to createConfig
.
createConfig(isEnvProduction, options);
moduleFileExtensions
: A list of module file extension to resolve. Default:["web.mjs","mjs","web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx"]
.pathEntry
: Path to entry file. Default:./src/index.js
.pathSrc
: Path to src directory (will be proccessed by babel-loader/swc-loader). Default:./src
.pathHtml
: Path to HTML file. Default:./public/index.html
.pathBuild
: Path to build output directory. Default:./build
.pathPublic
: Path to "public" folder (will be copied to build directory). Default:./public
.