@pixel2html/scripts-frontend/dist/modular.js

import { cwd } from 'process';
import { join } from 'path';
import webpack from 'webpack';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import UglifyJSPlugin from 'uglifyjs-webpack-plugin';
import { existsSync } from 'fs';

const makePath = filePath => join(cwd(), filePath);

// Opinionated life lol
const src = makePath('src');
const entry = makePath('src/assets/js/index.js');
const styles = makePath('src/assets/cssModules/css.json');
const output = makePath('dist/assets/js');

const userConfig = makePath('scripts.config.js');

const banner = `
▄█     █▄     ▄████████    ▄████████ ███▄▄▄▄    ▄█  ███▄▄▄▄      ▄██████▄
███     ███   ███    ███   ███    ███ ███▀▀▀██▄ ███  ███▀▀▀██▄   ███    ███
███     ███   ███    ███   ███    ███ ███   ███ ███▌ ███   ███   ███    █▀
███     ███   ███    ███  ▄███▄▄▄▄██▀ ███   ███ ███▌ ███   ███  ▄███
███     ███ ▀███████████ ▀▀███▀▀▀▀▀   ███   ███ ███▌ ███   ███ ▀▀███ ████▄
███     ███   ███    ███ ▀███████████ ███   ███ ███  ███   ███   ███    ███
███ ▄█▄ ███   ███    ███   ███    ███ ███   ███ ███  ███   ███   ███    ███
▀███▀███▀     ███    █▀    ███    ███  ▀█   █▀  █▀    ▀█   █▀    ████████▀
                            ███    ███

Don't edit this file directly. Edit with Webpack.
Then after you're done run npm run build

Scaffolded with @pixel2html/scripts-frontend
`;

const common = [
  // Do NOT import the BLOAT from moment.js
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  // People please don't edit the dist file pl0xx
  new webpack.BannerPlugin(banner)
];

const debugPlugins = [
  new BundleAnalyzerPlugin()
];

const developmentPlugins = [
];

const productionPlugins = [
  new UglifyJSPlugin({sourceMap: true}),
];

const isProd = () => process.env.NODE_ENV === 'production';
const isDebug = () => process.env.DEBUG_MODE === 'true';

const checkDebug = () =>
  isProd() || isDebug();

const getPlugins = () => {
  const shouldBeDebugMode = checkDebug();

  let plugins = [ ...common ];

  if (!shouldBeDebugMode) plugins = [...plugins, ...developmentPlugins];
  if (shouldBeDebugMode) plugins = [...plugins, ...productionPlugins];
  if (isDebug()) plugins = [...plugins, ...debugPlugins];

  return plugins
};

const modules = {
  rules: [
    {
      test: /\.(js|jsx|mjs)$/,
      enforce: 'pre',
      use: [
        {
          options: {
            eslintPath: require.resolve('eslint'),
            baseConfig: {
              extends: [require.resolve('@pixel2html/eslint-config')]
            },
            ignore: false,
            useEslintrc: false
          },
          loader: require.resolve('eslint-loader')
        }
      ],
      include: src
    },
    {
      oneOf: [
      // Parse OUR js
        {
          test: /\.(js|jsx|mjs)$/,
          include: src,
          exclude: [/[/\\\\]node_modules[/\\\\]/],
          use: {
            loader: 'babel-loader',
            options: {
              babelrc: false,
              presets: [require.resolve('@pixel2html/babel-preset')],
              compact: true,
              highlightCode: true,
            }
          }
        },
        // Parse VENDOR js
        {
          test: /\.js$/,
          use: {
            loader: 'babel-loader',
            options: {
              babelrc: false,
              compact: false,
              presets: [require.resolve('@pixel2html/babel-preset/dependencies')],
              cacheDirectory: true,
              highlightCode: true,
            }
          }
        }
      ]
    }
  ]};

const getConfig = () => {
  const shouldBeDebugMode = checkDebug();

  const config = {
    entry: {
      main: entry
    },
    output: {
      filename: '[name].js',
      chunkFilename: '[name].chunk.js',
      path: output,
      publicPath: '/'
    },
    // Check corresponding file for more info xoxoxo
    module: modules,
    plugins: getPlugins(),
    devtool: shouldBeDebugMode
      ? 'hidden-source-map'
      : 'eval-source-map',
    // Some libraries import Node modules but don't use them in the browser.
    // Tell Webpack to provide empty mocks for them so importing them works.
    node: {
      dgram: 'empty',
      fs: 'empty',
      net: 'empty',
      tls: 'empty',
      child_process: 'empty'
    },
    resolve: {
      alias: {
        styles: styles
      }
    },
    bail: shouldBeDebugMode,
    mode: shouldBeDebugMode ? 'production' : 'development',
    performance: {
      hints: shouldBeDebugMode ? 'warning' : false
    },
  };

  return config
};

const setEnv = mode => {
  process.env.NODE_ENV = mode;
  process.env.BABEL_ENV = mode;
};

const setDebug = mode => {
  process.env.DEBUG_MODE = mode;
};

const compileJS = mode => {
  const isDebug = mode === 'debug';
  setDebug(isDebug);

  if (mode === 'production' || isDebug) {
    setEnv('production');
  } else {
    setEnv('development');
  }

  const defaultConfig = getConfig();

  const customConfig = existsSync(userConfig);

  const config = customConfig
    // Let's do it the Next.js way
    ? require(userConfig)(defaultConfig, webpack)
    : defaultConfig;
  return new Promise(resolve =>
    webpack(config, (err, stats) => {
      if (err) console.log('Webpack', err);
      console.log(stats.toString({
        chunks: false,
        colors: true
      }));
      resolve();
    })
  )
};

const commonPlugins = [
  // Add module names to factory functions so they appear in browser profiler.
  new webpack.NamedModulesPlugin(),
  // Allow everyone to use jQuery like it was global
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
  }),
  // Do NOT import the BLOAT from moment.js
  // thanks create-react-app
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  // Warning banner
  new webpack.BannerPlugin(banner)
];

const productionPlugins$1 = [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify('production')
    }
  }),
  // Concatenate modules for smaller builds
  new webpack.optimize.ModuleConcatenationPlugin(),
  new UglifyJSPlugin({sourceMap: true}),
  new webpack.optimize.ModuleConcatenationPlugin(),
  new webpack.NoEmitOnErrorsPlugin()
];

const getPlugins$1 = () => {
  const shouldBeDebugMode = checkDebug();

  let plugins = [ ...commonPlugins ];

  if (shouldBeDebugMode) plugins = [...plugins, ...productionPlugins$1];
  if (isDebug()) plugins = [...plugins, ...debugPlugins];

  return plugins
};

const makePath$1 = filePath => join(cwd(), filePath);

const createShopifyConfig = config => {
  config.entry.main = makePath$1('src/scripts');

  config.output = {
    // Only output js when debugging
    // otherwise we want .js.liquid for external sourcemapa support
    filename: '[name].js',
    chunkFilename: '[name].chunk.[chunkhash:5].js',
    path: makePath$1('.deploy/assets')
  };

  config.plugins = getPlugins$1();

  // Opt out of default to play nice with liquid
  config.mode = 'none';

  // Host jQuery outside of the bundle
  // so other plugins can use it as well
  config.externals = {
    jquery: 'jQuery'
  };

  return config
};

export { getPlugins$1 as getShopifyPlugins, createShopifyConfig, compileJS as compiler };