bug #536 Fix JSON files support in Encore.copyFiles() (Lyrkan)

This PR was merged into the master branch.

Discussion
----------

Fix JSON files support in Encore.copyFiles()

This PR fixes #535.

As explained in the issue, the current version doesn't allow `Encore.copyFiles()` to process JSON files because of how Webpack 4 handles them.

Basically, from what I understand, for most of the files it works that way:

```
Imported file (module.type = javascript/auto)
  => file-loader (takes anything, returns JS content)
  => Webpack JS parser
```

But for `.json` files the JS parser is replaced by a JSON parser:

```
Imported file (module.type = json)
  => file-loader (takes anything, returns JS content)
  => Webpack JSON parser
```

Since that "Webpack JSON parser" part expects JSON data (and not something that contains JS), the compilation fails at that point.

There is no way to disable that behavior when you specify loaders the "inline" way... which is what we do for `Encore.copyFiles()`, you can only do it by defining a config rule that forces the `javascript/auto` type.

What the PR does: it adds another loader in front of the file-loader that returns the input it received but after setting its `_module.type` (and the generator/parser that go with it) to `javascript/auto`.

So in the end we get:

```
Imported file (module.type = json)
  => file-loader (takes anything, returns JS content)
  => copy-files-loader (sets type to javascript/auto and returns the same content)
  => Webpack JS parser
```

Commits
-------

4ef8c2a Fix JSON files support in Encore.copyFiles()

Author: weaverryan

fixtures/copy/foo.css

@@ -0,0 +1 @@
+This is an invalid content to check that the file is still copied

fixtures/copy/foo.js

@@ -0,0 +1 @@
+This is an invalid content to check that the file is still copied

fixtures/copy/foo.json

@@ -0,0 +1 @@
+This is an invalid content to check that the file is still copied

lib/config-generator.js

@@ -183,8 +183,10 @@ class ConfigGenerator {
                         copyTo = this.webpackConfig.useVersioning ? '[path][name].[hash:8].[ext]' : '[path][name].[ext]';
                     }
 
+                    const copyFilesLoader = require.resolve('./webpack/copy-files-loader');
+                    const fileLoader = require.resolve('file-loader');
                     const copyContext = entry.context ? path.resolve(this.webpackConfig.getContext(), entry.context) : copyFrom;
-                    const requireContextParam = `!${require.resolve('file-loader')}?context=${copyContext}&name=${copyTo}!${copyFrom}`;
+                    const requireContextParam = `!${copyFilesLoader}!${fileLoader}?context=${copyContext}&name=${copyTo}!${copyFrom}`;
 
                     return buffer + `
                         const context_${index} = require.context(

lib/webpack/copy-files-loader.js

@@ -0,0 +1,43 @@
+/*
+ * This file is part of the Symfony Webpack Encore package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+const LoaderDependency = require('webpack/lib/dependencies/LoaderDependency');
+
+module.exports = function loader(source) {
+    // This is a hack that allows `Encore.copyFiles()` to support
+    // JSON files using the file-loader (which is not something
+    // that is supported in Webpack 4, see https://github.com/symfony/webpack-encore/issues/535)
+    //
+    // Since there is no way to change the module's resource type from a loader
+    // without using private properties yet we have to use "this._module".
+    //
+    // By setting its type to 'javascript/auto' Webpack won't try parsing
+    // the result of the loader as a JSON object.
+    //
+    // For more information:
+    // https://github.com/webpack/webpack/issues/6572#issuecomment-368376326
+    // https://github.com/webpack/webpack/issues/7057
+    const requiredType = 'javascript/auto';
+    if (this._module.type !== requiredType) {
+        // Try to retrieve the factory used by the LoaderDependency type
+        // which should be the NormalModuleFactory.
+        const factory = this._compilation.dependencyFactories.get(LoaderDependency);
+        if (factory === undefined) {
+            throw new Error('Could not retrieve module factory for type LoaderDependency');
+        }
+
+        this._module.type = requiredType;
+        this._module.generator = factory.getGenerator(requiredType);
+        this._module.parser = factory.getParser(requiredType);
+    }
+
+    return source;
+};

test/functional.js

@@ -1891,6 +1891,44 @@ module.exports = {
                     done();
                 });
             });
+
+            it('Copy files without processing them', (done) => {
+                const config = createWebpackConfig('www/build', 'production');
+                config.addEntry('main', './js/no_require');
+                config.setPublicPath('/build');
+                config.copyFiles({ from: './copy' });
+
+                // By default the optimize-css-assets-webpack-plugin will
+                // run on ALL emitted CSS files, which includes the ones
+                // handled by `Encore.copyFiles()`.
+                // We disable it for this test since our CSS file will
+                // not be valid and can't be handled by this plugin.
+                config.configureOptimizeCssPlugin(options => {
+                    options.assetNameRegExp = /^$/;
+                });
+
+                testSetup.runWebpack(config, (webpackAssert) => {
+                    expect(config.outputPath).to.be.a.directory()
+                        .with.files([
+                            'entrypoints.json',
+                            'runtime.js',
+                            'main.js',
+                            'manifest.json',
+                            'foo.css',
+                            'foo.js',
+                            'foo.json',
+                        ]);
+
+                    for (const file of ['foo.css', 'foo.js', 'foo.json']) {
+                        webpackAssert.assertOutputFileContains(
+                            file,
+                            'This is an invalid content to check that the file is still copied'
+                        );
+                    }
+
+                    done();
+                });
+            });
         });
 
         describe('entrypoints.json & splitChunks()', () => {