Proofreading webpack.config.js for clarity

* Adding initial js and css files

* removing sass by default to avoid needing extra packages

* enabling notifications

symfony/webpack-encore-pack/1.0/assets/css/app.css

@@ -0,0 +1,3 @@
+body {
+    background-color: lightgray;
+}

symfony/webpack-encore-pack/1.0/assets/js/app.js

@@ -0,0 +1,14 @@
+/*
+ * Welcome to your app's main JavaScript file!
+ *
+ * We recommend including the built version of this JavaScript file
+ * (and its CSS file) in your base layout (base.html.twig).
+ */
+
+// any CSS you require will output into a single css file (app.css in this case)
+require('../css/app.css');
+
+// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
+// var $ = require('jquery');
+
+console.log('Hello Webpack Encore! Edit me in assets/js/app.js');

symfony/webpack-encore-pack/1.0/package.json

@@ -1,6 +1,7 @@
 {
     "devDependencies": {
-        "@symfony/webpack-encore": "^0.19.0"
+        "@symfony/webpack-encore": "^0.19.0",
+        "webpack-notifier": "^1.6.0"
     },
     "license": "UNLICENSED",
     "private": true,

symfony/webpack-encore-pack/1.0/webpack.config.js

@@ -1,30 +1,46 @@
 var Encore = require('@symfony/webpack-encore');
 
 Encore
-    // the project directory where compiled assets will be stored
+    // directory where compiled assets will be stored
     .setOutputPath('public/build/')
-    // the public path used by the web server to access the previous directory
+    // public path used by the web server to access the output path
     .setPublicPath('/build')
-    // the public path you will use in Symfony's asset() function - e.g. asset('build/some_file.js')
-    .setManifestKeyPrefix('build/')
+    // only needed for CDN's or sub-directory deploy
+    //.setManifestKeyPrefix('build/')
 
+    /*
+     * 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.
+     */
+    .addEntry('app', './assets/js/app.js')
+    //.addEntry('page1', './assets/js/page1.js')
+    //.addEntry('page2', './assets/js/page2.js')
+
+    /*
+     * FEATURE CONFIG
+     *
+     * Enable & configure other features below. For a full
+     * list of features, see:
+     * https://symfony.com/doc/current/frontend.html#adding-more-features
+     */
     .cleanupOutputBeforeBuild()
+    .enableBuildNotifications()
     .enableSourceMaps(!Encore.isProduction())
-
-    // the following line enables hashed filenames (e.g. app.abc123.css)
+    // enables hashed filenames (e.g. app.abc123.css)
     .enableVersioning(Encore.isProduction())
 
-    // uncomment to define the assets of the project
-    //.addEntry('js/app', './assets/js/app.js')
-    //.addStyleEntry('css/app', './assets/css/app.scss')
+    // enables Sass/SCSS support
+    //.enableSassLoader()
 
     // uncomment if you use TypeScript
     //.enableTypeScriptLoader()
 
-    // uncomment if you use Sass/SCSS files
-    //.enableSassLoader()
-
-    // uncomment for legacy applications that require $/jQuery as a global variable
+    // uncomment if you're having problems with a jQuery plugin
     //.autoProvidejQuery()
 ;