├── .babelrc ├── .eslintrc.js ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── postcss.config.js ├── prettier.config.js ├── src ├── css │ └── main.css ├── index.html └── index.js ├── stylelint.config.js ├── text.txt ├── webpack.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env", "react"] 3 | } 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | commonjs: true, 5 | es6: true 6 | }, 7 | extends: [ 8 | 'eslint:recommended', 9 | 'plugin:react/recommended', 10 | 'prettier', 11 | 'plugin:prettier/recommended' 12 | ], 13 | parserOptions: { 14 | ecmaFeatures: { 15 | jsx: true 16 | }, 17 | ecmaVersion: 2018, 18 | sourceType: 'module' 19 | }, 20 | plugins: ['react', 'prettier'], 21 | rules: { 22 | indent: ['error', 2], 23 | 'linebreak-style': ['error', 'unix'], 24 | quotes: ['warn', 'single'], 25 | semi: ['error', 'always'], 26 | 'no-unused-vars': [ 27 | 'warn', 28 | { vars: 'all', args: 'none', ignoreRestSiblings: false } 29 | ], 30 | 'prettier/prettier': 'error' 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Submodule of webpack-bolierplate. 2 | https://github.com/marharyta/webpack-boilerplate 3 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-boilerplate", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "yarn": { 8 | "version": "1.7.0", 9 | "resolved": "https://registry.npmjs.org/yarn/-/yarn-1.7.0.tgz", 10 | "integrity": "sha1-AHa5/eYBDgGVBSamCbxTvBde+SU=" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-boilerplate", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "repository": "git@github.com:marharyta/webpack-boilerplate.git", 6 | "author": "Margarita Obraztsova ", 7 | "license": "MIT", 8 | "scripts": { 9 | "dev": "NODE_ENV=development webpack-dev-server --mode=development --hot" 10 | }, 11 | "dependencies": { 12 | "autoprefixer": "^8.6.3", 13 | "babel-core": "^6.26.3", 14 | "babel-loader": "^7.1.4", 15 | "babel-preset-env": "^1.7.0", 16 | "babel-preset-react": "^6.24.1", 17 | "clean-webpack-plugin": "^0.1.19", 18 | "css-loader": "^0.28.11", 19 | "eslint": "^5.0.0", 20 | "eslint-config-prettier": "^2.9.0", 21 | "eslint-plugin-prettier": "^2.6.1", 22 | "extract-text-webpack-plugin": "^4.0.0-beta.0", 23 | "html-webpack-plugin": "^3.2.0", 24 | "mini-css-extract-plugin": "^0.4.0", 25 | "node-sass": "^4.9.0", 26 | "postcss-loader": "^2.1.5", 27 | "react": "^16.4.1", 28 | "react-dom": "^16.4.1", 29 | "sass-loader": "^7.0.3", 30 | "style-loader": "^0.21.0", 31 | "stylelint": "^9.3.0", 32 | "stylelint-config-recommended": "^2.1.0", 33 | "stylelint-webpack-plugin": "^0.10.5", 34 | "webpack": "^4.12.0", 35 | "webpack-cli": "^3.0.8", 36 | "webpack-dev-server": "^3.1.4", 37 | "webpack-md5-hash": "^0.0.6", 38 | "yarn": "^1.7.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | tabWidth: 2, 4 | semi: true, 5 | singleQuote: true, 6 | bracketSpacing: true 7 | }; 8 | -------------------------------------------------------------------------------- /src/css/main.css: -------------------------------------------------------------------------------- 1 | div { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './css/main.css'; 4 | 5 | class App extends React.Component { 6 | render() { 7 | return
Hello, world!
; 8 | } 9 | } 10 | 11 | const rootElement = document.getElementById('root'); 12 | 13 | ReactDOM.render(, rootElement); 14 | -------------------------------------------------------------------------------- /stylelint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['stylelint-config-recommended'], 3 | rules: { 4 | 'color-no-invalid-hex': true, 5 | 'font-family-no-duplicate-names': true, 6 | 'function-calc-no-unspaced-operator': true, 7 | 'unit-no-unknown': true, 8 | 'block-no-empty': true, 9 | 'selector-pseudo-class-no-unknown': true, 10 | 'selector-pseudo-element-no-unknown': true, 11 | 'media-feature-name-no-unknown': true, 12 | 'at-rule-no-unknown': true, 13 | 'comment-no-empty': true, 14 | 'no-duplicate-at-import-rules': true, 15 | 'no-extra-semicolons': true, 16 | 'no-invalid-double-slash-comments': true, 17 | 'declaration-no-important': true, 18 | 'declaration-block-single-line-max-declarations': 1, 19 | 'max-nesting-depth': 5, 20 | 'number-leading-zero': 'always', 21 | 'number-no-trailing-zeros': true, 22 | 'string-quotes': 'single', 23 | 'unit-case': 'lower', 24 | 'value-list-max-empty-lines': 0, 25 | 'property-case': 'lower', 26 | 'declaration-colon-space-after': 'always', 27 | 'declaration-colon-space-before': 'never', 28 | 'declaration-block-semicolon-newline-after': 'always-multi-line', 29 | 'declaration-block-semicolon-space-before': 'never', 30 | 'declaration-block-trailing-semicolon': 'always', 31 | 'block-opening-brace-space-before': 'always', 32 | 'selector-pseudo-class-case': 'lower', 33 | 'selector-pseudo-element-case': 'lower', 34 | 'selector-type-case': 'lower', 35 | 'media-feature-colon-space-after': 'always', 36 | 'media-feature-colon-space-before': 'never', 37 | 'media-feature-name-case': 'lower', 38 | 'comment-whitespace-inside': 'always' 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /text.txt: -------------------------------------------------------------------------------- 1 | hello 2 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | // webpack v4 2 | const path = require('path'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const WebpackMd5Hash = require('webpack-md5-hash'); 5 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 6 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 7 | const StyleLintPlugin = require('stylelint-webpack-plugin'); 8 | 9 | module.exports = { 10 | entry: { main: './src/index.js' }, 11 | output: { 12 | path: path.resolve(__dirname, 'dist'), 13 | filename: '[name].[hash].js' 14 | }, 15 | devtool: 'inline-source-map', 16 | devServer: { 17 | contentBase: './dist', 18 | open: true, 19 | hot: true 20 | }, 21 | module: { 22 | rules: [ 23 | { 24 | test: /\.js$/, 25 | exclude: /node_modules/, 26 | use: { 27 | loader: 'babel-loader' 28 | } 29 | }, 30 | { 31 | test: /\.css$/, 32 | use: [ 33 | 'style-loader', 34 | MiniCssExtractPlugin.loader, 35 | 'css-loader', 36 | 'postcss-loader' 37 | ] 38 | } 39 | ] 40 | }, 41 | plugins: [ 42 | new CleanWebpackPlugin('dist', {}), 43 | new MiniCssExtractPlugin({ 44 | filename: 'style.[contenthash].css' 45 | }), 46 | new HtmlWebpackPlugin({ 47 | inject: false, 48 | hash: true, 49 | template: './src/index.html', 50 | filename: 'index.html' 51 | }), 52 | new WebpackMd5Hash(), 53 | new StyleLintPlugin({ 54 | configFile: './stylelint.config.js', 55 | files: './src/css/*.css' 56 | }) 57 | ] 58 | }; 59 | --------------------------------------------------------------------------------