webpack.base.config.js

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const webpack = require('webpack'); // eslint-disable-line import/no-extraneous-dependencies
const config = require('./config');
const paths = require('./webpack/paths');

const useFonts = [
  {
    loader: 'url-loader',
    options: {
      limit: 512,
      name: 'assets/fonts/[name].[ext]',
      publicPath: config.appPublicPath,
    },
  },
];

const useImages = [
  {
    loader: 'url-loader',
    options: {
      limit: 512,
      name: 'assets/images/[name].[ext]',
      publicPath: config.appPublicPath,
    },
  },
];

module.exports = {
  context: paths.root,
  module: {
    rules: [
      {
        test: /\.(woff|woff2|ttf|eot|otf)$/,
        use: useFonts,
      },
      {
        test: /fonts\/.*\.svg/,
        use: useFonts,
      },
      {
        test: /\.svg$/,
        use: [
          ...useImages,
          {
            loader: 'svgo-loader',
            options: {
              plugins: [
                { cleanupIDs: false },
                { removeAttrs: { attrs: '(data-name)' } },
              ],
            },
          },
        ],
      },
      {
        test: /\.(jpe?g|png|gif)$/,
        use: useImages,
      },
    ],
  },
  output: {
    filename: '[name].js',
    path: paths.build,
    publicPath: config.appPublicPath,
  },
  resolve: {
    modules: ['node_modules', 'src'],
    alias: {
      '@Config': paths.config,
      '@Root': paths.root,
    },
    extensions: ['.json', '.js', '.jsx'],
  },
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(paths.src, 'assets/favicon/'),
          to: path.resolve(paths.build, 'assets/favicon/'),
        },
      ],
    }),
    new Dotenv({
      path: path.resolve(paths.root, '.env'),
      safe: false,
      silent: true,
      systemvars: true,
    }),
  ],
};