webpack production demo file

package.json

{
  "name": "symfony",
  "version": "1.0.0",
  "description": "Symfony Standard Edition ========================",
  "main": "index.js",
  "directories": {
    "test": "tests"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "watch": "webpack-dev-server --config webpack.dev.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.1.6",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "clean-webpack-plugin": "^0.1.17",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.5",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.8",
    "precss": "^2.0.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "uglifyjs-webpack-plugin": "^1.0.1",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3",
    "webpack-manifest-plugin": "^1.3.2",
    "webpack-merge": "^4.1.0"
  },
  "dependencies": {
    "bulma": "^0.6.0",
    "cash-dom": "^1.3.5",
    "font-awesome": "^4.7.0",
    "lodash": "^4.17.4"
  }
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');

const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const ManifestPlugin = require('webpack-manifest-plugin');

const provide = new webpack.ProvidePlugin({
    $: 'cash-dom',
    jQuery: 'cash-dom'
})

const extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css"
});

module.exports = {
    devtool: 'source-map',
    entry: {
        index: './app/Resources/public/js/index.js'
    },
    output: {
        filename: '[name].[chunkhash].js',
        publicPath: "/dist/",
        path: path.resolve(__dirname, 'web/dist')
    },
    plugins: [
        new CleanWebpackPlugin(['web/dist']),
        provide,
        extractSass,
        new ManifestPlugin(),
        new UglifyJSPlugin({
            sourceMap: true
        }),
    ],
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },
        {
            test: /\.scss$/,
            use: extractSass.extract({
                use: [
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true
                        }
                    },
                    {
                        loader: "sass-loader",
                    }

                ],
                fallback: "style-loader"
            })
        },
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env']
                }
            }
        },
        {
            test: /\.(png|svg|jpg|gif)$/,
            use: [
                'file-loader'
            ]
        },
        {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: "[name].[ext]",
                    outputPath: "fonts/",
                },
            }]
        }]
    }
};

webpack.encore.complex.js

const Encore = require('@symfony/webpack-encore');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ConcatPlugin = require('webpack-concat-plugin');
const webpack = require('webpack');

Encore
    .setOutputPath('web/build/')
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .enableSassLoader()
    .addLoader({
        test: /\.hbs$/,
        loader: 'handlebars-loader',
        options: {
            helperDirs: [
                __dirname + '/app/Resources/public/js/helpers'
            ]
        }
    })
    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        '_': 'lodash'
    })
    .createSharedEntry('vendor', [
        'jquery',
        'lodash',
        'lockr',
        'bootstrap-sass',
        'moment',
        'moment/locale/de',
        'parsleyjs',
        'urijs',
        'backbone'
    ])

    .addStyleEntry('lsk', './app/Resources/public/scss/app.scss')
    .addStyleEntry('error', './app/Resources/public/scss/error.scss')
    .addStyleEntry('city-overview', './src/ComparisonBundle/Resources/public/scss/city-overview-page.scss')

    .addEntry('cr', './src/ComparisonBundle/Resources/public/js/lsk_cr.js')
    .addEntry('profile', './src/ComparisonBundle/Resources/public/js/lsk_profile.js')
    .addEntry('checkout', './src/ComparisonBundle/Resources/public/js/lsk_checkout.js')
    .addEntry('admin', './src/ReactorBundle/Resources/public/js/admin.js')
    .addEntry('static', './src/StaticPagesBundle/Resources/public/js/static.js')
    .addEntry('wizard', './src/WizardBundle/Resources/public/js/wizard/index.js')

    // https://stackoverflow.com/questions/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack#25426019
    .addPlugin(new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de/))

    .addPlugin(new CopyWebpackPlugin([
        { context: 'app/Resources/public/images', from: '**/*', to: 'images' },
        { context: 'src/ComparisonBundle/Resources/public/images', from: '**/*', to: 'images' },
        { context: 'src/StaticPagesBundle/Resources/public/images', from: '**/*', to: 'images/static' },
        { context: 'src/StaticPagesBundle/Resources/public/vcard', from: '*.vcf', to: 'vcards'},
        { context: 'src/EmailPDFBundle/Resources/public/images', from: '**/*', to: 'images/email'},
        { context: 'src/WizardBundle/Resources/public/images', from: '**/*', to: 'images/wizard'}
    ]))

    .addPlugin(new ConcatPlugin({ // scripts for external iframes etc.
        uglify: true,
        sourceMap: false,
        fileName: '../js/alv_ext.js',
        filesToConcat: [
            './node_modules/urijs/src/URI.min.js', 
            './node_modules/iframe-resizer/js/iframeResizer.min.js', 
            './node_modules/underscore/underscore-min.js', 
            './src/ExternalBundle/Resources/public/js/lsk_external.js'
        ]
    }))
    .configureFilenames({
        js: '[name].js',
        images: 'images/[name].[ext]',
        fonts: 'fonts/[name].[ext]?[hash]'
    })

    //todo: https://github.com/symfony/webpack-encore/issues/125
    //in 0.13 encore decided to use a default asset versioning scheme for images
    // .enableVersioning()
;

let config = Encore.getWebpackConfig();
if (!Encore.isProduction()){
    //https://webpack.js.org/configuration/devtool/#devtool
    config.devtool = 'cheap-module-eval-source-map';
}

config.watchOptions = { poll: true, ignored: /node_modules/ };

module.exports = config;

webpack.encore.simple.js

const Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('web/dist/')
    .setPublicPath('/dist')
    .setManifestKeyPrefix('')
    .cleanupOutputBeforeBuild()
    .enableSassLoader()
    .createSharedEntry('vendor', [
        'babel-polyfill',
        'cash-dom'
    ])
    .autoProvideVariables({
        $: 'cash-dom',
        jQuery: 'cash-dom',
        'window.jQuery': 'cash-dom',
    })
    .addEntry('index', './app/Resources/public/js/index.jsx')
    .enableSourceMaps(!Encore.isProduction())
    .enableReactPreset()
    .configureBabel(babelConfig => {
        babelConfig.presets.push('es2017');
    })
    .enableVersioning(Encore.isProduction())

module.exports = Encore.getWebpackConfig();