Fix JSON files support in Encore.copyFiles()

Author: Lyrkan

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()', () => {