changing the default to asset/resource

This will help avoid confusion because images won't be inlined by default.

Author: weaverryan

CHANGELOG.md

@@ -8,15 +8,11 @@
    (and  optionally `url-loader` via `configureUrlLoader()`) to Webpack 5's
    new [Asset Modules](https://webpack.js.org/guides/asset-modules/).
    In practice, unless you have a highly-configured system, this should
-   not cause significant changes. You will notice that smaller images
-   and fonts (smaller than 8kb) will be "inlined" in CSS files instead
-   of being extracted to independent files for performance. This is
-   configurable - see the new `configureImageRule()` and `configureFontRule()`
-   methods.
+   not cause significant changes.
 
  * [BC BREAK] The `configureUrlLoader()` method was removed. See
    `configureImageRule()` and `configureFontRule()` - specifically the
-   `maxSize` option. The `url-loader` is no longer used.
+   `maxSize` option and type: 'asset'. The `url-loader` is no longer used.
 
  * [BC BREAK] The `disableImagesLoader()` and `disableFontsLoader()` methods
    have been removed. See `configureImageRule()` and `configureFontRule()`

index.js

@@ -1388,8 +1388,10 @@ class Encore {
      * ```
      * Encore.configureImageRule({
      *     // common values: asset, asset/resource, asset/inline
-     *     // or javascript/auto to disable asset images (see next example)
-     *     type: 'asset',
+     *     // Using "asset" will allow smaller images to be "inlined"
+     *     // instead of copied.
+     *     // javascript/auto caan be used to disable asset images (see next example)
+     *     type: 'asset/resource',
      *
      *     // applicable when for "type: asset": files smaller than this
      *     // size will be "inlined" into CSS, larer files will be extracted

lib/WebpackConfig.js

@@ -98,13 +98,13 @@ class WebpackConfig {
         this.cleanupOutput = false;
         this.extractCss = true;
         this.imageRuleOptions = {
-            type: 'asset',
+            type: 'asset/resource',
             maxSize: null,
             filename: 'images/[name].[hash:8][ext]',
             enabled: true,
         };
         this.fontRuleOptions = {
-            type: 'asset',
+            type: 'asset/resource',
             maxSize: null,
             filename: 'fonts/[name].[hash:8][ext]',
             enabled: true,

lib/package-helper.js

@@ -177,6 +177,12 @@ function addPackagesVersionConstraint(packages) {
         const newData = Object.assign({}, packageData);
 
         if (packageData.enforce_version) {
+            if (!packageJsonData.devDependencies) {
+                logger.warning('Could not find devDependencies key on @symfony/webpack-encore package');
+
+                return newData;
+            }
+
             // this method only supports devDependencies due to how it's used:
             // it's mean to inform the user what deps they need to install
             // for optional features

test/WebpackConfig.js

@@ -1296,6 +1296,7 @@ describe('WebpackConfig object', () => {
             const config = createConfig();
             const callback = () => {};
             config.configureImageRule({
+                type: 'asset',
                 maxSize: 1024,
             }, callback);
 
@@ -1333,6 +1334,7 @@ describe('WebpackConfig object', () => {
             const config = createConfig();
             const callback = () => {};
             config.configureFontRule({
+                type: 'asset',
                 maxSize: 1024,
             }, callback);
 

test/config-generator.js

@@ -825,13 +825,13 @@ describe('The config-generator function', () => {
             const actualConfig = configGenerator(config);
 
             const imagesRule = findRule(/\.(png|jpg|jpeg|gif|ico|svg|webp)$/, actualConfig.module.rules);
-            expect(imagesRule.type).to.equal('asset');
+            expect(imagesRule.type).to.equal('asset/resource');
             expect(imagesRule.generator).to.eql({ filename: 'images/[name].[hash:8][ext]' });
             expect(imagesRule.parser).to.eql({});
             expect(imagesRule).to.include.keys('test', 'type', 'generator', 'parser');
 
             const fontsRule = findRule(/\.(woff|woff2|ttf|eot|otf)$/, actualConfig.module.rules);
-            expect(fontsRule.type).to.equal('asset');
+            expect(fontsRule.type).to.equal('asset/resource');
             expect(fontsRule.generator).to.eql({ filename: 'fonts/[name].[hash:8][ext]' });
         });
 
@@ -858,6 +858,7 @@ describe('The config-generator function', () => {
             config.publicPath = '/public-path';
             config.addEntry('main', './main');
             config.configureImageRule({
+                type: 'asset',
                 maxSize: 3000,
             });
 

test/functional.js

@@ -1464,7 +1464,7 @@ module.exports = {
                 expect(config.outputPath).to.be.a.directory().with.deep.files([
                     'main.js',
                     'main.css',
-                    // 'images/logo.26bd867d.png', logo.png is inlined
+                    'images/logo.26bd867d.png',
                     'manifest.json',
                     'entrypoints.json',
                     'runtime.js',
@@ -1529,7 +1529,7 @@ module.exports = {
                 expect(config.outputPath).to.be.a.directory().with.deep.files([
                     'main.js',
                     'main.css',
-                    // 'images/logo.26bd867d.png', logo.png is inlined
+                    'images/logo.26bd867d.png',
                     'manifest.json',
                     'entrypoints.json',
                     'runtime.js',
@@ -1744,8 +1744,8 @@ module.exports = {
             config.setPublicPath('/build');
             config.addStyleEntry('url-loader', './css/url-loader.css');
             // set a size so that they do NOT inline
-            config.configureImageRule({ maxSize: 102400 });
-            config.configureFontRule({ maxSize: 102400 });
+            config.configureImageRule({ type: 'asset', maxSize: 102400 });
+            config.configureFontRule({ type: 'asset', maxSize: 102400 });
 
             testSetup.runWebpack(config, (webpackAssert) => {
                 expect(config.outputPath).to.be.a.directory()