Optimizing static website with webpack 5
Run development server in localhost with Hot reload.
Build code for production:
- Bundle code (multiple pages).
- Minify HTML + CSS, Minify + Obfuscate JS.
- Auto inject CSS to end of
<head>tag and JS to end of<body>tag. - Rename CSS + JS file by hash content to Cache Busting.
- Compress images.
NPM: npm install
Yarn: yarn install
NPM: npm start
Yarn: yarn start
Source code for development inside src folder (can be changed in config).
NPM: npm run build
Yarn: yarn build
Code built for production inside dist folder (can be changed in config).
Config entry-points in webpack.common.js.
Default project structure:
Vietnamese tutorial: Tối ưu static page với Webpack