meta-lightbox/webpack.config.js

const SOURCEDIR = './src';
const COMPRESS = false;

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
const filesystem = require('fs');

const autoprefixer = require('autoprefixer');

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack');
const ImageSpritePlugin = require('@a2nt/image-sprite-webpack-plugin');

const plugins = [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify('production'),
    },
  }),
  new HardSourceWebpackPlugin(),
  new webpack.LoaderOptionsPlugin({
    minimize: COMPRESS,
    debug: false,
  }),
  new ExtractTextPlugin({
    filename: 'css/[name].css',
    allChunks: true,
  }),
  /**/
  new HtmlWebpackPlugin({
    template: './src/index.html',
  }),
];

if (COMPRESS) {
  plugins.push(
    new OptimizeCssAssetsPlugin({
      //assetNameRegExp: /\.optimize\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorPluginOptions: {
        preset: ['default'],
      },
      cssProcessorOptions: {
        zindex: true,
        cssDeclarationSorter: true,
        reduceIdents: false,
        mergeIdents: true,
        mergeRules: true,
        mergeLonghand: true,
        discardUnused: true,
        discardOverridden: true,
        discardDuplicates: true,
        discardComments: {
          removeAll: true,
        },
      },
      canPrint: true,
    }),
  );

  plugins.push(
    new ImageminPlugin({
      bail: false, // Ignore errors on corrupted images
      cache: true,
      filter: (source, sourcePath) => {
        if (source.byteLength < 512000) {
          return false;
        }

        return true;
      },
      imageminOptions: {
        plugins: [
          ['gifsicle', { interlaced: true }],
          ['jpegtran', { progressive: true }],
          ['optipng', { optimizationLevel: 5 }],
          [
            'svgo',
            {
              plugins: [
                {
                  removeViewBox: false,
                },
              ],
            },
          ],
        ],
      },
    }),
  );

  plugins.push(
    new ImageSpritePlugin({
      exclude: /exclude|original|default-|icons|sprite/,
      commentOrigin: false,
      compress: true,
      extensions: ['png'],
      indent: '',
      log: true,
      //outputPath: path.join(__dirname, conf.APPDIR, conf.DIST),
      outputFilename: 'img/sprite-[hash].png',
      padding: 0,
    }),
  );
}

const includes = {
  app: './src/js/index.js',
};

module.exports = {
  entry: includes,
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: path.join('js', '[name].js'),
    publicPath: path.resolve(__dirname, 'dist'),
  },
  devtool: COMPRESS ? '' : 'source-map',
  externals: {
    jquery: 'jQuery',
  },
  optimization: {
    namedModules: true, // NamedModulesPlugin()
    splitChunks: {
      // CommonsChunkPlugin()
      name: 'vendor',
      minChunks: 2,
    },
    noEmitOnErrors: true, // NoEmitOnErrorsPlugin
    concatenateModules: true, //ModuleConcatenationPlugin
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          parse: {
            // we want terser to parse ecma 8 code. However, we don't want it
            // to apply any minfication steps that turns valid ecma 5 code
            // into invalid ecma 5 code. This is why the 'compress' and 'output'
            // sections only apply transformations that are ecma 5 safe
            // https://github.com/facebook/create-react-app/pull/4234
            ecma: 8,
          },
          compress: {
            ecma: 5,
            warnings: false,
            // Disabled because of an issue with Uglify breaking seemingly valid code:
            // https://github.com/facebook/create-react-app/issues/2376
            // Pending further investigation:
            // https://github.com/mishoo/UglifyJS2/issues/2011
            comparisons: false,
          },
          mangle: {
            safari10: true,
          },
          output: {
            ecma: 5,
            comments: false,
            // Turned on because emoji and regex is not minified properly using default
            // https://github.com/facebook/create-react-app/issues/2488
            ascii_only: true,
          },
        },
        // Use multi-process parallel running to improve the build speed
        // Default number of concurrent runs: os.cpus().length - 1
        parallel: true,
        // Enable file caching
        cache: true,
      }),
    ],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        //exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'], //Preset used for env setup
            plugins: [
              ['@babel/transform-react-jsx'],
              ['react-hot-loader/babel'],
            ],
            cacheDirectory: true,
            cacheCompression: false,
          },
        },
      },
      /*{
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.coffee?$/,
        use: 'coffee-loader',
      },*/
      {
        test: /\.worker\.js$/,
        use: {
          loader: 'worker-loader',
        },
      },
      {
        test: /\.s?css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: !COMPRESS,
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: !COMPRESS,
                plugins: [autoprefixer()],
              },
            },
            {
              loader: 'resolve-url-loader',
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: !COMPRESS,
              },
            },
          ],
        }),
      },
      {
        test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/',
              publicPath: '../fonts/',
            },
          },
        ],
      },
      {
        test: /\.(ttf|otf|eot|svg|woff(2)?)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/',
              publicPath: '../fonts/',
            },
          },
        ],
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'img/',
          publicPath: '../img/',
        },
      },
    ],
  },
  resolve: {
    modules: [
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'node_modules'),
    ],
    alias: {
      jquery: require.resolve('jquery'),
      jQuery: require.resolve('jquery'),
    },
  },
  plugins: plugins,

  devServer: {
    host: '127.0.0.1',
    port: 8001,
    historyApiFallback: true,
    hot: false,
    clientLogLevel: 'info',
    contentBase: [
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'node_modules'),
      path.resolve(__dirname, 'dist'),
    ],
    //watchContentBase: true,
    overlay: {
      warnings: true,
      errors: true,
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
};