Update build tools 🚀

- adding _standard_ poi plugins

Author: vladimyr

build/plugins/clean-out-dir.js

@@ -0,0 +1,14 @@
+'use strict';
+
+exports.name = 'clean-out-dir';
+
+exports.apply = (api, options = {}) => {
+  api.hook('createWebpackChain', config => {
+    if (!api.isProd || !api.config.output.clean) return;
+    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+    options.verbose = Boolean(api.args.options.debug);
+    config
+      .plugin('clean-out-dir')
+      .use(CleanWebpackPlugin, [options]);
+  });
+};

build/plugins/html-version-spec.js

@@ -0,0 +1,34 @@
+'use strict';
+
+const { execFileSync } = require('child_process');
+
+const execSync = (cmd, args, opts) => execFileSync(cmd, args, opts).toString().trim();
+const forEach = (obj, cb) => Object.keys(obj).forEach(key => cb(obj[key], key));
+const isObject = arg => arg !== null && typeof arg === 'object';
+
+exports.name = 'html-version-spec';
+
+exports.apply = ({ config, pkg }) => {
+  const meta = {
+    get version() {
+      return getVersion(pkg);
+    }
+  };
+  if (isObject(config.pages)) {
+    return forEach(config.pages, page => Object.assign(page, { meta }));
+  }
+  const { output } = config;
+  output.html = output.html || {};
+  Object.assign(output.html, { meta });
+};
+
+function getVersion(pkg) {
+  const { version } = pkg.data;
+  try {
+    const rev = execSync('git', ['rev-parse', '--short', 'HEAD']);
+    return `${version}-rev-${rev}`;
+  } catch (err) {
+    console.error(err);
+  }
+  return version;
+}

build/plugins/output-filenames.js

@@ -0,0 +1,46 @@
+'use strict';
+
+exports.name = 'output-filenames';
+
+const prefix = `${exports.name}-plugin:`;
+
+exports.apply = (api, { normal, vendor } = {}) => {
+  const defaultFilenames = api.config.output.fileNames;
+  normal = Object.assign({}, defaultFilenames, normal);
+  vendor = Object.assign({}, defaultFilenames, vendor);
+
+  api.logger.debug(prefix, 'normal output filenames', normal);
+  api.logger.debug(prefix, 'vendor output filenames', vendor);
+
+  api.hook('createWebpackChain', config => {
+    setOutputFilename(config.module.rule('font'), {
+      normal: normal.font,
+      vendor: vendor.font
+    });
+    setOutputFilename(config.module.rule('svg'), {
+      normal: normal.image,
+      vendor: vendor.image
+    });
+  });
+};
+
+function setOutputFilename(rule, { normal, vendor } = {}) {
+  const generic = rule.use('file-loader');
+  const loader = generic.get('loader');
+  const options = generic.get('options');
+
+  rule.uses.store.clear();
+
+  rule.oneOf('vendor')
+    .include
+      .add(filepath => /node_modules/.test(filepath))
+      .end()
+    .use(generic.name)
+    .loader(loader)
+    .options({ ...options, name: vendor || options.name });
+
+  rule.oneOf('normal')
+    .use(generic.name)
+    .loader(loader)
+    .options({ ...options, name: normal || options.name });
+}

build/plugins/stats.js

@@ -0,0 +1,36 @@
+'use strict';
+
+const { writeFileSync } = require('fs');
+
+exports.name = 'stats';
+
+exports.cli = api => {
+  api.command.option(
+    '--print-stats',
+    'Output webpack stats to `stats.json`',
+    { default: false, type: [Boolean] }
+  );
+};
+
+class StatsPlugin {
+  constructor({ logger, path = 'stats.json' } = {}) {
+    this.logger = logger;
+    this.path = path;
+  }
+
+  apply(compiler) {
+    compiler.hooks.done.tap('write-stats', stats => {
+      this.logger.log('\nGenerating webpack stats file');
+      writeFileSync(this.path, JSON.stringify(stats.toJson()), 'utf8');
+      this.logger.done(`Location: ${this.path}`);
+    });
+  }
+}
+
+exports.apply = api => {
+  api.hook('createWebpackChain', config => {
+    if (!api.cli.options.printStats) return;
+    const options = { logger: api.logger };
+    config.plugin('generate-stats').use(StatsPlugin, [options]);
+  });
+};

package-lock.json

@@ -4,6 +4,11 @@
   "private": true,
   "scripts": {
     "dev:client": "poi --serve",
+    "build": "del-cli node_modules/.cache/vue-loader && poi --prod",
+    "clean": "del-cli dist/* !dist/.gitkeep",
+    "webpack:inspect-config": "poi --inspect-webpack",
+    "webpack:bundle-report": "poi --prod --bundle-report",
+    "webpack:stats": "poi --prod --print-stats",
     "dev:server": "nodemon -r dotenv/config ./server | bunyan",
     "db": "node ./server/script/sequelize",
     "db:reset": "npm run db drop && npm run db create && npm run db migrate",
@@ -14,9 +19,7 @@
     "lint": "npm run lint:js; npm run lint:scss",
     "debug": "nodemon --inspect-brk -r dotenv/config ./server | bunyan",
     "start": "NODE_ENV=production node -r dotenv/config ./server",
-    "build": "poi --prod",
     "bundle-report": "poi --prod -- --bundle-report",
-    "clean": "del-cli dist/* !dist/.gitkeep",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -31,9 +34,12 @@
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.5.5",
+    "@poi/plugin-bundle-report": "^12.1.1",
     "@poi/plugin-eslint": "^12.0.0",
+    "clean-webpack-plugin": "^3.0.0",
     "dargs": "^7.0.0",
     "del-cli": "^2.0.0",
+    "dotenv-webpack": "^1.7.0",
     "emoji-strip": "^1.0.1",
     "eslint": "^6.1.0",
     "eslint-config-semistandard": "^14.0.0",
@@ -55,8 +61,7 @@
     "stylelint-config-standard": "^18.3.0",
     "stylelint-order": "^3.0.1",
     "stylelint-scss": "^3.9.2",
-    "vue-template-compiler": "^2.6.10",
-    "webpack-bundle-analyzer": "^3.4.1"
+    "vue-template-compiler": "^2.6.10"
   },
   "dependencies": {
     "@mdi/font": "^3.0.39",