Skip to content

Instantly share code, notes, and snippets.

@endelwar

endelwar/webpack.config.js

Forked from versedi/webpack.config.js
Created December 14, 2023 15:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save endelwar/9e236782ecec216c2ced4d10e510262a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save endelwar/9e236782ecec216c2ced4d10e510262a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @versedi versedi revised this gist Jul 28, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -337,7 +337,7 @@ if (Encore.isProduction()) {
    });
    // Change the kind of source map generated in development mode
    config.devtool = 'inline-source-map';
    // USE cheap for Debugging in Chrome
    // USE cheap for Debugging in Chrome - awesome feature - you can put breakpoint in your PhpStorm/Vscode/whatever and browser will stop executing on it! Just like in PHP
    // config.devtool = 'cheap-module-eval-source-map';
    //
    config.optimization.minimize = false;
  2. @versedi versedi revised this gist Jul 28, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,7 @@ const cssWhitelist = require('./purge-css-whitelist');
    const sassOptions = {
    includePaths: ['node_modules', './resources/assets/scss/'],
    };
    // add node modules to be transformed by babel here. anything uses new JS features has to be transpiled
    // add node modules to be transformed by babel here. anything uses new JS features (eg arrow function) has to be transpiled to work in older browsers
    const includedNodeModules = [
    'jquery',
    'swiper',
  3. @versedi versedi revised this gist Jul 28, 2020. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -13,6 +13,11 @@ const cssWhitelist = require('./purge-css-whitelist');
    const sassOptions = {
    includePaths: ['node_modules', './resources/assets/scss/'],
    };
    // add node modules to be transformed by babel here. anything uses new JS features has to be transpiled
    const includedNodeModules = [
    'jquery',
    'swiper',
    ];

    if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(Encore.isProduction() ? 'production' : 'dev-server');
  4. @versedi versedi revised this gist Jul 28, 2020. 1 changed file with 0 additions and 9 deletions.
    9 changes: 0 additions & 9 deletions webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -170,15 +170,6 @@ Encore.copyFiles({
    pattern: /\.(png|jpg|jpeg|gif|svg)/,
    });

    if (Encore.isProduction()) {
    Encore.copyFiles({
    from: './resources/assets/images',
    to: 'images/[path][name]',
    pattern: '/(logopng)/',
    });
    }


    Encore.addLoader({
    test: /\.scss$/,
    use: [
  5. @versedi versedi revised this gist Jul 28, 2020. 1 changed file with 98 additions and 12 deletions.
    110 changes: 98 additions & 12 deletions webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -15,21 +15,115 @@ const sassOptions = {
    };

    if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
    Encore.configureRuntimeEnvironment(Encore.isProduction() ? 'production' : 'dev-server');
    }

    Encore.addPlugin(new WebpackBar());

    Encore.addLoader({
    test: /\.ts$/,
    enforce: 'pre',
    loader: 'eslint-loader',
    exclude: path.resolve(__dirname, 'node_modules/'),
    options: {
    fix: true,
    },
    });


    if (!Encore.isProduction()) {
    Encore.addLoader({
    test: [/\.ts$/],
    enforce: 'pre',
    loader: 'prettier-loader',
    exclude: path.resolve(__dirname, 'node_modules/'),
    options: {
    parser: 'prettierx-typescript',
    semi: true,
    trailingComma: 'all',
    singleQuote: true,
    printWidth: 120,
    tabWidth: 4,
    spaceBeforeFunctionParen: true,
    },
    });
    Encore.addLoader({
    test: [/\.js$/],
    enforce: 'pre',
    loader: 'prettier-loader',
    exclude: path.resolve(__dirname, 'node_modules/'),
    options: {
    parser: 'prettierx-babel',
    semi: true,
    trailingComma: 'all',
    singleQuote: true,
    printWidth: 120,
    tabWidth: 4,
    spaceBeforeFunctionParen: true,
    },
    });
    }


    if (!Encore.isProduction()) {
    Encore.configureFilenames({
    js: '[name].js',
    css: '[name].css',
    images: 'images/[name].[ext]',
    fonts: 'fonts/[name].[ext]',
    });
    Encore.addLoader({
    test: /\.(scss|css)$/,
    use: [
    MiniCssExtractPlugin.loader,
    {
    loader: 'css-loader',
    options: {
    sourceMap: !Encore.isProduction(),
    },
    },
    {
    loader: 'sass-loader',
    options: {
    sourceMap: !Encore.isProduction(),
    },
    },
    ],
    });
    } else {
    Encore.enablePostCssLoader();
    const postcssLoaderOptions = {
    autoprefixer: {
    browsers: ['last 2 versions'],
    },
    plugins: () => [autoprefixer],
    sourceMap: !Encore.isProduction,
    };
    Encore.addLoader({
    test: /\.(scss|css)$/,
    use: [
    MiniCssExtractPlugin.loader,
    {
    loader: 'css-loader',
    options: {
    sourceMap: !Encore.isProduction(),
    },
    },
    {
    loader: 'postcss-loader',
    options: postcssLoaderOptions,
    },
    {
    loader: 'sass-loader',
    options: {
    sourceMap: !Encore.isProduction(),
    },
    },
    ],
    });
    // Encore.enablePostCssLoader();
    }


    if (!Encore.isProduction()) {
    Encore.addPlugin(
    new CircularDependencyPlugin({
    @@ -84,15 +178,6 @@ if (Encore.isProduction()) {
    });
    }

    // Encore.enableSassLoader(options => {
    // options.includePaths = sassOptions.includePaths;
    //
    // if (!Encore.isProduction()) {
    // options.minimize = false;
    // } else {
    // options.minimize = true;
    // }
    // });

    Encore.addLoader({
    test: /\.scss$/,
    @@ -172,6 +257,7 @@ if(Encore.isProduction()) {
    );
    }
    Encore.configureOptimizeCssPlugin().enableSourceMaps(!Encore.isProduction());
    Encore.enableSourceMaps(true);

    Encore.configureBabel(
    babelConfig => {
    @@ -262,7 +348,7 @@ if (Encore.isProduction()) {

    Encore.configureWatchOptions(function(watchOptions) {
    watchOptions.poll = 1000;
    watchOptions.aggregateTimeout = 1000;
    watchOptions.aggregateTimeout = 2000;
    watchOptions.ignored = /node_modules/;
    });
    //Use below options when you need to debug webpack build
  6. @versedi versedi revised this gist Jul 28, 2020. 1 changed file with 10 additions and 0 deletions.
    10 changes: 10 additions & 0 deletions webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -298,6 +298,16 @@ if (Encore.isProduction()) {
    },
    },
    };

    config.node = {
    global: true,
    fs: 'empty',
    // Fix: "Uncaught ReferenceError: global is not defined", and "Can't resolve 'fs'".
    // output: {
    // libraryTarget: 'umd', // Fix: "Uncaught ReferenceError: exports is not defined".
    // },
    };

    }

    // Export the config (be careful not to call
  7. @versedi versedi revised this gist Jul 28, 2020. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -224,9 +224,13 @@ Encore.splitEntryChunks()
    .enableIntegrityHashes(Encore.isProduction())
    .enableSingleRuntimeChunk()
    .configureSplitChunks(() => ({
    name: 'vendor_app',
    chunks: 'all',
    minChunks: 2,
    }))



    .autoProvidejQuery() // uncomment if you're having problems with a jQuery plugin

    .configureFriendlyErrorsPlugin()
  8. @versedi versedi revised this gist Jul 28, 2020. 1 changed file with 10 additions and 14 deletions.
    24 changes: 10 additions & 14 deletions webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -178,8 +178,12 @@ Encore.configureBabel(
    // add additional presets (preset-env is added by default)
    babelConfig.presets.push('@babel/preset-flow');
    // IE11/Edge requires below plugins
    babelConfig.plugins.push('@babel/plugin-transform-object-assign');
    babelConfig.plugins.push('@babel/plugin-transform-spread');
    babelConfig.plugins.push('@babel/plugin-transform-exponentiation-operator');
    babelConfig.plugins.push('@babel/plugin-transform-arrow-functions');
    babelConfig.plugins.push('@babel/plugin-proposal-object-rest-spread');
    babelConfig.plugins.push('@babel/plugin-proposal-class-properties');
    // no plugins are added by default, but you can add some
    // babelConfig.plugins.push('styled-jsx/babel');
    // if (Encore.isProduction()) {
    @@ -189,28 +193,20 @@ Encore.configureBabel(
    {
    // node_modules is not processed through Babel by default
    // but you can whitelist specific modules to process
    includeNodeModules: [
    'jquery',
    'jquery-ui',
    'jquery-lazy',
    'swiper',
    'es-cookies',
    'select2',
    'mdb',
    'bootstrap',
    'urijs',
    'dom7',
    'cleave.js',
    ],
    includeNodeModules: includedNodeModules,
    useBuiltIns: 'usage',
    corejs: 3,
    corejs: {
    version: 3.2,
    proposals: true,
    },
    // or completely control the exclude rule (note that you
    // can't use both "include_node_modules" and "exclude" at
    // the same time)
    // exclude: /bower_components/
    },
    );


    /*
    * ENTRY CONFIG
    *
  9. @versedi versedi revised this gist Jul 28, 2020. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -152,6 +152,9 @@ if(Encore.isProduction()) {
    // folders: ['resources/views/**/*', 'resources/assets/scss/'],
    paths: glob.sync([path.join(__dirname, 'resources/views/**/*/*.blade.php')]),
    whitelist: cssWhitelist,
    // This is a tough task - any classes that aren't present in the view files (eg. added by JS) need to be whitelisted here
    // It's not an easy or quick thing to do - requires THOROUGH testing for any missing CSS classes.
    // I recommend to turn it off and only use it manually after major updates are done in styling
    whitelistPatterns: [
    /icon$/,
    /primary$/,
  10. @versedi versedi revised this gist Jul 28, 2020. 1 changed file with 1 addition and 5 deletions.
    6 changes: 1 addition & 5 deletions webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -219,12 +219,8 @@ Encore.configureBabel(
    */
    Encore.splitEntryChunks()
    .addEntry('app', './resources/assets/js/entries/app.ts')
    // .addEntry('errors', './resources/assets/js/entries/errors.ts')
    .addEntry('home', './resources/assets/js/entries/home.ts')
    .addEntry('blogPosts', './resources/assets/js/entries/blogPosts.ts')
    .addEntry('profile', './resources/assets/js/entries/profile.ts')
    .addEntry('checkout', './resources/assets/js/entries/checkout.ts')
    .addEntry('product-list', './resources/assets/js/entries/product-list.ts')
    .addEntry('product-view', './resources/assets/js/entries/product-view.ts')
    .enableVersioning(Encore.isProduction())
    .enableIntegrityHashes(Encore.isProduction())
    .enableSingleRuntimeChunk()
  11. @versedi versedi revised this gist Jul 28, 2020. 1 changed file with 10 additions and 6 deletions.
    16 changes: 10 additions & 6 deletions webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -279,19 +279,23 @@ if (Encore.isProduction()) {
    };

    config.devServer = {
    host: 'web-app.local',
    host: 'app.local',
    port: 9000,
    hot: true,
    index: 'public/index.php',
    liveReload: true,
    historyApiFallback: true,
    disableHostCheck: true,
    public: 'web-app.local',
    public: 'app.local',
    allowedHosts: ['app.local'],
    contentBase: path.join(__dirname, 'public'),
    watchContentBase: true,
    watchOptions: {
    aggregateTimeout: 3500,
    },
    proxy: {
    '*': {
    target: 'http://app.local:9000',
    pathRewrite: {
    '/[0-9]+': '',
    },
    target: 'http://app.local:80',
    },
    },
    };
  12. @versedi versedi revised this gist Aug 16, 2019. 1 changed file with 71 additions and 34 deletions.
    105 changes: 71 additions & 34 deletions webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,8 +3,9 @@ const Encore = require('@symfony/webpack-encore');
    const TerserPlugin = require('terser-webpack-plugin');
    const CircularDependencyPlugin = require('circular-dependency-plugin');
    const HtmlCriticalWebpackPlugin = require('html-critical-webpack-plugin');
    const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const PurgecssPlugin = require('purgecss-webpack-plugin');
    const PurgeCssPlugin = require('purgecss-webpack-plugin');
    const WebpackBar = require('webpackbar');
    const path = require('path');
    const glob = require('glob-all');
    @@ -18,20 +19,6 @@ if (!Encore.isRuntimeEnvironmentConfigured()) {
    }
    Encore.addPlugin(new WebpackBar());

    if (Encore.isProduction()) {
    Encore.addPlugin(
    new TerserPlugin({
    terserOptions: {
    sourceMap: !Encore.isProduction(),
    cache: !Encore.isProduction(),
    parallel: true,
    output: {
    // comments: false,
    },
    },
    }),
    );
    }
    if (!Encore.isProduction()) {
    Encore.configureFilenames({
    js: '[name].js',
    @@ -97,7 +84,6 @@ if (Encore.isProduction()) {
    });
    }

    // Disabled, we use MiniCssExtractPlugin with PurgeCSS
    // Encore.enableSassLoader(options => {
    // options.includePaths = sassOptions.includePaths;
    //
    @@ -126,29 +112,62 @@ Encore.addLoader({
    });
    Encore.addPlugin(
    new MiniCssExtractPlugin({
    filename: '[name].css',
    filename: Encore.isProduction() ? '[name].[contenthash].css' : '[name].css',
    }),
    );
    if (Encore.isProduction()) {
    Encore.addPlugin(
    new OptimizeCSSAssetsPlugin({
    assetNameRegExp: /\.(c|s[ac])ss$/,
    cssProcessorPluginOptions: {
    preset: [
    'default',
    {
    discardComments: {
    removeAll: true, // remove any comments?
    },
    },
    ],
    },
    canPrint: true,
    }),
    );
    }

    Encore.addPlugin(
    new PurgecssPlugin({
    // folders: ['resources/views/**/*', 'resources/assets/scss/'],
    paths: glob.sync([path.join(__dirname, 'resources/views/**/*/*.blade.php')]),
    whitelist: cssWhitelist,
    whitelistPatterns: [
    /icon$/,
    /primary$/,
    /info$/,
    /success$/,
    /danger$/,
    /swiper\-w+/,
    /slide$/,
    /popover\-\w+/,
    /tooltip\-\w+/,
    /lb\-\w+/,
    /ui\-\w+/,
    ],
    new TerserPlugin({
    terserOptions: {
    sourceMap: !Encore.isProduction(),
    cache: !Encore.isProduction(),
    parallel: true,
    output: {
    // comments: false,
    },
    },
    }),
    );
    if(Encore.isProduction()) {
    Encore.addPlugin(
    new PurgeCssPlugin({
    // folders: ['resources/views/**/*', 'resources/assets/scss/'],
    paths: glob.sync([path.join(__dirname, 'resources/views/**/*/*.blade.php')]),
    whitelist: cssWhitelist,
    whitelistPatterns: [
    /icon$/,
    /primary$/,
    /info$/,
    /success$/,
    /danger$/,
    /swiper\-w+/,
    /slide$/,
    /popover\-\w+/,
    /tooltip\-\w+/,
    /lb\-\w+/,
    /ui\-\w+/,
    ],
    }),
    );
    }
    Encore.configureOptimizeCssPlugin().enableSourceMaps(!Encore.isProduction());

    Encore.configureBabel(
    @@ -258,6 +277,24 @@ if (Encore.isProduction()) {
    timings: true,
    // warnings: true,
    };

    config.devServer = {
    host: 'web-app.local',
    port: 9000,
    historyApiFallback: true,
    disableHostCheck: true,
    public: 'web-app.local',
    allowedHosts: ['app.local'],
    contentBase: path.join(__dirname, 'public'),
    proxy: {
    '*': {
    target: 'http://app.local:9000',
    pathRewrite: {
    '/[0-9]+': '',
    },
    },
    },
    };
    }

    // Export the config (be careful not to call
  13. @versedi versedi created this gist Aug 16, 2019.
    265 changes: 265 additions & 0 deletions webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,265 @@
    /* eslint-disable no-useless-escape */
    const Encore = require('@symfony/webpack-encore');
    const TerserPlugin = require('terser-webpack-plugin');
    const CircularDependencyPlugin = require('circular-dependency-plugin');
    const HtmlCriticalWebpackPlugin = require('html-critical-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const PurgecssPlugin = require('purgecss-webpack-plugin');
    const WebpackBar = require('webpackbar');
    const path = require('path');
    const glob = require('glob-all');
    const cssWhitelist = require('./purge-css-whitelist');
    const sassOptions = {
    includePaths: ['node_modules', './resources/assets/scss/'],
    };

    if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
    }
    Encore.addPlugin(new WebpackBar());

    if (Encore.isProduction()) {
    Encore.addPlugin(
    new TerserPlugin({
    terserOptions: {
    sourceMap: !Encore.isProduction(),
    cache: !Encore.isProduction(),
    parallel: true,
    output: {
    // comments: false,
    },
    },
    }),
    );
    }
    if (!Encore.isProduction()) {
    Encore.configureFilenames({
    js: '[name].js',
    css: '[name].css',
    images: 'images/[name].[ext]',
    fonts: 'fonts/[name].[ext]',
    });
    } else {
    Encore.enablePostCssLoader();
    }

    if (!Encore.isProduction()) {
    Encore.addPlugin(
    new CircularDependencyPlugin({
    // exclude detection of files based on a RegExp
    exclude: /a\.js|node_modules/,
    // add errors to webpack instead of warnings
    failOnError: true,
    // set the current working directory for displaying module paths
    cwd: process.cwd(),
    }),
    );
    }

    // Uncomment only when generating static site for above the fold CSS (critical CSS).
    // if (!Encore.isProduction()) {
    // Encore.addPlugin(
    // new HtmlCriticalWebpackPlugin({
    // base: path.resolve(__dirname, 'public'),
    // src: 'static_home.html',
    // dest: 'optimized_home.html',
    // inline: true,
    // minify: true,
    // extract: true,
    // width: 375,
    // height: 565,
    // penthouse: {
    // blockJSRequests: false,
    // timeout: 99999,
    // },
    // }),
    // );
    // }

    Encore.setOutputPath('public/assets/') // directory where compiled assets will be stored
    .setPublicPath('/assets'); // public path used by the web server to access the output path

    if (Encore.isProduction()) {
    Encore.cleanupOutputBeforeBuild();
    }

    Encore.copyFiles({
    from: './resources/assets/images',
    to: 'images/[path][name].[ext]',
    pattern: /\.(png|jpg|jpeg|gif|svg)/,
    });

    if (Encore.isProduction()) {
    Encore.copyFiles({
    from: './resources/assets/images',
    to: 'images/[path][name]',
    pattern: '/(logopng)/',
    });
    }

    // Disabled, we use MiniCssExtractPlugin with PurgeCSS
    // Encore.enableSassLoader(options => {
    // options.includePaths = sassOptions.includePaths;
    //
    // if (!Encore.isProduction()) {
    // options.minimize = false;
    // } else {
    // options.minimize = true;
    // }
    // });

    Encore.addLoader({
    test: /\.scss$/,
    use: [
    {
    loader: MiniCssExtractPlugin.loader,
    options: {
    // you can specify a publicPath here
    // by default it uses publicPath in webpackOptions.output
    publicPath: '../',
    hmr: process.env.NODE_ENV === 'development',
    },
    },
    'css-loader',
    'sass-loader',
    ],
    });
    Encore.addPlugin(
    new MiniCssExtractPlugin({
    filename: '[name].css',
    }),
    );
    Encore.addPlugin(
    new PurgecssPlugin({
    // folders: ['resources/views/**/*', 'resources/assets/scss/'],
    paths: glob.sync([path.join(__dirname, 'resources/views/**/*/*.blade.php')]),
    whitelist: cssWhitelist,
    whitelistPatterns: [
    /icon$/,
    /primary$/,
    /info$/,
    /success$/,
    /danger$/,
    /swiper\-w+/,
    /slide$/,
    /popover\-\w+/,
    /tooltip\-\w+/,
    /lb\-\w+/,
    /ui\-\w+/,
    ],
    }),
    );
    Encore.configureOptimizeCssPlugin().enableSourceMaps(!Encore.isProduction());

    Encore.configureBabel(
    babelConfig => {
    // add additional presets (preset-env is added by default)
    babelConfig.presets.push('@babel/preset-flow');
    // IE11/Edge requires below plugins
    babelConfig.plugins.push('@babel/plugin-transform-spread');
    babelConfig.plugins.push('@babel/plugin-transform-exponentiation-operator');
    // no plugins are added by default, but you can add some
    // babelConfig.plugins.push('styled-jsx/babel');
    // if (Encore.isProduction()) {
    // babelConfig.plugins.push("transform-remove-console");
    // }
    },
    {
    // node_modules is not processed through Babel by default
    // but you can whitelist specific modules to process
    includeNodeModules: [
    'jquery',
    'jquery-ui',
    'jquery-lazy',
    'swiper',
    'es-cookies',
    'select2',
    'mdb',
    'bootstrap',
    'urijs',
    'dom7',
    'cleave.js',
    ],
    useBuiltIns: 'usage',
    corejs: 3,
    // or completely control the exclude rule (note that you
    // can't use both "include_node_modules" and "exclude" at
    // the same time)
    // exclude: /bower_components/
    },
    );

    /*
    * ENTRY CONFIG
    *
    * Add 1 entry for each "page" of your app
    * (including one that's included on every page - e.g. "app")
    *
    * Each entry will result in one JavaScript file (e.g. app.js)
    * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
    */
    Encore.splitEntryChunks()
    .addEntry('app', './resources/assets/js/entries/app.ts')
    // .addEntry('errors', './resources/assets/js/entries/errors.ts')
    .addEntry('home', './resources/assets/js/entries/home.ts')
    .addEntry('profile', './resources/assets/js/entries/profile.ts')
    .addEntry('checkout', './resources/assets/js/entries/checkout.ts')
    .addEntry('product-list', './resources/assets/js/entries/product-list.ts')
    .addEntry('product-view', './resources/assets/js/entries/product-view.ts')
    .enableVersioning(Encore.isProduction())
    .enableIntegrityHashes(Encore.isProduction())
    .enableSingleRuntimeChunk()
    .configureSplitChunks(() => ({
    chunks: 'all',
    }))

    .autoProvidejQuery() // uncomment if you're having problems with a jQuery plugin

    .configureFriendlyErrorsPlugin()
    // uncomment if you use TypeScript
    .enableTypeScriptLoader();
    // .enableHandlebarsLoader()
    // .enableForkedTypeScriptTypesChecking()
    // .configureFilenames({
    // images: '[path][name].[ext]',
    // })

    // Retrieve the config
    const config = Encore.getWebpackConfig();

    if (Encore.isProduction()) {
    config.devtool = 'source-map';
    } else {
    Encore.addLoader({
    test: [/\.ts$/, /\.scss/],
    use: ['cache-loader', 'babel-loader'],
    include: [path.resolve('resources/assets/**/*'), path.resolve('node_modules')],
    });
    // Change the kind of source map generated in development mode
    config.devtool = 'inline-source-map';
    // USE cheap for Debugging in Chrome
    // config.devtool = 'cheap-module-eval-source-map';
    //
    config.optimization.minimize = false;

    Encore.configureWatchOptions(function(watchOptions) {
    watchOptions.poll = 1000;
    watchOptions.aggregateTimeout = 1000;
    watchOptions.ignored = /node_modules/;
    });
    //Use below options when you need to debug webpack build
    config.stats = {
    // assets: true,
    // builtAt: true,
    cachedAssets: true,
    errors: true,
    errorDetails: true,
    // reasons: true,
    timings: true,
    // warnings: true,
    };
    }

    // Export the config (be careful not to call
    // getWebpackConfig() again)
    module.exports = config;