This template was created with the following devDependencies
- webpack
- webpack-cli
- webpack-dev-server
- webpack-merge
- css-loader
- style-loader
- html-webpack-plugin
- mini-css-extract-plugin
- @babel/core
- @babel/preset-env
- @babel/preset-react
- babel-loader
- eslint
- sass
- sass-loader
Additional dependencies
- react
- react-dom
npm install -D webpack webpack-cli webpack-dev-server webpack-merge css-loader style-loader html-webpack-plugin mini-css-extract-plugin @babel/core @babel/preset-env @babel/preset-react babel-loader eslint
npm install react react-dom
The webpack configuration files were separated into common, dev and production files to allow separate configurations for development and production.
In package.json
were added the following scripts:
"scripts": {
/* ... Some default scripts ... */
"start": "webpack serve --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
The following dependencies were not installed but they can be installed for testing:
@testing-library/react
@testing-library/jest-dom
@testing-library/user-event
npm install -D @testing-library/react @testing-library/user-event @testing-library/jest-dom
To initialize eslint you can use one of the following commands:
npx eslint --init
// or
npm init @eslint/config
It'll ask to install some additional packages:
@eslint/create-config
This is the selected setup for this template:
How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JSON
Finally manager will ask to install more additional packages.
To enable react-hooks
and or a11y
configuration you need to add it in your .eslintrc.json
file:
{
"extends": [
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/recommended",
"airbnb"
],
"plugins": [
"react",
"jsx-a11y"
],
}
You may encounter a Module not found
error when you use an import
statement in your index file when trying to import an .jsx
file:
import App from './App'
You need to update your entry files and add the .jsx
extension in order to use import without writing the extension file:
module.exports = {
...
entry: './src/index.jsx',
...
resolve: {
extensions: ['...', '.jsx'],
},
};
Install dependencies:
npm install
To run a live server use the following command:
npm start
*If you make changes in webpack configuration files you'll need to restart live server
To build production files:
npm run build