webpack.js

const merge = require('webpack-merge')
const common = require('./webpack.common.js')

const version = require('./version.json').version
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const ManifestPlugin = require('webpack-manifest-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

const publicPath = process.env.PUBLIC_PATH || ''

// Extract build version
const normalizeAssetName = name => (
  name.replace(new RegExp(`^\/?${version}\/?`), '')
)

module.exports = merge(common, {
  mode: 'production',
  plugins: [
    // Cleanup only current version build, other versions has to be preserved
    new CleanWebpackPlugin([`public/${version}/**/*`]),
    new MiniCssExtractPlugin({
      filename: `${version}/[name].[hash].css`,
      chunkFilename: '[id].[hash].css'
    }),
    // Here we have images duplication in 'images' and '_files' folder.
    // To fix this we would have to separate images used in other assets (styles, scripts)
    // from images that are used directly in html. This can be done by using different folders
    // and copying only images used in html.
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, 'lib/base/images/'),
      to: path.resolve(__dirname, `public/${version}/base/images/`)
    }, {
      from: path.resolve(__dirname, 'lib/showcase/images/'),
      to: path.resolve(__dirname, `public/${version}/showcase/images/`)
    }]),
    new UglifyJSPlugin({
      sourceMap: true
    }),
    new OptimizeCSSAssetsPlugin({}),
    new ManifestPlugin({
      fileName: `${version}/manifest.json`,
      map: item => {
        item.name = normalizeAssetName(item.name)
        return item
      },
      filter: item => !item.isModuleAsset
    })
  ],
  output: {
    publicPath,
    filename: `${version}/[name].[hash].js`,
    path: path.resolve(__dirname, 'public')
  },
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: `/${version}/_files`,
              name: '[name].[hash].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: `/${version}/_files`,
              name: '[name].[ext]'
            }
          }
        ]
      }
    ]
  }
})