@lightscale/webpack-config 1.0.3

package/index.js

@@ -0,0 +1,137 @@
+import * as path from 'path';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import NotifierPlugin from 'webpack-notifier';
+import ManifestPlugin from 'webpack-assets-manifest';
+import StylelintPlugin from 'stylelint-webpack-plugin';
+import EsLintPlugin from 'eslint-webpack-plugin';
+import WebpackbarPlugin from 'webpackbar';
+import CleanTerminalPlugin from 'clean-terminal-webpack-plugin';
+import {CleanWebpackPlugin} from 'clean-webpack-plugin';
+import SvgChunkWebpackPlugin from 'svg-chunk-webpack-plugin';
+
+
+export class Paths {
+  #jsSourcePath;
+  #scssSourcePath;
+
+  constructor({dir, source, target, js, scss}) {
+    this.sourcePath = path.resolve(dir, source);
+    this.targetPath = path.resolve(dir, target);
+    this.jsSourcePath = js;
+    this.scssSourcePath = scss;
+  }
+
+  jsEntry(path) {
+    return `${this.jsSourcePath}/${path}`;
+  }
+
+  scssEntry(path) {
+    return `${this.scssSourcePath}/${path}`;
+  }
+};
+
+export const makeConfig = (env, argv, options) => {
+  const isProd = argv.mode === 'production',
+        isDev = argv.mode === 'development',
+        isWatch = typeof argv.watch !== 'undefined' && argv.watch === true,
+        {paths, entry, plugins = [], manifestCustomize = (e) => e} = options;
+
+  return {
+    entry,
+    output: {
+      filename: 'js/[name].[contenthash:8].js',
+      path: paths.targetPath,
+    },
+    context: paths.sourcePath,
+    devtool: isDev ? 'source-map' : false,
+    watchOptions: {
+      ignored: ['node_modules/**']
+    },
+    performance: {
+      hints: false
+    },
+    plugins: [
+      new ManifestPlugin({
+        customize(entry) {
+
+          if (
+            entry.key.startsWith('svg/') ||
+            entry.key.endsWith('.map')
+          ) return false;
+
+          const srcdir = path.dirname(entry.key),
+                destdir = path.dirname(entry.value);
+
+          if (srcdir !== destdir) {
+            entry.key = destdir + '/' + path.basename(entry.key);
+          }
+
+          return manifestCustomize(entry);
+        }
+      }),
+      new CleanWebpackPlugin({
+        cleanStaleWebpackAssets: !isWatch
+      }),
+      new MiniCssExtractPlugin({
+        filename: 'css/[name].[contenthash:8].css',
+        chunkFilename: '[id].[contenthash:8].css'
+      }),
+      new StylelintPlugin({
+        failOnError: !isWatch,
+      }),
+      new EsLintPlugin({
+        overrideConfig: {
+          rules: {
+            "no-console": isProd ? 2 : 1,
+            "no-debugger": isProd ? 2 : 1,
+            "no-empty": isProd ? 2 : 1,
+            "no-unused-vars": isProd ? 2 : 1,
+            "no-constant-condition": isProd ? 2 : 1,
+          }
+        }
+      }),
+      new NotifierPlugin(),
+      new WebpackbarPlugin(),
+      new CleanTerminalPlugin(),
+      new SvgChunkWebpackPlugin({
+        filename: '[name].[contenthash].svg',
+        svgstoreConfig: {inline: false},
+      }),
+
+      ...plugins,
+    ],
+
+    externals: {
+    },
+
+    module: {
+      rules: [
+        {
+          test: /\.js$/i,
+          include: paths.sourcePath,
+          use: [
+            'babel-loader'
+          ]
+        },
+        {
+          test: /\.s[ac]ss$/i,
+          include: paths.sourcePath,
+          use: [
+            MiniCssExtractPlugin.loader,
+            'css-loader',
+            'postcss-loader',
+            'sass-loader',
+          ],
+        },
+        {
+          test: /.svg$/i,
+          include: paths.sourcePath,
+          use: [
+            {loader: SvgChunkWebpackPlugin.loader}
+          ]
+        }
+      ],
+    },
+
+  };
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@lightscale/webpack-config",
+  "version": "1.0.3",
+  "description": "Basic webpack config with js babel, postcss, scss, svg",
+  "main": "index.js",
+  "auther": "Sam Light",
+  "type": "module",
+  "license": "MIT",
+  "dependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/eslint-parser": "^7.16.0",
+    "@babel/preset-env": "^7.12.11",
+    "ajv": "^8.12.0",
+    "autoprefixer": "^10.4.0",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-polyfill-corejs3": "^0.10.0",
+    "clean-terminal-webpack-plugin": "^3.0.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^7.0.0",
+    "eslint": "^9.0.0",
+    "eslint-webpack-plugin": "^4.0.1",
+    "glob": "^11.0.0",
+    "mini-css-extract-plugin": "^2.4.2",
+    "postcss": "^8.4.5",
+    "postcss-loader": "^8.0.0",
+    "postcss-preset-env": "^10.0.0",
+    "postcss-scss": "^4.0.2",
+    "sass": "^1.32.0",
+    "sass-loader": "^16.0.0",
+    "style-loader": "^4.0.0",
+    "stylelint": "^16.0.0",
+    "stylelint-config-recommended-scss": "^14.0.0",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-scss": "^6.0.0",
+    "stylelint-webpack-plugin": "^5.0.0",
+    "svg-chunk-webpack-plugin": "^6.0.0",
+    "webpack": "^5.11.1",
+    "webpack-assets-manifest": "^5.0.6",
+    "webpack-cli": "^5.1.1",
+    "webpack-notifier": "^1.12.0",
+    "webpackbar": "^6.0.0"
+  }
+}