Main settings file

webpack.common.js

/**
 * Common webpack settings for app
 * */
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const MomentLocalesPlugin = require('moment-locales-webpack-plugin')

const alias = {
  jquery: 'jquery/dist/jquery',
  popper: 'popper.js/dist/popper',
  jsi18n: '/jsi18n.js',
  vue: 'vue/dist/vue.esm',
  bootstrap_js: 'bootstrap/dist/js/bootstrap'
}

const modules = {
  rules: [
    {
      test: /\.js/i,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    },
    // region Compile scss
    {
      test: /\.s[ac]ss$/i,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    },
    {
      test: /\.css$/i,
      use: [
        'style-loader',
        'css-loader'
      ]
    },
    // endregion Compile scss
    // region Images and fonts
    {
      test: /\.(png|jpe?g|gif|webp|svg|ico)$/i,
      use: ['file-loader']
    },
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      type: 'asset/resource'
    },
    // endregion Images and fonts
    // region Vue.js components
    {
      test: /\.vue/i,
      use: 'vue-loader'
    }
    // endregion Vue.js
  ]
}

const plugins = [
  // Removes locale call for moment - https://github.com/moment/moment/issues/2979#issuecomment-189899510
  // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  new webpack.ContextReplacementPlugin(
    /\.\/locale$/,
    'empty-module',
    false,
    /js$/
  ),
  new webpack.ProvidePlugin({
    // jQuery
    $: 'jquery',
    jQuery: 'jquery',
    'window.$': 'jquery',
    'window.jQuery': 'jquery',
    // Vue
    axios: ['axios', 'default'],
    bootstrap: ['bootstrap_js', 'default']
  }),
  new VueLoaderPlugin(),
  new MiniCssExtractPlugin(
    {
      filename: '[name].css',
      chunkFilename: '[id].css'
    }
  ),
  new MomentLocalesPlugin({localesToKeep: ['fr']}),
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    bootstrap: 'bootstrap_js',
    Vue: ['vue', 'default'],
    moment: 'moment'
  })
]

const config = {
  context: __dirname,
  entry: {
    index_js: './src/index',
    index_css: './src/css/index',
    wizard_js: './src/wizard/index'
  },
  resolve: {
    alias: alias
  },
  module: modules,
  plugins: plugins
}

module.exports = config