new setup

Author: nkakuev_cg

package.json

@@ -5,9 +5,10 @@
 	"author": "kakuevn <n.kakuev@gmail.com>",
 	"license": "MIT",
 	"scripts": {
-		"dev": "rollup -c --watch",
-		"build": "rollup -c",
-		"lint:fix": "eslint './src/**/*.{ts,tsx}'",
+		"dev": "webpack --colors --progress --watch",
+		"build": "webpack --colors --progress -p",
+		"eslint": "eslint './src/**/*.{ts,tsx}'",
+		"eslint:fix": "eslint src --fix",
 		"start": "npm-run-all --parallel dev test:watch",
 		"test": "jest",
 		"test:watch": "jest --watch"
@@ -16,14 +17,16 @@
 		"testURL": "http://localhost/",
 		"moduleDirectories": [
 			"node_modules",
-			"bower_components",
 			"shared"
 		],
 		"transformIgnorePatterns": [
 			"/node_modules/(?!(our-react-components-.*?\\.js$))"
 		],
 		"moduleNameMapper": {
 			"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
+		},
+		"transform": {
+			"^.+\\.(js|jsx)$": "babel-jest"
 		}
 	},
 	"dependencies": {
@@ -37,11 +40,18 @@
 		"@typescript-eslint/eslint-plugin": "^1.7.0",
 		"@typescript-eslint/parser": "^1.7.0",
 		"awesome-typescript-loader": "^5.2.1",
+		"babel-jest": "^24.7.1",
 		"eslint": "^5.16.0",
 		"eslint-config-prettier": "^4.2.0",
+		"eslint-formatter-friendly": "^6.0.0",
+		"eslint-loader": "^2.1.2",
 		"eslint-plugin-react-hooks": "^1.6.0",
+		"file-loader": "^3.0.1",
+		"npm-run-all": "^4.1.5",
 		"prettier": "^1.17.0",
 		"source-map-loader": "^0.2.4",
-		"typescript": "^3.4.5"
+		"typescript": "^3.4.5",
+		"uglifyjs-webpack-plugin": "^2.1.2",
+		"webpack-cli": "^3.3.1"
 	}
 }

webpack.config.js

@@ -1,3 +1,8 @@
+const path = require('path');
+const webpack = require('webpack');
+const lintFormatter = require('eslint-formatter-friendly');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
 module.exports = {
 	entry: './src/index.tsx',
 	output: {
@@ -10,6 +15,12 @@ module.exports = {
 
 	devtool: 'source-map',
 
+	stats: 'errors-only',
+
+	node: {
+		fs: 'empty'
+	},
+
 	resolve: {
 		modules: [ path.resolve(__dirname, './src'), 'node_modules' ],
 		extensions: [ '.ts', '.tsx', '.js', '.json' ]
@@ -29,10 +40,24 @@ module.exports = {
 					failOnError: false
 				}
 			},
+			{
+				test: /\.(eot|svg|ttf|woff|woff2)$/,
+				loader: 'file-loader?name=app/fonts/[name].[ext]'
+			},
+			{
+				test: /\.(png|jpg|gif)$/,
+				use: [
+					{
+						loader: 'file-loader',
+						options: {}
+					}
+				]
+			},
 			{ test: /\.tsx?$/, loader: 'awesome-typescript-loader' },
 			{ enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' }
 		]
 	},
+	plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), new UglifyJsPlugin() ],
 
 	externals: {
 		react: {
@@ -53,86 +78,3 @@ module.exports = {
 		}
 	}
 };
-
-// const path = require('path');
-// const webpack = require('webpack');
-// const lintFormatter = require('eslint-formatter-friendly');
-// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-
-// module.exports = {
-// 	entry: './src/index.js',
-// 	output: {
-// 		filename: 'index.js',
-// 		path: path.resolve(__dirname, 'dist'),
-// 		publicPath: '/dist',
-// 		library: '',
-// 		libraryTarget: 'commonjs2'
-// 	},
-// 	resolve: {
-// 		modules: [ path.resolve(__dirname, './src'), 'node_modules' ],
-// 		extensions: [ '.js', '.jsx', '.json' ]
-// 	},
-
-// 	externals: {
-// 		react: {
-// 			commonjs: 'react',
-// 			commonjs2: 'react',
-// 			amd: 'React',
-// 			root: 'React'
-// 		},
-// 		'react-dom': {
-// 			commonjs: 'react-dom',
-// 			commonjs2: 'react-dom',
-// 			amd: 'ReactDOM',
-// 			root: 'ReactDOM'
-// 		},
-// 		'styled-components': {
-// 			commonjs: 'styled-components',
-// 			commonjs2: 'styled-components'
-// 		}
-// 	},
-
-// 	stats: 'errors-only',
-
-// 	node: {
-// 		fs: 'empty'
-// 	},
-
-// module: {
-// 	rules: [
-// 		{
-// 			enforce: 'pre',
-// 			test: /\.js?$/,
-// 			loader: 'eslint-loader',
-// 			exclude: /node_modules/,
-// 			options: {
-// 				configFile: './.eslintrc.json',
-// 				formatter: lintFormatter,
-// 				failOnWarning: false,
-// 				failOnError: false
-// 			}
-// 		},
-// 		{
-// 			test: /\.(eot|svg|ttf|woff|woff2)$/,
-// 			loader: 'file-loader?name=app/fonts/[name].[ext]'
-// 		},
-// 		{
-// 			test: /\.js?$/,
-// 			loader: 'babel-loader',
-// 			exclude: /node_modules/
-// 		},
-// 		{
-// 			test: /\.(png|jpg|gif)$/,
-// 			use: [
-// 				{
-// 					loader: 'file-loader',
-// 					options: {}
-// 				}
-// 			]
-// 		}
-// 	]
-// },
-// 	devtool: 'inline-source-map',
-
-// 	plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), new UglifyJsPlugin() ]
-// };