|
5 månader sedan | |
---|---|---|
.. | ||
.vscode | 2 år sedan | |
config | 3 år sedan | |
dist | 5 månader sedan | |
mock | 1 år sedan | |
src | 9 månader sedan | |
test | 3 år sedan | |
webpack | 9 månader sedan | |
.babelrc | 1 år sedan | |
.eslintcache | 2 år sedan | |
.eslintrc | 3 år sedan | |
.eslintrc.json.back | 3 år sedan | |
.gitignore | 3 år sedan | |
LICENSE | 3 år sedan | |
README.md | 3 år sedan | |
debug.log | 3 år sedan | |
package.json | 9 månader sedan | |
package_old.json | 2 år sedan | |
postcss.config.js | 3 år sedan | |
test.js | 3 år sedan | |
test.txt | 3 år sedan | |
tsconfig.json | 2 år sedan | |
tslint.json | 3 år sedan | |
webapp.cmake | 5 månader sedan | |
webapp.code-workspace | 2 år sedan | |
webpack.c | 5 månader sedan | |
webpack.config.js | 1 år sedan | |
webpack.h | 5 månader sedan |
SASS · Babel · Bootstrap · JQuery · PopperJS · Font Awesome
This Webpack4-Sass Boilerplate contains the following features:
This project contains the following loaders & plugins:
node-sass
for compiling sass (SCSS)babel-loader
for compiling ES6 codebabel-eslint && eslint-loader
for Linting your .jstslint
for Linting your .tslodash-webpack-plugin
create smaller Lodash builds by replacing feature sets of modules with noop, identity, or simpler alternatives.webpack-dev-server
for serving & Hot-Reloadingcss-loader
for compressing csssass-loader
for compressing and loading scss & sassurl- & file-loader
for loading and optimizing imagesxml and csv loader
for loading data fileshtml-loader
for loading & optimizing html filesclean-webpack-plugin
for keeping your dist folder cleanfavicons-webpack-plugin
generate favicons form your "logo.png"Make sure these are installed first.
git clone https://github.com/AndyKorek/webpack-boilerplate-sass-ts-bootstrap4-fontawesome.git
cd
into project directory.Run npm i
to install required dependencies.
Run the Dev Server with (with Hot Reloading) npm run dev
npm run build
This will:
src
- > source directory
dist
-> build directory
├── src
│ ├── assets
│ │ └── images
│ ├── fonts
│ ├── sass
│ │ ├── layout
| | | └── _features.scss
│ │ ├── setup
| | | └── _normalize.scss
│ │ ├── themes
| | | ├── _slate.scss
| | | └── _yeti.scss
│ │ ├── utils
| | | ├── _mixins.scss
| | | └── _variables.scss
│ │ ├── _globals.scss
│ │ ├── _headings.scss
│ │ ├── _typography.scss
│ │ ├── _vendor.scss
│ │ └── main.scss
│ ├── ts
│ │ ├── custom.ts
│ │ ├── line-awesome.ts
│ │ ├── vendor.ts
│ |── .htaccess
│ |── 404.html
│ |── index.html
│ └── index.ts
├── dist
│ ├── assets
│ │ ├── images
│ │ └──
│ ├── css
│ │ ├── vendors.[contenthash].css
│ │ └── main.contenthash].css
│ ├── js
│ │ ├── main.[contenthash].js
│ │ ├── runtime.[contenthash].js
│ │ └── vendors.[contenthash].js
│ │
│ └── index.html
in src/js/vendor/_boostrap.js
uncomment all Features you need
put your custom js to src/js/_custom.js
Add sass
(.scss) files to src/_scss
folder.
Make sure you import the scss file in main.scss
@import "filename";
Add your assets to src/assets/
Add images
to src/assets/images
Code released under the MIT License.
</> with :heart: from Germany