title: Yarn and Webpack Encore configuration in Symfony 4.1 project
body: <h2>Introduction</h2>
  
  <p>I am trying out <code>Symfony 4.1</code> + <code>Yarn</code> + <code>Webpack Encore</code> on a project that requires file upload. To do that i chose <code>OneUpUploaderBundle</code> with <code>Blueimp jquery file upload</code> frontend.</p>
  
  <p>But getting a bit stomped by amount of configuration that is needed 
  as oposed to <em>old scool</em> approach to add <code>CSS</code> and <code>JavaScript</code>
  wherever they are needed - yet without of advantages of package 
  management.</p>
  
  <p>Of course updating dependencies easyly with package manager 
  does come with a price. But when after initial configuration 
  build compiles it is easy afterwards or suposed to be easy.</p>
  
  <h2>Problem</h2>
  
  <p>I would like to be able to upload files using previously mentioned combination of libraries. I am looking for correct config.</p>
  
  <p>At the moment build does not compile - i get an error!</p>
  
  <pre><code>ERROR  Failed to compile with 1 errors
  This dependency was not found:
  * jquery-ui/ui/widget in ./node_modules/blueimp-file-upload/js/jquery.fileupload.js
  </code></pre>
  
  <p>As you ccan see from attached code i tried to provide alias for <code>jquery-ui/ui/widget</code>, yet it did not result in found package.</p>
  
  <p>Also, there is no package <code>jquery-ui/ui/widget</code> in Yarn directory, but
  there is <code>jquery.ui.widget</code> which i tried to require unsucessfully.</p>
  
  <h2>Code</h2>
  
  <p><strong>Webpack.config.js</strong></p>
  
  <pre><code>var Encore = require('@symfony/webpack-encore');
  
  const CopyWebpackPlugin = require('copy-webpack-plugin');
  
  Encore
      // directory where all compiled assets will be stored
      .setOutputPath('public/build/')
  
      // what's the public path to this directory (relative to your project's document root dir)
      .setPublicPath('/build')
  
      // allow legacy applications to use $/jQuery as a global variable
      .autoProvidejQuery()
  
      // empty the outputPath dir before each build
      .cleanupOutputBeforeBuild()
  
      // will output as web/build/app.js
      .addEntry('app', './assets/js/main.js')
      .addEntry('blueimp', './assets/js/blueimp.js')
  
      .addStyleEntry('global', './assets/css/global.scss')
      .addStyleEntry('admin', './assets/css/admin.scss')
  
      .addPlugin(new CopyWebpackPlugin([
          // copies to {output}/static
          { from: './assets/static', to: 'static' }
      ]))
  
      // allow sass/scss files to be processed
      .enableSassLoader(function(sassOptions) {},
          {
              resolveUrlLoader: false
          }
      )
  
      .autoProvideVariables({
          $: 'jquery',
          jQuery: 'jquery',
          'window.jQuery': 'jquery',
          'jquery.ui.widget': 'jquery-ui/ui/widget'
      })
  
      .enableSourceMaps(!Encore.isProduction())
  
  // create hashed filenames (e.g. app.abc123.css)
  // .enableVersioning()
  ;
  
  // export the final configuration
  module.exports = Encore.getWebpackConfig();
  </code></pre>
  
  <p><strong>Package.json</strong></p>
  
  <pre><code>{
      "devDependencies": {
          "@symfony/webpack-encore": "^0.20.1",
          "copy-webpack-plugin": "^4.5.1"
      },
      "license": "UNLICENSED",
      "private": true,
      "scripts": {
          "dev-server": "encore dev-server",
          "dev": "encore dev",
          "watch": "encore dev --watch",
          "build": "encore production"
      },
      "dependencies": {
          "blueimp-file-upload": "^9.22.0",
          "bootstrap": "^4.1.3",
          "jquery": "^3.3.1",
          "jquery.ui.widget": "^1.10.3",
          "jstree": "^3.3.5",
          "node-sass": "^4.9.2",
          "popper.js": "^1.14.3",
          "sass-loader": "^7.1.0"
      }
  }
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>// loads the jquery package from node_modules
  var $ = window.$ = window.jQuery = require('jquery');
  
  // or you can include specific pieces
  require('bootstrap/dist/js/bootstrap');
  </code></pre>
  
  <p><strong>blueimp.js</strong></p>
  
  <pre><code>'use strict';
  
  // add upload
  require('blueimp-file-upload/css/jquery.fileupload.css');
  require('blueimp-file-upload/css/jquery.fileupload-ui.css');
  
  require('jquery/dist/jquery.js');
  require('jquery.ui.widget/jquery.ui.widget.js');
  require('blueimp-file-upload/js/jquery.fileupload.js');
  require('blueimp-file-upload/js/jquery.iframe-transport.js');
  </code></pre>
  
  <h2>Thank you</h2>
  
  <p>Thank you for your coments and answers.</p>