├── public └── .gitkeep ├── .stylelintrc.json ├── .github ├── FUNDING.yml └── dependabot.yml ├── .travis.yml ├── src ├── images │ └── webpack.png ├── scripts │ └── index.js ├── styles │ └── index.scss └── index.html ├── postcss.config.js ├── .browserslistrc ├── .gitignore ├── .babelrc ├── .eslintrc ├── README.md ├── webpack ├── webpack.config.prod.js ├── webpack.common.js └── webpack.config.dev.js ├── LICENSE └── package.json /public/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard" 3 | } 4 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [wbkd] 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "lts/*" 4 | - "node" 5 | script: npm run build 6 | -------------------------------------------------------------------------------- /src/images/webpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wbkd/webpack-starter/HEAD/src/images/webpack.png -------------------------------------------------------------------------------- /src/scripts/index.js: -------------------------------------------------------------------------------- 1 | import '../styles/index.scss'; 2 | 3 | console.log('webpack starterkit'); 4 | -------------------------------------------------------------------------------- /src/styles/index.scss: -------------------------------------------------------------------------------- 1 | $body-color: slateblue; 2 | 3 | body { 4 | color: $body-color; 5 | font-family: sans-serif; 6 | } 7 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const postcssPresetEnv = require('postcss-preset-env'); 2 | 3 | module.exports = { 4 | plugins: [postcssPresetEnv()], 5 | }; 6 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | [production staging] 2 | >5% 3 | last 2 versions 4 | Firefox ESR 5 | not ie < 11 6 | 7 | [development] 8 | last 1 chrome version 9 | last 1 firefox version 10 | last 1 edge version 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # production 5 | build 6 | 7 | # misc 8 | .DS_Store 9 | 10 | npm-debug.log 11 | yarn-error.log 12 | yarn.lock 13 | .yarnclean 14 | .vscode 15 | .idea 16 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "useBuiltIns": "usage", 7 | "corejs": "3.0.0" 8 | } 9 | ] 10 | ], 11 | "plugins": [ 12 | "@babel/plugin-syntax-dynamic-import", 13 | "@babel/plugin-proposal-class-properties" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@babel/eslint-parser", 3 | "extends": [ 4 | "eslint:recommended" 5 | ], 6 | "env": { 7 | "browser": true, 8 | "node": true 9 | }, 10 | "parserOptions": { 11 | "ecmaVersion": 8, 12 | "sourceType": "module", 13 | "requireConfigFile": false 14 | }, 15 | "rules": { 16 | "semi": 2 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | webpack starterkit 7 | 8 | 9 | 10 | Webpack logo 11 |

webpack starter

12 |

✨ A lightweight foundation for your next webpack based frontend project.

13 | 14 | 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Webpack Frontend Starterkit 2 | 3 | A lightweight foundation for your next webpack based frontend project. 4 | 5 | ### Installation 6 | 7 | ```sh 8 | npm install 9 | ``` 10 | 11 | ### Start Dev Server 12 | 13 | ```sh 14 | npm start 15 | ``` 16 | 17 | ### Build Prod Version 18 | 19 | ```sh 20 | npm run build 21 | ``` 22 | 23 | ### Features: 24 | 25 | - ES6 Support via [babel](https://babeljs.io/) (v7) 26 | - JavaScript Linting via [eslint](https://eslint.org/) 27 | - SASS Support via [sass-loader](https://github.com/jtangelder/sass-loader) 28 | - Autoprefixing of browserspecific CSS rules via [postcss](https://postcss.org/) and [postcss-preset-env](https://github.com/csstools/postcss-preset-env) 29 | - Style Linting via [stylelint](https://stylelint.io/) 30 | 31 | When you run `npm run build` we use the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to move the css to a separate file. The css file gets included in the head of the `index.html`. 32 | -------------------------------------------------------------------------------- /webpack/webpack.config.prod.js: -------------------------------------------------------------------------------- 1 | const Webpack = require('webpack'); 2 | const { merge } = require('webpack-merge'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | const common = require('./webpack.common.js'); 5 | 6 | module.exports = merge(common, { 7 | mode: 'production', 8 | devtool: 'source-map', 9 | stats: 'errors-only', 10 | bail: true, 11 | output: { 12 | filename: 'js/[name].[chunkhash:8].js', 13 | chunkFilename: 'js/[name].[chunkhash:8].chunk.js', 14 | }, 15 | plugins: [ 16 | new Webpack.DefinePlugin({ 17 | 'process.env.NODE_ENV': JSON.stringify('production'), 18 | }), 19 | new MiniCssExtractPlugin({ 20 | filename: 'css/[name].[chunkhash:8].css', 21 | chunkFilename: 'css/[name].[chunkhash:8].chunk.js', 22 | }), 23 | ], 24 | module: { 25 | rules: [ 26 | { 27 | test: /\.js$/, 28 | exclude: /node_modules/, 29 | use: 'babel-loader', 30 | }, 31 | { 32 | test: /\.s?css/i, 33 | use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'], 34 | }, 35 | ], 36 | }, 37 | }); 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2020 webkid GmbH 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: "/" 5 | schedule: 6 | interval: weekly 7 | time: "04:00" 8 | open-pull-requests-limit: 10 9 | ignore: 10 | - dependency-name: eslint 11 | versions: 12 | - 7.18.0 13 | - 7.19.0 14 | - 7.20.0 15 | - 7.21.0 16 | - 7.22.0 17 | - 7.23.0 18 | - 7.24.0 19 | - dependency-name: mini-css-extract-plugin 20 | versions: 21 | - 1.3.4 22 | - 1.3.5 23 | - 1.3.6 24 | - 1.3.8 25 | - 1.3.9 26 | - 1.4.0 27 | - 1.4.1 28 | - dependency-name: "@babel/core" 29 | versions: 30 | - 7.12.10 31 | - 7.12.13 32 | - 7.12.16 33 | - 7.12.17 34 | - 7.13.10 35 | - 7.13.13 36 | - 7.13.14 37 | - 7.13.15 38 | - 7.13.8 39 | - dependency-name: copy-webpack-plugin 40 | versions: 41 | - 7.0.0 42 | - 8.0.0 43 | - 8.1.0 44 | - dependency-name: "@babel/preset-env" 45 | versions: 46 | - 7.12.11 47 | - 7.12.13 48 | - 7.12.16 49 | - 7.12.17 50 | - 7.13.10 51 | - 7.13.12 52 | - 7.13.8 53 | - 7.13.9 54 | - dependency-name: webpack-cli 55 | versions: 56 | - 4.4.0 57 | - 4.5.0 58 | - dependency-name: webpack 59 | versions: 60 | - 5.17.0 61 | - 5.19.0 62 | -------------------------------------------------------------------------------- /webpack/webpack.common.js: -------------------------------------------------------------------------------- 1 | const Path = require('path'); 2 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 3 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 4 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 5 | 6 | module.exports = { 7 | entry: { 8 | app: Path.resolve(__dirname, '../src/scripts/index.js'), 9 | }, 10 | output: { 11 | path: Path.join(__dirname, '../build'), 12 | filename: 'js/[name].js', 13 | }, 14 | optimization: { 15 | splitChunks: { 16 | chunks: 'all', 17 | name: false, 18 | }, 19 | }, 20 | plugins: [ 21 | new CleanWebpackPlugin(), 22 | new CopyWebpackPlugin({ 23 | patterns: [{ from: Path.resolve(__dirname, '../public'), to: 'public' }], 24 | }), 25 | new HtmlWebpackPlugin({ 26 | template: Path.resolve(__dirname, '../src/index.html'), 27 | }), 28 | ], 29 | resolve: { 30 | alias: { 31 | '~': Path.resolve(__dirname, '../src'), 32 | }, 33 | }, 34 | module: { 35 | rules: [ 36 | { 37 | test: /\.mjs$/, 38 | include: /node_modules/, 39 | type: 'javascript/auto', 40 | }, 41 | { 42 | test: /\.html$/i, 43 | loader: 'html-loader', 44 | }, 45 | { 46 | test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/, 47 | type: 'asset' 48 | }, 49 | ], 50 | }, 51 | }; 52 | -------------------------------------------------------------------------------- /webpack/webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | const Path = require('path'); 2 | const Webpack = require('webpack'); 3 | const { merge } = require('webpack-merge'); 4 | const ESLintPlugin = require('eslint-webpack-plugin'); 5 | const StylelintPlugin = require('stylelint-webpack-plugin'); 6 | 7 | const common = require('./webpack.common.js'); 8 | 9 | module.exports = merge(common, { 10 | target: 'web', 11 | mode: 'development', 12 | devtool: 'eval-cheap-source-map', 13 | output: { 14 | chunkFilename: 'js/[name].chunk.js', 15 | }, 16 | devServer: { 17 | client: { 18 | logging: 'error', 19 | }, 20 | hot: true, 21 | }, 22 | plugins: [ 23 | new Webpack.DefinePlugin({ 24 | 'process.env.NODE_ENV': JSON.stringify('development'), 25 | }), 26 | new ESLintPlugin({ 27 | extensions: 'js', 28 | emitWarning: true, 29 | files: Path.resolve(__dirname, '../src'), 30 | }), 31 | new StylelintPlugin({ 32 | files: Path.join('src', '**/*.s?(a|c)ss'), 33 | }), 34 | ], 35 | module: { 36 | rules: [ 37 | { 38 | test: /\.js$/, 39 | include: Path.resolve(__dirname, '../src'), 40 | loader: 'babel-loader', 41 | }, 42 | { 43 | test: /\.s?css$/i, 44 | use: [ 45 | 'style-loader', 46 | { 47 | loader: 'css-loader', 48 | options: { 49 | sourceMap: true, 50 | }, 51 | }, 52 | 'postcss-loader', 53 | 'sass-loader', 54 | ], 55 | }, 56 | ], 57 | }, 58 | }); 59 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-starter", 3 | "version": "1.0.0", 4 | "description": "A light foundation for your next frontend project based on webpack.", 5 | "scripts": { 6 | "lint": "npm run lint:styles; npm run lint:scripts", 7 | "lint:styles": "stylelint src", 8 | "lint:scripts": "eslint src", 9 | "build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.js", 10 | "start": "webpack serve --config webpack/webpack.config.dev.js" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/wbkd/webpack-starter.git" 15 | }, 16 | "keywords": [ 17 | "webpack", 18 | "startkit", 19 | "frontend", 20 | "es6", 21 | "javascript", 22 | "webdev" 23 | ], 24 | "author": "webkid.io", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/wbkd/webpack-starter/issues" 28 | }, 29 | "devDependencies": { 30 | "@babel/core": "^7.20.5", 31 | "@babel/eslint-parser": "^7.19.1", 32 | "@babel/plugin-proposal-class-properties": "^7.18.6", 33 | "@babel/plugin-syntax-dynamic-import": "^7.8.3", 34 | "@babel/preset-env": "^7.20.2", 35 | "babel-loader": "^9.1.0", 36 | "clean-webpack-plugin": "^4.0.0", 37 | "copy-webpack-plugin": "^11.0.0", 38 | "cross-env": "^7.0.3", 39 | "css-loader": "^6.7.2", 40 | "eslint": "^8.28.0", 41 | "eslint-webpack-plugin": "^3.2.0", 42 | "file-loader": "^6.2.0", 43 | "html-loader": "^4.2.0", 44 | "html-webpack-plugin": "^5.5.0", 45 | "mini-css-extract-plugin": "^2.7.1", 46 | "node-sass": "^8.0.0", 47 | "postcss-loader": "^7.0.2", 48 | "postcss-preset-env": "^7.8.3", 49 | "sass-loader": "^13.2.0", 50 | "style-loader": "^3.3.1", 51 | "stylelint": "^14.15.0", 52 | "stylelint-config-standard": "^29.0.0", 53 | "stylelint-webpack-plugin": "^3.3.0", 54 | "webpack": "^5.75.0", 55 | "webpack-cli": "^5.0.0", 56 | "webpack-dev-server": "^4.11.1", 57 | "webpack-merge": "^5.8.0" 58 | }, 59 | "dependencies": { 60 | "@babel/polyfill": "^7.12.1", 61 | "core-js": "^3.26.1" 62 | } 63 | } 64 | --------------------------------------------------------------------------------