initial commit

tools/dev.server.js

@@ -0,0 +1,49 @@
+import path from "path";
+import webpack from "webpack";
+import WebpackDevServer from "webpack-dev-server";
+import config from "./webpack.dev.config.babel";
+import ora from "ora";
+
+const DIST_PATH = path.resolve(__dirname, "../static/");
+
+const compiler = webpack(config);
+const spinner = ora("Compiler is running...").start();
+compiler.hooks.done.tap("Verdaccio Dev Server", () => {
+  if (!global.rebuild) {
+    spinner.stop();
+    console.log("Dev Server Listening at http://localhost:4872/");
+    global.rebuild = true;
+  }
+});
+
+new WebpackDevServer(compiler, {
+  contentBase: `${DIST_PATH}`,
+  publicPath: config.output.publicPath,
+  hot: true,
+  historyApiFallback: true,
+  quiet: true,
+  noInfo: false,
+  stats: {
+    assets: false,
+    colors: true,
+    version: true,
+    hash: true,
+    timings: true,
+    chunks: true,
+    chunkModules: false
+  },
+  proxy: [
+    {
+      context: [
+        "/-/verdaccio/logo",
+        "/-/verdaccio/packages",
+        "/-/static/logo.png"
+      ],
+      target: "http://localhost:4873"
+    }
+  ]
+}).listen(4872, "localhost", function(err) {
+  if (err) {
+    return console.log(err);
+  }
+});

tools/webpack.config.js

@@ -0,0 +1,99 @@
+const path = require("path");
+const StyleLintPlugin = require("stylelint-webpack-plugin");
+
+const SRC_ROOT = path.resolve(__dirname, "../src/");
+const APP_ROOT = path.resolve(__dirname, "../static/");
+
+module.exports = {
+  entry: `${SRC_ROOT}/index.js`,
+
+  output: {
+    path: `${APP_ROOT}/static/`,
+    filename: "[name].[hash].js"
+    // publicPath: "ToReplaceByVerdaccio/-/static"
+  },
+
+  resolve: {
+    extensions: [".js", ".jsx"]
+  },
+
+  plugins: [
+    new StyleLintPlugin({
+      files: ["src/**/styles.js"],
+      failOnError: false,
+      emitErrors: true
+    })
+  ],
+
+  optimization: {
+    runtimeChunk: {
+      name: "manifest"
+    },
+    splitChunks: {
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendors",
+          priority: -20,
+          chunks: "all"
+        }
+      }
+    }
+  },
+
+  module: {
+    rules: [
+      // /* Pre loader */
+      // {
+      //   enforce: "pre",
+      //   test: /\.jsx?$/,
+      //   exclude: /node_modules/,
+      //   use: "eslint-loader"
+      // },
+
+      /* Normal loader */
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: "babel-loader"
+      },
+      {
+        test: /\.(jpe?g|png|gif|svg)$/,
+        use: [
+          {
+            loader: "file-loader"
+          }
+        ]
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+        loader: "url-loader",
+        options: {
+          name: "fonts/[name].[ext]",
+          limit: 50
+        }
+      },
+      {
+        test: /\.scss$/,
+        exclude: /node_modules/,
+        loader: `style-loader!css-loader?module&sourceMap=false&localIdentName=[path][name]__[local]--[hash:base64:5]
+        !resolve-url-loader?keepQuery!sass-loader?sourceMap`
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: "style-loader"
+          },
+          {
+            loader: "css-loader"
+          }
+        ]
+      }
+    ]
+  },
+
+  stats: {
+    children: false
+  }
+};

tools/webpack.dev.config.babel.js

@@ -0,0 +1,55 @@
+const path = require("path");
+const webpack = require("webpack");
+const HTMLWebpackPlugin = require("html-webpack-plugin");
+const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
+const baseConfig = require("./webpack.config");
+const StyleLintPlugin = require("stylelint-webpack-plugin");
+
+const SRC_ROOT = path.resolve(__dirname, "../src/");
+
+export default {
+  ...baseConfig,
+
+  mode: "development",
+
+  entry: {
+    main: [
+      "whatwg-fetch",
+      "react-hot-loader/patch",
+      "webpack-dev-server/client?http://localhost:4872",
+      "webpack/hot/only-dev-server",
+      `${SRC_ROOT}/index.js`
+    ]
+  },
+
+  output: {
+    ...baseConfig.output,
+    publicPath: "/"
+  },
+
+  devtool: "cheap-module-eval-source-map",
+
+  plugins: [
+    new webpack.DefinePlugin({
+      __DEBUG__: true
+    }),
+    new HTMLWebpackPlugin({
+      title: "Verdaccio Dev UI",
+      scope: "",
+      logo: "https://verdaccio.org/img/logo/symbol/svg/verdaccio-tiny.svg",
+      filename: "index.html",
+      verdaccioURL: "//localhost:4873",
+      template: `${SRC_ROOT}/template/index.html`,
+      debug: true,
+      inject: true
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
+    new FriendlyErrorsPlugin(),
+    new StyleLintPlugin({
+      files: ["src/**/styles.js"],
+      failOnError: false,
+      emitErrors: false
+    })
+  ]
+};

tools/webpack.prod.config.babel.js

@@ -0,0 +1,59 @@
+const path = require("path");
+const webpack = require("webpack");
+const HTMLWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const UglifyJsWebpackPlugin = require("uglifyjs-webpack-plugin");
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const baseConfig = require("./webpack.config");
+const merge = require("webpack-merge");
+const _ = require("lodash");
+const SRC_ROOT = path.resolve(__dirname, "../src/");
+
+const prodConf = {
+  mode: "production",
+
+  entry: {
+    main: ["@babel/polyfill", "whatwg-fetch", `${SRC_ROOT}/index.js`]
+  },
+
+  module: {
+    rules: []
+  },
+
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "style.[contenthash].css"
+    }),
+    new HTMLWebpackPlugin({
+      title: "ToReplaceByTitle",
+      scope: "ToReplaceByScope",
+      filename: "index.html",
+      favicon: `${SRC_ROOT}/template/favicon.ico`,
+      verdaccioURL: "ToReplaceByVerdaccio",
+      template: `${SRC_ROOT}/template/index.html`,
+      debug: false,
+      inject: true
+    })
+  ],
+
+  optimization: {
+    minimizer: [
+      new UglifyJsWebpackPlugin({
+        sourceMap: true
+      }),
+      new OptimizeCSSAssetsPlugin({})
+    ]
+  }
+};
+
+prodConf.module.rules = baseConfig.module.rules
+  .filter(
+    loader =>
+      Array.isArray(loader.use) &&
+      loader.use.find(v => /css/.test(v.loader.split("-")[0]))
+  )
+  .forEach(loader => {
+    loader.use = [MiniCssExtractPlugin.loader].concat(_.tail(loader.use));
+  });
+
+module.exports = merge(baseConfig, prodConf);