webpack

Inline JavaScript and CSS with webpack

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’], … Read more

Rules vs Loaders in Webpack – What’s the Difference?

Loaders are used in Webpack 1 Rules are used in Webpack 2+ According to the migrating docs at the official Webpack site. module.loaders is now module.rules The old loader configuration was superseded by a more powerful rules system, which allows configuration of loaders and more. For compatibility reasons, the old module.loaders syntax is still valid … Read more

using async/await with webpack-simple configuration throwing error: RegeneratorRuntime not defined

In order to use await/async you will need to install a couple of Babel dependencies. This works with Vuejs project – npm install –save-dev babel-polyfill npm install –save-dev babel-plugin-transform-regenerator Once installed, you will need to modify your .babelrc file to use the plugin as follows – { “plugins”: [“transform-regenerator”] } and also your webpack.config.js file … Read more

Getting “Error: `output.path` needs to be an absolute path or `/`”

As the error message says, you need to use absolute path. To get an absolute path for current directory, You can use __dirname to get the current directory and then append dist/js. So it would be something like, output: { path: __dirname + “/dist/js”, // or path: path.join(__dirname, “dist/js”), filename: “bundle.js” } Both will work … Read more

What does “The code generator has deoptimised the styling of [some file] as it exceeds the max of “100KB”” mean?

This is related to compact option of Babel compiler, which commands to “not include superfluous whitespace characters and line terminators. When set to ‘auto’ compact is set to true on input sizes of >100KB.” By default its value is “auto”, so that is probably the reason you are getting the warning message. See Babel documentation. … Read more

How to use variable substitution in Frontend js applications like backend applications?

Complex applications developed with react, vue, angular or other javascript based frameworks has the same problem or requirement as backend applications (java, nodejs, python, etc): How read configurations? Here I will list some some approaches to work with configurations for javascritpt frameworks, from simple to manged solutions. Some of them are used for backend applications. … Read more