@interaktiv/dia-scripts/dist/config/webpack.config.js

CLI toolbox with common scripts for most sort of projects at DIA

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

const {
  basename
} = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const {
  NamedModulesPlugin,
  DefinePlugin,
  optimize: {
    ModuleConcatenationPlugin
  },
  NoEmitOnErrorsPlugin
} = require('webpack');

const {
  fromRoot,
  hasFile,
  hasPkgProp
} = require('../utils');

const DEV_MODE = 'development';

const getEntryName = path => basename(path).split('.').slice(0, -1).join('.');

const getEntries = (options = {}) => {
  let entries = options['bundle-entry'] || options.entry || options._.length && options._;
  const config = {};

  const define = path => path && Object.assign(config.entry || (config.entry = {}), {
    [getEntryName(path)]: path
  });

  if (entries) {
    if (typeof entries === 'string') entries = [entries];
    entries.forEach(entry => define(entry));
  } else {
    config.entry = {
      index: fromRoot('src/index.js')
    };
  }

  return config;
};

const getSassLoaders = (mode, {
  postCssOptions
}) => mode === DEV_MODE ? [require.resolve('style-loader'), require.resolve('css-loader'), {
  loader: require.resolve('sass-loader'),
  options: {
    includePaths: [fromRoot('node_modules')],
    sourceMap: true,
    sourceMapContents: false
  }
}] : [MiniCssExtractPlugin.loader, require.resolve('css-loader'), {
  loader: require.resolve('postcss-loader'),
  options: postCssOptions
}, {
  loader: require.resolve('sass-loader'),
  options: {
    includePaths: [fromRoot('node_modules')]
  }
}];

const getDevServerConfig = (options = {}) => {
  const devProxyAddress = options['dev-proxy'];
  const auth = options['dev-proxy-auth'];
  const {
    contentBase
  } = options;
  if (!options['dev-server'] && !devProxyAddress) return {};
  const config = {
    devServer: {
      contentBase,
      hot: true,
      inline: true,
      host: '127.0.0.1',
      port: 9000,
      index: ''
    }
  };

  if (devProxyAddress) {
    config.devServer.proxy = [{
      context: ['**'],
      target: devProxyAddress,
      logLevel: 'debug',
      auth,
      changeOrigin: true
    }];
  }

  return config;
};

const getPlugins = (mode, options = {}) => {
  const common = [new MiniCssExtractPlugin(), new DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(mode)
  })];

  if (options.profile) {
    common.push(new (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)());
  }

  const contextual = mode === DEV_MODE ? [...common, new NamedModulesPlugin()] : [...common, new ModuleConcatenationPlugin(), new NoEmitOnErrorsPlugin()];
  return {
    plugins: [...common, ...contextual]
  };
}; // eslint-disable-next-line complexity


module.exports = (mode = 'production', options) => {
  const outputPath = options['output-path'] || fromRoot('web/dist');
  const outputFilename = options['output-filename'] || '[name]-bundle.js';
  const contentBase = options['content-base'] || fromRoot('web');
  const publicPath = options['output-public-path'] || outputPath.replace(contentBase, '');
  const devtool = options.devtool || 'source-map';
  const target = options.target || 'web';
  const stats = options.stats || 'errors-only';
  const useBuiltinBabelConfig = hasFile('.babelrc') === false && hasFile('.babelrc.js') === false && hasFile('babel.config.js') === false && hasPkgProp('babel') === false;
  const babelOptions = useBuiltinBabelConfig ? require('./babelrc.js')() : {};
  const useBuiltinPostCssConfig = hasFile('.postcssrc') === false && hasFile('.postcssrc.json') === false && hasFile('.postcssrc.yml') === false && hasFile('.postcssrc.js') === false && hasFile('postcss.config.js') === false;
  const postCssOptions = {};

  if (useBuiltinPostCssConfig) {
    (postCssOptions.config || (postCssOptions.config = {})).path = __dirname;
  }

  return (0, _extends2.default)({
    mode
  }, getEntries(options), getPlugins(mode, options), getDevServerConfig((0, _extends2.default)({}, options, {
    contentBase
  })), {
    output: {
      path: outputPath,
      publicPath,
      filename: outputFilename
    },
    devtool,
    target,
    stats,
    module: {
      rules: [{
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: require.resolve('babel-loader'),
          options: babelOptions
        }
      }, {
        test: /\.(sa|sc|c)ss$/,
        use: getSassLoaders(mode, {
          postCssOptions
        })
      }, {
        test: /^(?!.*\/fonts\/).*\.(gif|png|jpe?g|svg)$/i,
        use: [{
          loader: require.resolve('file-loader'),
          options: {
            publicPath,
            name: '[name].[ext]'
          }
        }, {
          loader: require.resolve('image-webpack-loader'),
          options: {
            disable: mode === DEV_MODE
          }
        }]
      }, {
        test: /\.(woff2?|ttf|otf|eot|svg)$/,
        loader: require.resolve('file-loader'),
        exclude: /^(?!.*\/fonts\/).*$/i,
        options: {
          publicPath,
          name: '[name].[ext]'
        }
      }]
    }
  });
};