Simple starter webpack 5 project template supporting SASS/PostCSS, Babel ES7, browser syncing, code linting. Easy project setup having multiple features and developer friendly tools.
MIT License
development
- sourcemaps
, browser synced developmentment server
production
- minification
, sourcemaps
browserslist
- just specify the browsers you want to support in the package.json
file for browserslist
:"browserslist": [
"last 2 versions",
"> 5%"
]
autoprefixer
- automatically adds vendor prefixes to CSS rulesbabel-preset-env
- smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s).jpeg
, jpg
, png
, gif
, svg
filesize and loading type via imagemin
. Plugin and Loader for webpack to optimize (compress) all images using imagemin
. Do not worry about size of images, now they are always optimized/compressed..sasslintrc
file. Configuration options can be found on sass-lint
documentation.airbnb
style, you can review and configure the rules in .eslintrc
file. Configuration options can be found on eslint
documentation.sass
.@babel/core
) - JavaScript compiler - Use next generation JavaScript, today.
webpack-dev-server
node
: >=18.12.0
npm
npm
clean install command.$ npm ci
More on the clean install npm command can be read here
npm ci
You can still use
npm install
in cases thenpm ci
raises system error due to specific platform incompatibilities.
package.json
file and optionally specify:
name
- Name of your project. A name can be optionally prefixed by a scope, e.g. @myorg/mypackage
.version
- Specify and maintain a version number indicator for your project code.author
- Your organisation or just yourself. You can also specify contributors
.description
- Short description of your project.keywords
- Put keywords in it. It’s an array of strings.repository
- Specify the place where your code lives.license
- Announce your code license, figure out the license from Choose an Open Source License .browserslist
- Specify the supported browsers versions - you can refer to full list of availalbe options.configuration/environment.js
if you want to specify:
server
: configure development server, specify host
, port
. Refer to the full development server configuration options for webpack-dev-server
.limits
: configure file size thresholds for assets optimizations.
paths
: src
or dist
directories names and file system location.webpack
configurationYou can additionally configure webpack
for specific environment:
development
- configuration/webpack.dev.config.js
production
- configuration/webpack.prod.config.js
sourcemap
files:
You should configure your server to disallow access to the Source Map files for normal users!
src/scss/
src/js/
src/images/
src/fonts/
src/
src/
directory, no need to manually configure each template anymore!$ npm run build
$ npm run watch
This command is suitable if you develop with external web server.
Note: File watching does not work with NFS (Windows) and virtual machines under VirtualBox. Extend the configuration in such cases by:
module.exports = {
//...
watchOptions: {
poll: 1000, // Check for changes every second
},
};
$ npm run dev
Optimize assets for production by:
$ npm run production
/dist/css/
/dist/js/
/dist/images/
/dist/images/design/
<img>
tags) are located under /dist/images/content/
/dist/fonts/
/dist/
$ npm run lint:sass
$ npm run lint:js
$ npm run stats
This will open the visualisaion on the default configuraiton URL
localhost:8888
, you can change this URL or port following the webpack-bundle-analyzer documentation.
This boilerplate template contains integration with Github Actions. The build system runs all linting scripts and deploys production optimized pages to GitHub pages upon push to the master
branch. However, note that this deployment flow only works for Project Pages, as User and Organization pages only support the master branch flow.
For more information on how to set up alternative deployment processes, check out the Github Actions documentation on deployment. The service can deploy to dozens of cloud providers, including Heroku, AWS, and Firebase.