├── .browserslistrc ├── .editorconfig ├── .gitignore ├── .prettierrc.json ├── README.md ├── babel.config.json ├── config ├── paths.js ├── webpack.common.js ├── webpack.dev.js └── webpack.prod.js ├── package.json ├── postcss.config.js └── src ├── images ├── bg-pattern.png └── intro.png ├── index.html ├── index.js ├── js └── example.js └── sass ├── main.scss └── scaffolding.scss /.browserslistrc: -------------------------------------------------------------------------------- 1 | [development] 2 | last 1 chrome version 3 | last 1 firefox version 4 | last 1 safari version 5 | 6 | [production] 7 | >0.2% 8 | not dead 9 | not op_mini all 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | 10 | [*.md] 11 | trim_trailing_whitespace = false 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # production 2 | /dist 3 | 4 | # Logs 5 | logs 6 | *.log 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | 11 | # Runtime data 12 | pids 13 | *.pid 14 | *.seed 15 | *.pid.lock 16 | 17 | # Directory for instrumented libs generated by jscoverage/JSCover 18 | lib-cov 19 | 20 | # Coverage directory used by tools like istanbul 21 | coverage 22 | 23 | # nyc test coverage 24 | .nyc_output 25 | 26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 27 | .grunt 28 | 29 | # Bower dependency directory (https://bower.io/) 30 | bower_components 31 | 32 | # node-waf configuration 33 | .lock-wscript 34 | 35 | # Compiled binary addons (http://nodejs.org/api/addons.html) 36 | build/Release 37 | 38 | # Dependency directories 39 | node_modules/ 40 | jspm_packages/ 41 | 42 | # Typescript v1 declaration files 43 | typings/ 44 | 45 | # Optional npm cache directory 46 | .npm 47 | 48 | # Optional eslint cache 49 | .eslintcache 50 | 51 | # Optional REPL history 52 | .node_repl_history 53 | 54 | # Output of 'npm pack' 55 | *.tgz 56 | 57 | # Yarn Integrity file 58 | .yarn-integrity 59 | 60 | # dotenv environment variables file 61 | .env 62 | 63 | # misc 64 | .DS_Store 65 | .env.local 66 | .env.development.local 67 | .env.test.local 68 | .env.production.local 69 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": true, 6 | "singleQuote": true, 7 | "trailingComma": "all", 8 | "bracketSpacing": true, 9 | "arrowParens": "avoid", 10 | "proseWrap": "always" 11 | } 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Webpack Starter Kit 2 | 3 | **Deprecation notice: сборка больше не поддерживается и не обновляется** 4 | 5 | Используйте [parcel-project-template](https://github.com/goitacademy/parcel-project-template) 6 | 7 | 8 | 9 | 87 | -------------------------------------------------------------------------------- /babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /config/paths.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | src: path.resolve(__dirname, '../src'), 5 | dist: path.resolve(__dirname, '../dist'), 6 | public: path.resolve(__dirname, '../public'), 7 | }; 8 | -------------------------------------------------------------------------------- /config/webpack.common.js: -------------------------------------------------------------------------------- 1 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 4 | const WebpackBar = require('webpackbar'); 5 | const paths = require('./paths'); 6 | 7 | module.exports = { 8 | entry: [paths.src + '/index.js'], 9 | output: { 10 | path: paths.dist, 11 | filename: '[name].bundle.js', 12 | publicPath: '/', 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.js$/, 18 | use: ['babel-loader'], 19 | }, 20 | { 21 | test: /\.(?:ico|gif|png|jpg|jpeg)$/i, 22 | type: 'asset/resource', 23 | }, 24 | { 25 | test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, 26 | type: 'asset/inline', 27 | }, 28 | { 29 | test: /\.hbs$/, 30 | use: 'handlebars-loader', 31 | }, 32 | ], 33 | }, 34 | plugins: [ 35 | new CleanWebpackPlugin(), 36 | new WebpackBar(), 37 | new CopyWebpackPlugin({ 38 | patterns: [ 39 | { 40 | from: paths.public, 41 | to: 'assets', 42 | globOptions: { 43 | ignore: ['*.DS_Store'], 44 | }, 45 | noErrorOnMissing: true, 46 | }, 47 | ], 48 | }), 49 | new HtmlWebpackPlugin({ 50 | template: paths.src + '/index.html', 51 | filename: 'index.html', 52 | }), 53 | ], 54 | resolve: { 55 | modules: [paths.src, 'node_modules'], 56 | extensions: ['.js', '.json'], 57 | }, 58 | }; 59 | -------------------------------------------------------------------------------- /config/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const { merge } = require('webpack-merge'); 3 | const paths = require('./paths'); 4 | const commonConfig = require('./webpack.common.js'); 5 | 6 | module.exports = merge(commonConfig, { 7 | mode: 'development', 8 | devtool: 'inline-source-map', 9 | // devServer: { 10 | // historyApiFallback: true, 11 | // contentBase: paths.dist, 12 | // compress: true, 13 | // open: true, 14 | // noInfo: true, 15 | // quiet: true, 16 | // clientLogLevel: 'warning', 17 | // stats: 'errors-only', 18 | // hot: true, 19 | // port: 4040, 20 | // }, 21 | devServer: { 22 | historyApiFallback: true, 23 | contentBase: paths.dist, 24 | open: true, 25 | compress: true, 26 | hot: true, 27 | port: 8080, 28 | }, 29 | module: { 30 | rules: [ 31 | { 32 | test: /\.(scss|css)$/, 33 | use: [ 34 | 'style-loader', 35 | { 36 | loader: 'css-loader', 37 | options: { 38 | sourceMap: true, 39 | importLoaders: 1, 40 | modules: true, 41 | }, 42 | }, 43 | { 44 | loader: 'postcss-loader', 45 | options: { 46 | sourceMap: true, 47 | }, 48 | }, 49 | { 50 | loader: 'sass-loader', 51 | options: { 52 | sourceMap: true, 53 | }, 54 | }, 55 | ], 56 | }, 57 | ], 58 | }, 59 | plugins: [new webpack.HotModuleReplacementPlugin()], 60 | }); 61 | -------------------------------------------------------------------------------- /config/webpack.prod.js: -------------------------------------------------------------------------------- 1 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 2 | const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); 3 | const { merge } = require('webpack-merge'); 4 | const paths = require('./paths'); 5 | const commonConfig = require('./webpack.common.js'); 6 | 7 | module.exports = merge(commonConfig, { 8 | mode: 'production', 9 | devtool: false, 10 | output: { 11 | path: paths.dist, 12 | publicPath: '/', 13 | filename: 'js/[name].[contenthash].bundle.js', 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.(scss|css)$/, 19 | use: [ 20 | MiniCssExtractPlugin.loader, 21 | { 22 | loader: 'css-loader', 23 | options: { 24 | importLoaders: 2, 25 | sourceMap: false, 26 | modules: true, 27 | }, 28 | }, 29 | 'postcss-loader', 30 | 'sass-loader', 31 | ], 32 | }, 33 | ], 34 | }, 35 | plugins: [ 36 | new MiniCssExtractPlugin({ 37 | filename: 'styles/[name].[contenthash].css', 38 | chunkFilename: '[id].css', 39 | }), 40 | ], 41 | optimization: { 42 | minimize: true, 43 | minimizer: [new CssMinimizerPlugin(), '...'], 44 | runtimeChunk: { 45 | name: 'runtime', 46 | }, 47 | splitChunks: { 48 | cacheGroups: { 49 | vendor: { 50 | test: /[\\/]node_modules[\\/]/, 51 | name: 'vendors', 52 | chunks: 'all', 53 | }, 54 | }, 55 | }, 56 | }, 57 | performance: { 58 | hints: false, 59 | maxEntrypointSize: 512000, 60 | maxAssetSize: 512000, 61 | }, 62 | }); 63 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-starter-kit", 3 | "version": "2.0.0", 4 | "description": "Webpack starter kit", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "cross-env NODE_ENV=development webpack serve --config config/webpack.dev.js", 8 | "build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/luxplanjay/webpack-starter-kit.git" 13 | }, 14 | "keywords": [], 15 | "author": "Alexander Repeta ", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/luxplanjay/webpack-starter-kit/issues" 19 | }, 20 | "homepage": "https://github.com/luxplanjay/webpack-starter-kit#readme", 21 | "devDependencies": { 22 | "@babel/core": "^7.14.2", 23 | "@babel/preset-env": "^7.14.2", 24 | "babel-loader": "^8.2.2", 25 | "clean-webpack-plugin": "^4.0.0-alpha.0", 26 | "copy-webpack-plugin": "^8.1.1", 27 | "cross-env": "^7.0.3", 28 | "css-loader": "^5.2.4", 29 | "css-minimizer-webpack-plugin": "^3.0.0", 30 | "handlebars": "^4.7.7", 31 | "handlebars-loader": "^1.7.1", 32 | "html-webpack-plugin": "^5.3.1", 33 | "mini-css-extract-plugin": "^1.6.0", 34 | "node-sass": "^6.0.0", 35 | "postcss-loader": "^5.3.0", 36 | "postcss-preset-env": "^6.7.0", 37 | "sass-loader": "^11.1.1", 38 | "style-loader": "^2.0.0", 39 | "webpack": "^5.37.0", 40 | "webpack-cli": "^4.7.0", 41 | "webpack-dev-server": "^3.11.2", 42 | "webpack-merge": "^5.7.3", 43 | "webpackbar": "^5.0.0-3" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'postcss-preset-env': { 4 | browsers: 'last 2 versions', 5 | }, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /src/images/bg-pattern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/webpack-starter-kit/785a316523061384506b0905301a662980a7e9f1/src/images/bg-pattern.png -------------------------------------------------------------------------------- /src/images/intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luxplanjay/webpack-starter-kit/785a316523061384506b0905301a662980a7e9f1/src/images/intro.png -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webpack Starter Kit 8 | 9 | 10 | 11 |
12 |

Webpack starter kit

13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { example } from '@/js/example'; 2 | import '@/sass/main.scss'; 3 | 4 | example(); 5 | -------------------------------------------------------------------------------- /src/js/example.js: -------------------------------------------------------------------------------- 1 | export const example = () => console.log('this is an example'); 2 | -------------------------------------------------------------------------------- /src/sass/main.scss: -------------------------------------------------------------------------------- 1 | @import url('./scaffolding.scss'); 2 | -------------------------------------------------------------------------------- /src/sass/scaffolding.scss: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, 6 | *::before, 7 | *::after { 8 | box-sizing: inherit; 9 | } 10 | 11 | body { 12 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 13 | 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 14 | 15 | /* 16 | * CSS image reference example. 17 | */ 18 | background-image: url('../images/bg-pattern.png'); 19 | } 20 | --------------------------------------------------------------------------------