Repository files navigation

A Webpack 5 & Three.js boilerplate together with Babel, Sass, ESLint, Hot Module Replacement and Stylelint, optimized for development/production.

git clone git@github.com:brandflugan/three-js-webpack-boilerplatenpm i

npm start

You can view the development server atlocalhost:8080.

npm run build

Note: Installhttp-server globally to deploy a simple server.

npm i -g http-server

You can view the deploy by creating a server indist.

cd dist&& http-server

npm run fix-js

npm run fix-styling

• Three.js
• Webpack
• Babel
• Sass
• ESLint
• stylelint

• Three.js - Three.js framework.

• webpack - Module and asset bundler.
• webpack-cli - Command line interface for Webpack.
• webpack-dev-server - Development server for Webpack.

• @babel/core - Transpile ES6+ to backwards compatible JavaScript.
• @babel/preset-env - Smart defaults for Babel.
• babel-eslint - Lint Babel code.
• babel-polyfill - This will emulate a full ES2015+ environment.
• eslint - ESLint.

• babel-loader - Transpile files with Babel and Webpack.
• sass-loader - Load SCSS and compile to CSS.
  • node-sass - Node Sass.
• postcss-loader - Process CSS with PostCSS.
  • cssnano - Optimize and compress PostCSS.
  • postcss-preset-env - Sensible defaults for PostCSS.
• css-loader - Resolves CSS imports into JS.
• style-loader - Inject CSS into the DOM.
• file-loader - Copy files to build folder.
• url-loader - Encode and inline files. Falls back to file-loader.

• clean-webpack-plugin - Remove/clean build folders.
• copy-webpack-plugin - Copy files to build directory.
• html-webpack-plugin - Generate HTML files from template.
• stylelint-webpack-plugin - A Stylelint plugin for webpack.

• Rickard Börjesson
• Guillaume Fradin
• Markus Bjerre - Author

This project is open source and available under theMIT License.