feature #1125 Changing to support the "server" options object for webpack-dev-server (weaverryan)

weaverryan · weaverryan · commit 275fb6fba76c · 2022-07-06T14:02:00.000-04:00
This PR was squashed before being merged into the main branch. Discussion ---------- Changing to support the "server" options object for webpack-dev-server Follow up to #1118 and solves #1119. The new `server` object has existed since `webpack-dev-server` 4.4 webpack/webpack-dev-server#3940, and we already require 4.8. Support for the old `https` kept for now (with deprecations) to help people migrate. Commits ------- e0fb0ad Changing to support the "server" options object for webpack-dev-server
diff --git a/index.js b/index.js
@@ -709,9 +709,12 @@ class Encore {
      * ```
      * Encore.configureDevServerOptions(function(options) {
      *     // change the configuration
-     *     options.https = {
-     *         key: '<your SSL cert key content>',
-     *         cert: '<your SSL cert content>',
+     *     options.server = {
+     *         type: 'https',
+     *         options: {
+     *             key: '<your SSL cert key content or path>',
+     *             cert: '<your SSL cert content or path>',
+     *         }
      *     };
      * });
      * ```
diff --git a/lib/config-generator.js b/lib/config-generator.js
@@ -60,12 +60,22 @@ class ConfigGenerator {
         /*
          * An unfortunate situation where we need to configure the final runtime
          * config later in the process. The problem is that devServer https can
-         * be activated with either a --https flag or by setting the devServer.https
-         * config to an object or true. So, only at this moment can we determine
+         * be activated with either a --server-type=https flag or by setting the devServer.server.type='https'
+         * config to true. So, only at this moment can we determine
          * if https has been activated by either method.
          */
-        if (this.webpackConfig.useDevServer() && (devServerConfig.https || this.webpackConfig.runtimeConfig.devServerHttps)) {
+        if (this.webpackConfig.useDevServer() &&
+            (
+                devServerConfig.https
+                || (devServerConfig.server && devServerConfig.server.type === 'https')
+                || this.webpackConfig.runtimeConfig.devServerHttps
+            )) {
             this.webpackConfig.runtimeConfig.devServerFinalIsHttps = true;
+
+            if (devServerConfig.https) {
+                logger.deprecation('The "https" option inside of configureDevServerOptions() is deprecated. Use "server = { type: \'https\' }" instead.');
+            }
+
         } else {
             this.webpackConfig.runtimeConfig.devServerFinalIsHttps = false;
         }
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "@babel/preset-env": "^7.16.0",
     "@nuxt/friendly-errors-webpack-plugin": "^2.5.1",
     "assets-webpack-plugin": "7.0.*",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.5",
     "chalk": "^4.0.0",
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^6.7.0",
@@ -55,7 +55,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.17.0",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-transform-react-jsx": "^7.0.0",
+    "@babel/plugin-transform-react-jsx": "^7.12.11",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.0.0",
     "@hotwired/stimulus": "^3.0.0",
@@ -83,7 +83,7 @@
     "less": "^4.0.0",
     "less-loader": "^10.0.0",
     "mocha": "^9.1.4",
-    "postcss": "^8.1.0",
+    "postcss": "^8.3.0",
     "postcss-loader": "^6.0.0",
     "preact": "^10.5.0",
     "preact-compat": "^3.17.0",
diff --git a/test/config-generator.js b/test/config-generator.js
@@ -669,18 +669,24 @@ describe('The config-generator function', () => {
             config.setPublicPath('/');
             config.addEntry('main', './main');
             config.configureDevServerOptions(options => {
-                options.https = {
-                    key: 'https.key',
-                    cert: 'https.cert',
+                options.server = {
+                    'type': 'https',
+                    options: {
+                        key: 'https.key',
+                        cert: 'https.cert',
+                    }
                 };
             });
 
             const actualConfig = configGenerator(config);
 
             expect(actualConfig.devServer).to.containSubset({
-                https: {
-                    key: 'https.key',
-                    cert: 'https.cert',
+                server: {
+                    type: 'https',
+                    options: {
+                        key: 'https.key',
+                        cert: 'https.cert',
+                    }
                 },
             });
 
diff --git a/test/functional.js b/test/functional.js
@@ -229,7 +229,7 @@ describe('Functional tests using webpack', function() {
             config.addEntry('main', './js/code_splitting');
             config.addStyleEntry('font', './css/roboto_font.css');
             config.addStyleEntry('bg', './css/background_image.scss');
-            config.setPublicPath('http://localhost:8090/assets');
+            config.setPublicPath('http://127.0.0.1:8090/assets');
             config.enableSassLoader();
             config.setManifestKeyPrefix('assets');
 
@@ -249,21 +249,21 @@ describe('Functional tests using webpack', function() {
                 // check that the publicPath is set correctly
                 webpackAssert.assertOutputFileContains(
                     'runtime.js',
-                    '__webpack_require__.p = "http://localhost:8090/assets/";'
+                    '__webpack_require__.p = "http://127.0.0.1:8090/assets/";'
                 );
 
                 webpackAssert.assertOutputFileContains(
                     'bg.css',
-                    'http://localhost:8090/assets/images/symfony_logo.91beba37.png'
+                    'http://127.0.0.1:8090/assets/images/symfony_logo.91beba37.png'
                 );
                 webpackAssert.assertOutputFileContains(
                     'font.css',
-                    'http://localhost:8090/assets/fonts/Roboto.e1dcc0db.woff2'
+                    'http://127.0.0.1:8090/assets/fonts/Roboto.e1dcc0db.woff2'
                 );
                 // manifest file has CDN in value
                 webpackAssert.assertManifestPath(
                     'assets/main.js',
-                    'http://localhost:8090/assets/main.js'
+                    'http://127.0.0.1:8090/assets/main.js'
                 );
 
                 testSetup.requestTestPage(
@@ -292,7 +292,8 @@ describe('Functional tests using webpack', function() {
 
         it('The devServer config loads successfully', (done) => {
             const config = createWebpackConfig('public/assets', 'dev-server', {
-                port: '8090'
+                port: '8090',
+                host: '127.0.0.1',
             });
             config.addEntry('main', './js/code_splitting');
             config.addStyleEntry('font', './css/roboto_font.css');
@@ -304,17 +305,17 @@ describe('Functional tests using webpack', function() {
                 // check that the publicPath is set correctly
                 webpackAssert.assertOutputFileContains(
                     'runtime.js',
-                    '__webpack_require__.p = "http://localhost:8090/assets/";'
+                    '__webpack_require__.p = "http://127.0.0.1:8090/assets/";'
                 );
 
                 webpackAssert.assertOutputFileContains(
                     'bg.css',
-                    'http://localhost:8090/assets/images/symfony_logo.91beba37.png'
+                    'http://127.0.0.1:8090/assets/images/symfony_logo.91beba37.png'
                 );
                 // manifest file has CDN in value
                 webpackAssert.assertManifestPath(
                     'assets/main.js',
-                    'http://localhost:8090/assets/main.js'
+                    'http://127.0.0.1:8090/assets/main.js'
                 );
 
                 testSetup.requestTestPage(
diff --git a/yarn.lock b/yarn.lock
