Fog Lit Street logo

Gist for Bootstrap + SVG

Neerthigan Sivananthan

Gist for Bootstrap + SVG

Context:

After having gone through many iteration of webpack.config.js , I feel like I have landed on the best config so far, for my use case. I would like to give credit to nicbet for his gist.

Config Info:

  • Complies bootstrap 4
  • Complies svg
  • Setup global $ variable for jQuery

gist link

    const path = require('path');
    const webpack = require('webpack');
    
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
    const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
    const CopyWebpackPlugin = require('copy-webpack-plugin');
    
    module.exports = (env, options) => ({
      optimization: {
        minimizer: [
          new UglifyJsPlugin({
            cache: true,
            parallel: true,
            sourceMap: false
          }),
          new OptimizeCSSAssetsPlugin({})
        ]
      },
      entry: './js/app.js',
      output: {
        filename: 'app.js',
        path: path.resolve(__dirname, '../priv/static/js')
      },
      module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader'
            }
          },
          {
            test: /\.(css|sass|scss)$/,
            use: [
              MiniCssExtractPlugin.loader,
              {
                loader: 'css-loader',
                options: {
                  importLoaders: 2,
                  sourceMap: true
                }
              },
              {
                loader: 'postcss-loader',
                options: {
                  plugins: () => [
                    require('autoprefixer')
                  ],
                  sourceMap: true
                }
              },
              {
                loader: 'sass-loader',
                options: {
                  sourceMap: true
                }
              }
            ]
          },
          {  
            test: /\.(jpe?g|png|gif|svg)$/i,
            use: [
              'file-loader?hash=sha512&digest=hex&name=../images/[name].[ext]',
              {
                loader: 'image-webpack-loader',
                options: {
                  mozjpeg: {
                    progressive: true,
                    quality: 65
                  },
                  // optipng.enabled: false will disable optipng
                  optipng: {
                    enabled: false,
                  },
                  pngquant: {
                    quality: [0.65, 0.90],
                    speed: 4
                  },
                  gifsicle: {
                    interlaced: false,
                  },
                  bypassOnDebug: true,
                  // the webp option will enable WEBP
                  webp: {
                    quality: 75
                  }
                }
              }
            ],
          },
          {
            test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
            use: [{
              loader: 'file-loader',
              options: {
                name: '[name].[ext]',
                outputPath: '../fonts'
              }
            }]
          }
        ]
      },
      plugins: [
        new MiniCssExtractPlugin({
          filename: '../css/app.css'
        }),
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery',
          'window.jQuery': 'jquery'
        }),
        new CopyWebpackPlugin([{
          from: 'static/',
          to: '../'
        }])
      ]
    });
← back to all posts