jimmydalecleveland/webpack-starters

Webpack starters for making new projects

Webpack Starters for reference

A collection of different Webpack setups for quick referencing or starting from.

Each branch has a different setup for the named purpose, such as typescript showing a TypeScript variation.

NOTE: Typically the dist or public folder is ignored in git, but for demonstrations purposes I've left it tracked.

Start using for a new project, or playground

1. Clone the repo
2. Select the branch you want
3. Run npm i to install dependencies
4. Run one of the following commands, depending on intent:

Production Build

npm run build

Development Build

npm run build-dev

Development Build, watching for file changes

npm run watch

Development Server on port :8080

npm start

See output without browser

After running a build command, you can see the output without opening a browser by running:

node dist/main.js

webpack-starters's Issues

In branch "react-full-project". I am getting "Can't resolve 'babel-polyfill"

Hi i am facing the following issue

ERROR in ./src/common/components/ApiResponseHandler.js 17:0-24
Module not found: Error: Can't resolve 'babel-polyfill' in '/home/ashish/Projects/webpack-starters/src/common/components'
 @ ./src/searchForm/components/SearchByProfileId.js 29:0-78
 @ ./src/common/components/App.js 128:9-66
 @ ./src/index.js 5:0-42 11:32-35

my package.json looks like

{
  "name": "webpack-starters",
  "version": "1.0.0",
  "private": true,
  "description": "A collection of different Webpack setups for quick referencing or starting from",
  "scripts": {
    "start": "SERVE=true webpack serve",
    "watch": "webpack --watch",
    "build": "NODE_ENV=production webpack",
    "build-dev": "webpack",
    "clean": "rm -rf ./dist"
  },
  "author": "xyz",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^5.0.0-beta.5",
    "mini-css-extract-plugin": "^1.3.4",
    "postcss": "^8.2.4",
    "postcss-loader": "^4.1.0",
    "postcss-preset-env": "^6.7.0",
    "react-refresh": "^0.9.0",
    "sass": "^1.32.4",
    "sass-loader": "^10.1.1",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "axios": "~0.16.2",
    "classnames": "^2.2.6",
    "prop-types": "^15.6.2",
    "react": "^16.8.6",
    "react-addons-css-transition-group": "^15.6.2",
    "react-dom": "^16.8.6",
    "react-google-login": "^5.1.20",
    "react-google-tag-manager": "^2.2.1",
    "react-helmet": "~5.2.0",
    "react-icons": "^3.3.0",
    "react-idle-timer": "^4.1.3",
    "react-intersection-observer": "^8.25.2",
    "react-redux": "~5.0.7",
    "react-redux-router": "0.0.5",
    "react-render": "^1.2.1",
    "react-router": "~4.2.0",
    "react-router-dom": "~4.2.2",
    "react-router-last-location": "^1.1.0",
    "react-router-redux": "~4.0.8",
    "react-slick": "^0.23.1",
    "react-thunk": "~1.0.0",
    "react-transition-group": "^2.5.0",
    "redux": "~3.7.2",
    "redux-logger": "^3.0.6",
    "redux-promise-middleware": "^4.3.0",
    "redux-thunk": "~2.2.0",
    "render": "^0.1.4",
    "strophe": "^1.2.4",
    "strophe-plugins": "^0.1.3",
    "universal-cookie": "^3.1.0"
  }
}

I have added the @babel-polyfill still issue persist

versions

"webpack": "^5.11.1",
"webpack-cli": "^4.3.0",
"webpack-dev-server": "^3.11.0"
"react": "^16.8.6",

node: 10.23.x
npm: 6.14.4
os: ubuntu 16

can u please help with the issue
Thanks
rest every config is the same as in this "react-full-project" branch