DEP Update dependencies for webpack config #53

GuySartorelli · 2022-11-01T02:23:30Z

Updates dependencies, modernises the build config, and reduces repetition of config.

Note that modules can still use the old config format, which will be useful for projects and third-party modules who want to make minimal changes, but the *WebpackConfig classes handle a lot of the boilerplate which makes it easier for us to make wide-sweeping changes later down the line if we want/need to (e.g. if webpack changes the syntax for some of the config, we just need to change it in this library).

Parent issue

Upgrade frontend build stack for CMS5 silverstripe-admin#1312

GuySartorelli · 2022-11-29T01:40:05Z

configMeta/baseWebpackConfig.js

+/**
+ * A base class for dynamically generating webpack config using Silverstripe default settings
+ */
+module.exports = class BaseWebpackConfig {


This file allows us to simplify the js and css webpack config in individual modules a lot by reducing repetitive patterns - this way module config can rely on these sane defaults, with the ability to easily merge custom config in or replace config if necessary.

GuySartorelli · 2022-11-29T01:40:49Z

configMeta/cssWebpackConfig.js

+ * Otherwise you will get errors because webpack wants to create a js file for each css file. The js files
+ * aren't emitted thanks to the IgnoreEmitPlugin, but this happens after chunk validation.
+ */
+module.exports = class CssWebpackConfig extends BaseWebpackConfig {


99% of the time our modules will want this exact config for sass > css - any that don't can easily use functionality from BaseWebpackConfig to add their customisations.

GuySartorelli · 2022-11-29T01:41:00Z

configMeta/javascriptWebpackConfig.js

+/**
+ * Dynamically generates webpack config for transpiling javascript using Silverstripe default settings
+ */
+module.exports = class JavascriptWebpackConfig extends BaseWebpackConfig {


99% of the time our modules will want this exact config for js - any that don't can easily use functionality from BaseWebpackConfig to add their customisations.

css/modules.js

GuySartorelli · 2022-11-29T01:51:37Z

css/modules.js

 * @param {string} SRC The path to the source scss files
 * @param {string} ROOT The path to the root of the project, this is so we can scope for
- * silverstripe-admin variables.scss
- * @param {boolean} useStyle Determines whether to use the style loader or extract text plugin


This option was added in #10 but doesn't seem to have ever been used. I'm removing it here both to reduce complexity and because style-loader doesn't work the same way it used to, and wants to put js inside the output css files.

GuySartorelli · 2022-11-29T02:05:46Z

js/modules.js

-            ['env', { modules: false }],
-            'react',
-          ],
-          plugins: [
-            'transform-object-rest-spread',
+            ['@babel/preset-env', { useBuiltIns: 'usage', corejs: '3', modules: 'commonjs' }],
+            '@babel/preset-react',


env and react are replaced with the modern @babel/preset-env and @babel/preset-react respectively. The new options are necessary, since babel's polyfills are replaced with core-js.

The transform-object-rest-spread polyfill is no longer needed, as we don't support any browsers that don't natively support the functionality it polyfills.

GuySartorelli · 2022-11-29T02:06:48Z

js/plugins.js

 */
 module.exports = (ENV) => {
-  const uglifyPlugin = (ENV === 'production')


Comments are stripped by default, and the UglifyJsPlugin no longer exists.

GuySartorelli · 2022-11-29T02:12:00Z

js/plugins.js

@@ -27,8 +16,6 @@ module.exports = (ENV) => {
        NODE_ENV: JSON.stringify(ENV || 'development'),
      },
    }),
-    new webpack.NamedModulesPlugin(),


This plugin no longer exists but is also no longer needed. It seems to have been related to a combination of making debugging easier and caching. I haven't noticed any difference since removing it.
For prosterity's sake I'll point out that if we do want this back in the future we can use the following as per the docs:

module.exports = { //... optimization: { moduleIds: 'named', }, };

GuySartorelli · 2022-11-29T02:12:24Z

package.json

@@ -1,13 +1,9 @@
 {
 	"name": "@silverstripe/webpack-config",
-	"version": "1.7.0",
+	"version": "2.0.0",


We'll be releasing a new major for this.

GuySartorelli · 2022-11-29T02:13:14Z

package.json

-	"bin": {
-		"webpack": "./node_modules/.bin/webpack",
-		"sass-lint": "./node_modules/.bin/sass-lint"


bin isn't needed since there are no scripts in this file.

GuySartorelli · 2022-11-29T02:56:51Z

For a usage example, see this webpack config file which comes from this commit from an in-progress PR

GuySartorelli · 2022-11-29T03:14:02Z

configMeta/baseWebpackConfig.js

+  /**
+   * If we are splitting a vendor bundle, make sure all entries "depend on" it as appopriate.
+   */
+  #splitVendorFromEntries() {


The # is private method syntax

GuySartorelli · 2022-12-02T01:18:01Z

js/externals.js

+  // Don't include the exports provided by the current module
+  if (module && exports[module] !== undefined) {
+    delete exports[module];
+  }


The way exports behaves seems to have changed - if the file which is exporting these also has them as external it won't actually include them in the bundle, so they don't get exported and there are errors all over the place. So we have to exclude those from external where appropriate.

GuySartorelli · 2022-12-02T04:55:32Z

js/externals.js

+      // bundles/bundle.js aliases
+      config: 'Config', // alias for lib/Config
+      // bundles/vendor.js
+      '@apollo/client': 'ApolloClient',


Suggested change

'@apollo/client': 'ApolloClient',

// This can't be exposed - see https://github.com/webpack-contrib/expose-loader/issues/188

// '@apollo/client': 'ApolloClient',

css/modules.js

emteknetnz · 2022-12-04T20:43:29Z

README.md

+
+To use all of the default configuration for javascript transpilation, instantiate a new `JavascriptWebpackConfig` object.
+
+This class's constructor takes a `name` string argument (used in the weback console output and for debugging) and a `PATHS` object. It also has a third argument (`moduleName`) which is only needed for core and supported Silverstripe modules and should be set to the name of the module (e.g. `silverstripe/admin`).


Suggested change

This class's constructor takes a `name` string argument (used in the weback console output and for debugging) and a `PATHS` object. It also has a third argument (`moduleName`) which is only needed for core and supported Silverstripe modules and should be set to the name of the module (e.g. `silverstripe/admin`).

This class's constructor takes a `name` string argument (used in the webpack console output and for debugging) and a `PATHS` object. It also has a third argument (`moduleName`) which is only needed for core and supported Silverstripe modules and should be set to the name of the module (e.g. `silverstripe/admin`).

emteknetnz · 2022-12-04T20:43:43Z

README.md

+
+#### Example
+
+This is a minimal example of how to build a webpack configuration array for Silverstripe modules without using the abstraction classes. It produces the exact same configuarion (and therefore the same output files) as the example [using the abstractions](#using-the-abstractions) above.


Suggested change

This is a minimal example of how to build a webpack configuration array for Silverstripe modules without using the abstraction classes. It produces the exact same configuarion (and therefore the same output files) as the example [using the abstractions](#using-the-abstractions) above.

This is a minimal example of how to build a webpack configuration array for Silverstripe modules without using the abstraction classes. It produces the exact same configuration (and therefore the same output files) as the example [using the abstractions](#using-the-abstractions) above.

GuySartorelli mentioned this pull request Nov 1, 2022

Upgrade frontend build stack for CMS5 silverstripe/silverstripe-admin#1312

Closed

7 tasks

GuySartorelli force-pushed the pulls/master/new-major branch 2 times, most recently from 0fa26f9 to a4523a9 Compare November 8, 2022 02:42

GuySartorelli mentioned this pull request Nov 15, 2022

Trying to upgrade webpack #52

Closed

GuySartorelli force-pushed the pulls/master/new-major branch from d47113f to 36ad197 Compare November 29, 2022 01:37

GuySartorelli commented Nov 29, 2022

View reviewed changes

GuySartorelli marked this pull request as ready for review November 29, 2022 02:28

GuySartorelli commented Nov 29, 2022

View reviewed changes

GuySartorelli changed the base branch from master to 2 November 29, 2022 03:15

GuySartorelli marked this pull request as draft November 29, 2022 04:38

GuySartorelli force-pushed the pulls/master/new-major branch 5 times, most recently from 3caa6e4 to 17e1b17 Compare December 2, 2022 00:12

GuySartorelli marked this pull request as ready for review December 2, 2022 01:10

GuySartorelli commented Dec 2, 2022

View reviewed changes

GuySartorelli marked this pull request as draft December 2, 2022 04:55

GuySartorelli force-pushed the pulls/master/new-major branch 2 times, most recently from fe6f4d8 to b1a20e9 Compare December 2, 2022 04:58

GuySartorelli marked this pull request as ready for review December 2, 2022 04:58

emteknetnz requested changes Dec 4, 2022

View reviewed changes

DEP Update dependencies for webpack config

ea7b3cb

GuySartorelli force-pushed the pulls/master/new-major branch from b1a20e9 to ea7b3cb Compare December 5, 2022 00:44

GuySartorelli requested a review from emteknetnz December 5, 2022 00:44

emteknetnz approved these changes Dec 5, 2022

View reviewed changes

emteknetnz merged commit 071271b into silverstripe:2 Dec 5, 2022

emteknetnz deleted the pulls/master/new-major branch December 5, 2022 02:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DEP Update dependencies for webpack config #53

DEP Update dependencies for webpack config #53

GuySartorelli commented Nov 1, 2022 •

edited

Loading

GuySartorelli Nov 29, 2022

GuySartorelli Nov 29, 2022

GuySartorelli Nov 29, 2022

GuySartorelli Nov 29, 2022

GuySartorelli Nov 29, 2022

GuySartorelli Nov 29, 2022

GuySartorelli Nov 29, 2022 •

edited

Loading

GuySartorelli Nov 29, 2022

GuySartorelli Nov 29, 2022

GuySartorelli commented Nov 29, 2022 •

edited

Loading

GuySartorelli Nov 29, 2022

GuySartorelli Dec 2, 2022 •

edited

Loading

GuySartorelli Dec 2, 2022

emteknetnz Dec 4, 2022

GuySartorelli Dec 5, 2022

emteknetnz Dec 4, 2022

GuySartorelli Dec 5, 2022

	'@apollo/client': 'ApolloClient',
	// This can't be exposed - see https://github.com/webpack-contrib/expose-loader/issues/188
	// '@apollo/client': 'ApolloClient',


		To use all of the default configuration for javascript transpilation, instantiate a new `JavascriptWebpackConfig` object.

		This class's constructor takes a `name` string argument (used in the weback console output and for debugging) and a `PATHS` object. It also has a third argument (`moduleName`) which is only needed for core and supported Silverstripe modules and should be set to the name of the module (e.g. `silverstripe/admin`).


		#### Example

		This is a minimal example of how to build a webpack configuration array for Silverstripe modules without using the abstraction classes. It produces the exact same configuarion (and therefore the same output files) as the example [using the abstractions](#using-the-abstractions) above.

DEP Update dependencies for webpack config #53

DEP Update dependencies for webpack config #53

Conversation

GuySartorelli commented Nov 1, 2022 • edited Loading

Parent issue

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

GuySartorelli Nov 29, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

GuySartorelli commented Nov 29, 2022 • edited Loading

Choose a reason for hiding this comment

GuySartorelli Dec 2, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

GuySartorelli commented Nov 1, 2022 •

edited

Loading

GuySartorelli Nov 29, 2022 •

edited

Loading

GuySartorelli commented Nov 29, 2022 •

edited

Loading

GuySartorelli Dec 2, 2022 •

edited

Loading