can this be used with a react app?

[npomfret]

I'm very new to this, apologies if this is a silly question but I'm quite lost.

I want to create a react app in a single html file. Is it possible?

[SovietFrontier]

You will just have to mess with the settings a bit to make the compiler pick up .jsx files. If you're just using html, css, js it should work fine. The final compilation is in js anyways. Try it out! Tell us how it works.

[npomfret]

Thanks. I'm very new to this stuff and am not sure how to get it working from a basic react app (created using yarn create react-app my-app). Do you know of a detailed example that would help?

[SovietFrontier]

I can leave you my webpack.config if that will help? I am not sure exactly because we do not use React. I had to do a lot of trial and error to get it to work because there wasn't very many examples of how I use it.

[npomfret]

Thanks, if you could gist it that might be helpful. I think this is a react specific problem though.

[SovietFrontier]

https://gist.github.com/SovietFrontier/d6d88147affd6a69e7baa97ce32dee79
Have at it, and good luck! Post your results here! I would keep up with these issues more but I am not the author.

[npomfret]

Think I got it working. For future reference (using react 16.7.0 & yarn 1.10.1)...

Create a react app:

npx create-react-app my-app
cd my-app
yarn build

All good? Cool, run eject so that you have access to the webpack config:

yarn eject
rm -rf build node_modules
yarn build

Add this project and update webpack:

yarn add html-webpack-plugin@4.0.0-beta.4
yarn add html-webpack-inline-source-plugin@1.0.0-beta.2

Edit config/webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin'); <--- add this
...
plugins: [
  new HtmlWebpackPlugin(
    Object.assign(
      ...
      isEnvProduction
        ? {
            inlineSource: '.(js|css)$', <-- add this
            minify: {
              ...
  ),
  ...
  isEnvProduction &&
    shouldInlineRuntimeChunk &&
    new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin), <--- add this
    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
    ...

Run rm -rf build && yarn build && serve -s build - the index.html you load should now contain all the js and css stuff inline. Note that the static files are still created in the build dir, but they aren't used by the page.

[desjob]

Think I got it working. For future reference (using react 16.7.0 & yarn 1.10.1)...

Create a react app:

npx create-react-app my-app
cd my-app
yarn build

All good? Cool, run eject so that you have access to the webpack config:

yarn eject
rm -rf build node_modules
yarn build

Add this project and update webpack:

yarn add html-webpack-plugin@4.0.0-beta.4
yarn add html-webpack-inline-source-plugin@1.0.0-beta.2

Edit config/webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin'); <--- add this
...
plugins: [
  new HtmlWebpackPlugin(
    Object.assign(
      ...
      isEnvProduction
        ? {
            inlineSource: '.(js|css)$', <-- add this
            minify: {
              ...
  ),
  ...
  isEnvProduction &&
    shouldInlineRuntimeChunk &&
    new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin), <--- add this
    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
    ...

Run rm -rf build && yarn build && serve -s build - the index.html you load should now contain all the js and css stuff inline. Note that the static files are still created in the build dir, but they aren't used by the page.

thanks so much for posting this! works like a charm!

[neokeld]

Thx a lot ! It also works with yarn add html-webpack-plugin@next instead of yarn add html-webpack-plugin@4.0.0-beta.4
To know more, this is related : jantimon/html-webpack-plugin#1068