wp-ts-react-starter - npm Package Compare versions

Comparing version 0.1.35 to 0.2.0

package.json

@@ -7,3 +7,3 @@ {
   },
-  "version": "0.1.35",
+  "version": "0.2.0",
   "license": "MIT",
@@ -24,2 +24,12 @@ "description": "custom react boilerplate using webpack 5 and typescript",
   ],
+  "keywords": [
+    "react",
+    "webpack",
+    "chakra-ui",
+    "antd",
+    "axios",
+    "lockr",
+    "typescript",
+    "jwt"
+  ],
   "scripts": {
@@ -26,0 +36,0 @@ "v:patch": "yarn version --patch --no-git-tag-version",

vanilla/package.json

@@ -22,2 +22,3 @@ {
     "copy-webpack-plugin": "^6.3.0",
+    "css-loader": "^5.0.1",
     "css-minimizer-webpack-plugin": "^1.1.5",
@@ -35,11 +36,13 @@ "dotenv-webpack": "^5.0.1",
     "html-webpack-plugin": "^4.5.0",
+    "less": "^3.12.2",
+    "less-loader": "7.0.2",
     "mini-css-extract-plugin": "^1.2.1",
     "prettier": "^2.1.2",
-    "regenerator-runtime": "^0.13.7",
-    "terser-webpack-plugin": "^5.0.3",
+    "style-loader": "^2.0.0",
     "ts-loader": "^8.0.9",
-    "typescript": "^4.0.5",
+    "typescript": "^4.1.2",
     "webpack": "^5.4.0",
     "webpack-cli": "^4.2.0",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^3.11.0",
+    "webpack-bundle-analyzer": "^4.1.0"
   },
@@ -55,6 +58,5 @@ "dependencies": {
   "scripts": {
-    "build": "webpack --config ./webpack.prod.js --mode production",
-    "dev": "webpack serve",
-    "watch": "webpack --config ./webpack.config.js --mode development"
+    "build": "webpack --config ./webpack.prod.js",
+    "dev": "webpack serve --config ./webpack.dev.js"
   }
 }

vanilla/webpack.prod.js

@@ -1,31 +0,37 @@
-const TerserPlugin = require('terser-webpack-plugin');
-const path = require('path');
 const webpack = require('webpack');
-// const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const Dotenv = require('dotenv-webpack');
-const CopyPlugin = require('copy-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
 
-module.exports = {
-  entry: ['./src/index.tsx'],
+module.exports = merge(common, {
+  mode: 'production',
+
+  devtool: false,
+
+  optimization: {
+    minimize: true,
+    minimizer: ['...', new CssMinimizerPlugin()],
+    runtimeChunk: {
+      name: 'runtime',
+    },
+  },
+
+  performance: {
+    hints: false,
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  },
+
   module: {
     rules: [
       {
-        test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
-      },
-      {
         test: /\.less$/,
         use: [
+          MiniCssExtractPlugin.loader,
           {
-            loader: 'style-loader',
-          },
-          {
-            loader: MiniCssExtractPlugin.loader,
-          },
-          {
             loader: 'css-loader',
             options: {
-              sourceMap: true,
+              sourceMap: false,
             },
@@ -36,2 +42,3 @@ },
             options: {
+              sourceMap: false,
               lessOptions: {
@@ -44,44 +51,13 @@ javascriptEnabled: true,
       },
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: ['babel-loader'],
-      },
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.(png|jpe?g|gif)$/i,
-        use: [
-          {
-            loader: 'file-loader',
-          },
-        ],
-      },
     ],
   },
-  optimization: {
-    minimize: true,
-    minimizer: [new TerserPlugin({}), new CssMinimizerPlugin()],
-  },
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
-  },
-  output: {
-    path: path.resolve(__dirname, 'build'),
-    publicPath: '/',
-    filename: 'bundle.js',
-  },
+
   plugins: [
-    new CopyPlugin({ patterns: [{ from: 'public', to: '' }] }),
-    // new HtmlWebpackPlugin(),
     new webpack.DefinePlugin({ __DEVMODE__: false }),
-    new Dotenv(),
+    new BundleAnalyzerPlugin(),
     new MiniCssExtractPlugin({
-      filename: '[name].css',
-      chunkFilename: '[name]_[id].css',
+      filename: '[name].[contenthash].css',
+      chunkFilename: '[id].css',
     }),
   ],
-};
+});

with-antd/package.json

@@ -40,5 +40,3 @@ {
     "prettier": "^2.1.2",
-    "regenerator-runtime": "^0.13.7",
     "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.0.3",
     "ts-loader": "^8.0.9",
@@ -48,3 +46,4 @@ "typescript": "^4.1.2",
     "webpack-cli": "^4.2.0",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^3.11.0",
+    "webpack-bundle-analyzer": "^4.1.0"
   },
@@ -61,6 +60,5 @@ "dependencies": {
   "scripts": {
-    "build": "webpack --config ./webpack.prod.js --mode production",
-    "dev": "webpack serve",
-    "watch": "webpack --config ./webpack.config.js --mode development"
+    "build": "webpack --config ./webpack.prod.js",
+    "dev": "webpack serve --config ./webpack.dev.js"
   }
 }

with-antd/webpack.prod.js

@@ -1,32 +0,37 @@
-const TerserPlugin = require('terser-webpack-plugin');
-const path = require('path');
 const webpack = require('webpack');
-// const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const Dotenv = require('dotenv-webpack');
-const CopyPlugin = require('copy-webpack-plugin');
-const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
 
-module.exports = {
-  entry: ['./src/index.tsx'],
+module.exports = merge(common, {
+  mode: 'production',
+
+  devtool: false,
+
+  optimization: {
+    minimize: true,
+    minimizer: ['...', new CssMinimizerPlugin()],
+    runtimeChunk: {
+      name: 'runtime',
+    },
+  },
+
+  performance: {
+    hints: false,
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  },
+
   module: {
     rules: [
       {
-        test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
-      },
-      {
         test: /\.less$/,
         use: [
+          MiniCssExtractPlugin.loader,
           {
-            loader: 'style-loader',
-          },
-          {
-            loader: MiniCssExtractPlugin.loader,
-          },
-          {
             loader: 'css-loader',
             options: {
-              sourceMap: true,
+              sourceMap: false,
             },
@@ -37,2 +42,3 @@ },
             options: {
+              sourceMap: false,
               lessOptions: {
@@ -45,45 +51,13 @@ javascriptEnabled: true,
       },
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: ['babel-loader'],
-      },
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.(png|jpe?g|gif)$/i,
-        use: [
-          {
-            loader: 'file-loader',
-          },
-        ],
-      },
     ],
   },
-  optimization: {
-    minimize: true,
-    minimizer: [new TerserPlugin({}), new CssMinimizerPlugin()],
-  },
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
-  },
-  output: {
-    path: path.resolve(__dirname, 'build'),
-    publicPath: '/',
-    filename: 'bundle.js',
-  },
+
   plugins: [
-    new CopyPlugin({ patterns: [{ from: 'public', to: '' }] }),
-    // new HtmlWebpackPlugin(),
-    new AntdDayjsWebpackPlugin(),
     new webpack.DefinePlugin({ __DEVMODE__: false }),
-    new Dotenv(),
+    new BundleAnalyzerPlugin(),
     new MiniCssExtractPlugin({
-      filename: '[name].css',
-      chunkFilename: '[name]_[id].css',
+      filename: '[name].[contenthash].css',
+      chunkFilename: '[id].css',
     }),
   ],
-};
+});

with-chakra-ui/package.json

@@ -11,13 +11,12 @@ {
     "@babel/runtime": "^7.12.5",
-    "@types/lockr": "^0.8.6",
     "@types/node": "^14.14.6",
-    "@types/react": "^16.9.56",
+    "@types/react": "^16.9.55",
     "@types/react-dom": "^16.9.9",
     "@types/react-router-dom": "^5.1.6",
+    "@types/styled-components": "^5.1.4",
     "@types/webpack-env": "^1.15.3",
-    "@typescript-eslint/eslint-plugin": "^4.7.0",
-    "@typescript-eslint/parser": "^4.7.0",
+    "@typescript-eslint/eslint-plugin": "^4.6.1",
+    "@typescript-eslint/parser": "^4.6.1",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
-    "babel-plugin-import": "^1.13.1",
     "copy-webpack-plugin": "^6.3.0",
@@ -36,19 +35,14 @@ "css-loader": "^5.0.1",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^4.5.0",
     "less": "^3.12.2",
-    "less-loader": "^7.0.2",
+    "less-loader": "7.0.2",
     "mini-css-extract-plugin": "^1.2.1",
-    "null-loader": "^4.0.1",
     "prettier": "^2.1.2",
-    "regenerator-runtime": "^0.13.7",
     "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.0.3",
     "ts-loader": "^8.0.9",
-    "typescript": "^4.0.5",
-    "url-loader": "^4.1.1",
+    "typescript": "^4.1.2",
     "webpack": "^5.4.0",
-    "webpack-bundle-analyzer": "^4.1.0",
     "webpack-cli": "^4.2.0",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^3.11.0",
+    "webpack-bundle-analyzer": "^4.1.0"
   },
@@ -60,3 +54,2 @@ "dependencies": {
     "@emotion/styled": "^11.0.0",
-    "antd": "^4.8.2",
     "axios": "^0.21.0",
@@ -73,6 +66,5 @@ "formik": "^2.2.3",
   "scripts": {
-    "build": "webpack --config ./webpack.prod.js --mode production",
-    "dev": "webpack serve",
-    "watch": "webpack --config ./webpack.config.js --mode development"
+    "build": "webpack --config ./webpack.prod.js",
+    "dev": "webpack serve --config ./webpack.dev.js"
   }
 }

with-chakra-ui/webpack.prod.js

@@ -1,32 +0,37 @@
-const TerserPlugin = require('terser-webpack-plugin');
-const path = require('path');
 const webpack = require('webpack');
-// const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const Dotenv = require('dotenv-webpack');
-const CopyPlugin = require('copy-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
 
-module.exports = {
-  entry: ['./src/index.tsx'],
+module.exports = merge(common, {
+  mode: 'production',
+
+  devtool: false,
+
+  optimization: {
+    minimize: true,
+    minimizer: ['...', new CssMinimizerPlugin()],
+    runtimeChunk: {
+      name: 'runtime',
+    },
+  },
+
+  performance: {
+    hints: false,
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  },
+
   module: {
     rules: [
       {
-        test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
-      },
-      {
         test: /\.less$/,
         use: [
+          MiniCssExtractPlugin.loader,
           {
-            loader: 'style-loader',
-          },
-          {
-            loader: MiniCssExtractPlugin.loader,
-          },
-          {
             loader: 'css-loader',
             options: {
-              sourceMap: true,
+              sourceMap: false,
             },
@@ -37,2 +42,3 @@ },
             options: {
+              sourceMap: false,
               lessOptions: {
@@ -45,44 +51,13 @@ javascriptEnabled: true,
       },
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: ['babel-loader'],
-      },
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.(png|jpe?g|gif)$/i,
-        use: [
-          {
-            loader: 'file-loader',
-          },
-        ],
-      },
     ],
   },
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
-  },
-  optimization: {
-    minimize: true,
-    minimizer: [new TerserPlugin({}), new CssMinimizerPlugin()],
-  },
-  output: {
-    path: path.resolve(__dirname, 'build'),
-    publicPath: '/',
-    filename: 'bundle.js',
-  },
+
   plugins: [
-    new CopyPlugin({ patterns: [{ from: 'public', to: '' }] }),
     new webpack.DefinePlugin({ __DEVMODE__: false }),
-    new Dotenv(),
     new BundleAnalyzerPlugin(),
     new MiniCssExtractPlugin({
-      filename: '[name].css',
-      chunkFilename: '[name]_[id].css',
+      filename: '[name].[contenthash].css',
+      chunkFilename: '[id].css',
     }),
   ],
-};
+});

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Number of package files

69

increased by4.55%

Number of medium quality alerts

1

decreased by-50%

Number of lines in readme file

16

increased byInfinity%

Worsened metrics

Total package byte prevSize

51444

decreased by-86.92%

Lines of code

1130

decreased by-3.42%

No dependency changes