const { isProd } = require('@gera2ld/plaid/util');

/**
 * For each entry, `key` is the chunk name, `value` has following properties:
 * - value.entry: webpack entry.
 * - value.html: options object passed to HtmlWebpackPlugin.
 * - value.html.inlineSource: if true, JS and CSS files will be inlined in HTML.
 */
const injectTo = item => {
  if (!(item.attributes.src || '').endsWith('/index.js')) return 'head';
};
const htmlFactory = extra => options => ({
  ...options,
  title: 'Violentmonkey',
  ...extra,
  chunks: ['browser', ...options.chunks],
  injectTo,
});
exports.pages = {
  'browser': {
    entry: './src/common/browser',
  },
  'background/index': {
    entry: './src/background',
    html: htmlFactory(),
  },
  'options/index': {
    entry: './src/options',
    html: htmlFactory(),
  },
  'confirm/index': {
    entry: './src/confirm',
    html: htmlFactory(),
  },
  'popup/index': {
    entry: './src/popup',
    html: htmlFactory(),
  },
};

const splitVendor = prefix => ({
  [prefix]: {
    test: new RegExp(`node_modules[/\\\\]${prefix}.*?\\.js`),
    name: `public/lib/${prefix}`,
    chunks: 'all',
    priority: 100,
  },
});

exports.devServer = false;
exports.devtool = isProd ? false : 'inline-source-map';
exports.optimization = {
  runtimeChunk: false,
  splitChunks: {
    cacheGroups: {
      common: {
        name: 'common',
        minChunks: 2,
        enforce: true,
        chunks: chunk => chunk.name !== 'browser',
      },
      ...splitVendor('codemirror'),
      ...splitVendor('tldjs'),
      ...splitVendor('vue'),
    },
  },
};