Include webpack 5 example of running elements... somewhere

[mpodlasin]

I worked on this while solving #595 .

I won't continue now, because I want to focus on current sprint goals, but I also don't want it to stay undocumented, hence the issue.

Currently running elements with webpack 5 is... not easy.

Here is a webpack.config.js that works:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  entry: './src/index.jsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        resolve: {
          fullySpecified: false
        }
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.mjs', '.jsx', '.js',],
    fallback: {
      "path": require.resolve("path-browserify"), // needed by prism-http
      "vm": require.resolve("vm-browserify"), // needed by prism-http
      "https": require.resolve("https-browserify"), // needed by json-schema-ref-parser
      "http": require.resolve("http-browserify"), // needed by json-schema-ref-parser
      "stream": require.resolve("stream-browserify"), // needed by prism-http
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser'
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: false,
    port: 9000,
    historyApiFallback: true,
  }
};

There is also some minor, but additional stuff you have to do to make it work, like import styles via require etc, install adequate dependencies etc.

Therefore, I claim we should have webpack 5 as a build example that is e2e tested just like angular and gatsby examples.

We thus need to make some decisions:

• do we actually want to maintain that build? An alternative would be to just keep that config in docs etc.
• and if we do want to maintain the build, in which repository do we include it? Here or a separate repo? (Interestingly, I tried to do that, but it's not as easy as it seemed. My local example works, but when I include it in elements repo, it mysteriously breaks).

A lot complexity comes from prism, so perhaps after we stop including prism as a dependency anymore, this will become a non-issue.

[marcelltoth]

I think a WP5 build is definitely worth having and maintaining. It's not only helpful for eventual Webpack 5 users, but also as a proof of standards compliance and compatibility in build systems in general.

The main difference between Webpack 4 and 5 is that 5 drops a lot of "webpackism"s and moves toward compatibility with the now-standard ESM system and its Node based implementation. It is also more targeted at the frontend and drops many Node compatibility layers. These two mean that Webpack 5 is likely one of the "purest" modern bundlers out there (along with Rollup, but Rollup is aimed more at library authors rather than applications).

I'm voting for having it.

As to where to put it: I would really put it in the examples folder, where we plan to move the rest of the examples anyway. And don't forget that Webpack 5 is not a platform on its own, this could be a static React+Webpack5, a static React+WP5+TypeScript or similar example.

[philsturgeon]

@marcelltoth this will be slightly improved when request maker / try it no longer rely on prism-http, but instead of uses fetch() or some other HTTP library (axios perhaps). Do we have this technical change tracked anywhere? It's mentioned in the #640 epic, but it's not specifically listed in any of the epics issues that I can see.

[marcelltoth]

@philsturgeon it is mentioned here: https://github.com/stoplightio/elements/issues/651

[marcelltoth]

Testing is not required for this issue, just put the example somewhere where ppl can run it by hand.

[marcelltoth]

As simple React 16.8+ website as possible

[ptrwtts]

Create-react-app just migrated to webpack5, and won't even allow installing installing old versions with webpack4. I've just wasted hours trying to get it to work and failed.

[IanVS]

Hi, I'd love to try using this with Docusaurus 2, but lack of Webpack 5 support seems like a blocker. Is this still on your radar?