feature symfony#8272 Adding documentation for 0.13.0 Encore feature changes (weaverryan)

This PR was merged into the 3.3 branch.

Discussion
----------

Adding documentation for 0.13.0 Encore feature changes

Various changes, all mentioned here: https://github.com/symfony/webpack-encore/releases/tag/v0.13.0 :)

Commits
-------

58b5596 Adding documentation for 0.13.0 Encore feature changes

Author: weaverryan

frontend/encore/babel.rst

@@ -23,7 +23,7 @@ Need to extend the Babel configuration further? The easiest way is via
             babelConfig.presets.push('es2017');
 
             // no plugins are added by default, but you can add some
-            // babelConfig.plugins = ['styled-jsx/babel'];
+            // babelConfig.plugins.push('styled-jsx/babel');
         })
     ;
 

frontend/encore/css-preprocessors.rst

@@ -59,4 +59,19 @@ And enable it in ``webpack.config.js``:
         .enableLessLoader()
     ;
 
-That's it! All files ending in ``.less`` will be pre-processed.
+That's it! All files ending in ``.less`` will be pre-processed. You can also pass
+options to ``less-loader``:
+
+.. code-block:: javascript
+
+    // webpack.config.js
+    // ...
+
+    Encore
+        // ...
+        .enableLessLoader(function(options) {
+            // https://github.com/webpack-contrib/less-loader#examples
+            // http://lesscss.org/usage/#command-line-usage-options
+            // options.relativeUrls = false;
+        });
+    ;

frontend/encore/dev-server.rst

@@ -24,6 +24,19 @@ by the normal `webpack-dev-server`_. For example:
 
 This will start a server at ``https://localhost:9000``.
 
+Using dev-server inside a VM
+----------------------------
+
+If you're using ``dev-server`` from inside a virtual machine, then you'll need
+to bind to all IP addresses and allow any host to access the server:
+
+.. code-block:: terminal
+
+    $ ./node_modules/.bin/encore dev-server --host 0.0.0.0 --disable-host-check
+
+You can now access the dev-server using the IP address to your virtual machine on
+port 8080 - e.g. http://192.168.1.1:8080.
+
 Hot Module Replacement HMR
 --------------------------
 

frontend/encore/postcss.rst

@@ -36,6 +36,20 @@ Then, Enable the loader in Encore!
     ;
 
 That's it! The ``postcss-loader`` will now be used for all CSS, Sass, etc files.
+You can also pass options to the `postcss-loader`_ by passing a callback:
+
+.. code-block:: diff
+
+    // webpack.config.js
+
+    Encore
+        // ...
+    +     .enablePostCssLoader((options) => {
+    +         options.config = {
+    +             path: 'app/config/postcss.config.js'
+    +         };
+    +     })
+    ;
 
 Adding browserslist to package.json
 -----------------------------------
@@ -62,4 +76,5 @@ See `browserslist`_ for more details on the syntax.
 .. _`autoprefixing`: https://github.com/postcss/autoprefixer
 .. _`linting`: https://stylelint.io/
 .. _`browserslist`: https://github.com/ai/browserslist
-.. _`babel-preset-env`: https://github.com/babel/babel-preset-env
+.. _`babel-preset-env`: https://github.com/babel/babel-preset-env
+.. _`postcss-loader`: https://github.com/postcss/postcss-loader

frontend/encore/simple-example.rst

@@ -70,6 +70,11 @@ To build the assets, use the ``encore`` executable:
     # compile assets, but also minify & optimize them
     $ ./node_modules/.bin/encore production
 
+    # shorter version of the above 3 commands
+    $ yarn run encore dev
+    $ yarn run encore dev -- --watch
+    $ yarn run encore prodution
+
 .. note::
 
     Re-run ``encore`` each time you update your ``webpack.config.js`` file.

frontend/encore/typescript.rst

@@ -34,13 +34,33 @@ also configure the `ts-loader options`_ via a callback:
 If React assets are enabled (``.enableReactPreset()``), any ``.tsx`` file will be
 processed as well by ``ts-loader``.
 
-Loader usage can be checked better in its `README`_ documentation.
+More information about the ``ts-loader`` can be found in its `README`_.
 
-    "Use webpack like normal, including ``webpack --watch`` and ``webpack-dev-server``,
-    or through another build system using the Node.js API."
+Faster Builds with fork-ts-checker-webpack-plugin
+-------------------------------------------------
 
-    -- Running section of ts-loader documentation
+By using `fork-ts-checker-webpack-plugin`_, you can run type checking in a separate
+process, which can speedup compile time. To enable it, install the plugin:
+
+.. code-block:: terminal
+
+    $ yarn add --dev fork-ts-checker-webpack-plugin
+
+Then enable it by calling:
+
+.. code-block:: diff
+
+    // webpack.config.js
+
+    Encore
+        // ...
+        enableForkedTypeScriptTypesChecking()
+    ;
+
+This plugin requires that you have a `tsconfig.json`_ file that is setup correctly.
 
 .. _`TypeScript`: https://www.typescriptlang.org/
 .. _`ts-loader options`: https://github.com/TypeStrong/ts-loader#options
 .. _`README`: https://github.com/TypeStrong/ts-loader#typescript-loader-for-webpack
+.. _`fork-ts-checker-webpack-plugin`: https://www.npmjs.com/package/fork-ts-checker-webpack-plugin
+.. _`tsconfig.json`: https://www.npmjs.com/package/fork-ts-checker-webpack-plugin#modules-resolution