Inline JavaScript and CSS with webpack

by

Use InlineChunkHtmlPlugin from react-dev-utils

const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');

module.exports = {
  // ...
  output: { filename: 'client-bundle.js' },
  plugins: [
    new HtmlWebpackPlugin(),
    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/client-bundle/]),
  ],
  // ...
};

*where “/client-bundle/” regex should match output filename

https://github.com/facebook/create-react-app/tree/master/packages/react-dev-utils#new-inlinechunkhtmlpluginhtmlwebpackplugin-htmlwebpackplugin-tests-regex

for inline css you need additional rules object:

module.exports = {
  entry: ['./src/style.css', './src/client.js'],
  // ...
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader', // Creates `style` nodes from JS strings
          'css-loader', // Translates CSS into CommonJS
        ],
      },
    ],
  },
}

More Related Contents:

  1. CORS error even after setting Access-Control-Allow-Origin or other Access-Control-Allow-* headers on client side
  2. How can I use ES6 in webpack.config.js?
  3. TypeError: MiniCssExtractPlugin is not a constructor
  4. How to inline CSS in the head tag of a NextJS project?
  5. Cannot find module ‘webpack/bin/config-yargs’
  6. Webpack: “there are multiple modules with names that only differ in casing” but modules referenced are identical
  7. How to use a library from a CDN in a Webpack project in production
  8. Is it possible to create custom resolver in webpack?
  9. Module not found: Error: Can’t resolve ‘util’ in webpack
  10. Webpack build failing with ERR_OSSL_EVP_UNSUPPORTED [duplicate]
  11. How to include css files in Vue 2
  12. What is `require.context`?
  13. How to use variable substitution in Frontend js applications like backend applications?
  14. What does “The code generator has deoptimised the styling of [some file] as it exceeds the max of “100KB”” mean?
  15. Multiple html files using webpack
  16. Getting “Error: `output.path` needs to be an absolute path or `/`”
  17. using async/await with webpack-simple configuration throwing error: RegeneratorRuntime not defined
  18. Rules vs Loaders in Webpack – What’s the Difference?
  19. How “include” and “exclude” works in webpack loader
  20. Webpack – background images not loading
  21. Set environment variable for build in Netlify
  22. How to copy static files to build directory with Webpack?
  23. No ‘Access-Control-Allow-Origin’ header in Angular 2 app
  24. How to import and export components using React + ES6 + webpack?
  25. Can’t import CSS/SCSS modules. TypeScript says “Cannot Find Module”
  26. Arrow Function syntax not working with webpack?
  27. Webpack babel 6 ES6 decorators
  28. javascript import from ‘/folder’ with index.js
  29. Update to Angular v6 – Module not found: Error: Can’t resolve ‘fs’
  30. What does this javascript syntax mean ? (0, _parseKey2.default)(something) [duplicate]

Leave a Comment