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

🍺 Setup

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

  📝 See Browserslist Doc

🍔 Commands

See package.json

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

🔖 NOTES

• Rename .env.example to .env for dotenv

  $ mv .env.example .env
  

  📝 .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

@ GoogleChromeLabs/size-plugin#40