webpack-postcss

My Personal Boilerplate

• webpack 5
  • Dynamic entry points: w/ @sect/webpack-sweet-entry
• PostCSS w/ postcss-preset-env
• SWC
• ESLint w/ Airbnb
• stylelint
• Prettier
• Secretlint
• husky / lint-staged

Branches

Branch	Description
master	PostCSS that compliant tomorrow’s CSS syntax as much as possible w/ postcss-preset-env
module	ES Modules <script type="module"> Support for Differential Serving of Modern and Legacy bundle. In the next version this branch will be merged into the master branch.
sass	+ SASS - PostCSS
tailwindcss	+ Tailwind CSS
typescript	+ TypeScript - JavaScript
react	☝️ You can also use React partially + React
react-typescript	react + typescript
vuejs	☝️ You can also use Vue.js partially + Vue.js
webpack-dev-server	+ webpack-dev-server

:beer: Setup

• Setting for Support Browser (For Autoprefixer / SWC / postcss-preset-env)
  Edit the following Line
  package.json

  :memo: See Browserslist Doc

:hamburger: Commands

See package.json

npm script	Description
npm run dev	Watching for Dev
npm run build	Building for Deploy

:bookmark: NOTES

• Rename .env.example to .env for dotenv

  $ mv .env.example .env
  

  :memo: .env file is already set to "ignore" within the .giignore file.

Troubleshooting

Remove Cache (SWC / ESLint / webpack)

$ rm -rf node_modules/.cache/swc-loader
$ rm -rf node_modules/.cache/eslint-loader
$ rm -rf node_modules/.cache/webpack
# Remove all
$ rm -rf node_modules/.cache

Known Issues on webpack 5

@ https://github.com/GoogleChromeLabs/size-plugin/issues/40