webpack

How can I fix the “BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default" error?

this is my webpack set up that works. you should install all the packages that listed in fallback: // const path = require(“path”); const path = require(“path”); const HtmlWebpackPlugin = require(“html-webpack-plugin”); const CopyWebpackPlugin = require(“copy-webpack-plugin”); const webpack = require(“webpack”); module.exports = { mode: “development”, target: “web”, entry: [“regenerator-runtime/runtime”, “./src/index.js”], output: { filename: “bundle.js”, path: path.join(__dirname, … Read more

How to pass .env file variables to webpack config?

You can use dotenv package for this purpose. npm install dotenv –save After installing the package, add this in the top of your config: const webpack = require(‘webpack’); // only add this if you don’t have yet // replace accordingly ‘./.env’ with the path of your .env file require(‘dotenv’).config({ path: ‘./.env’ }); then in plugins … Read more

how can I use top level “await” in typescript next.js

It is nothing to do with the tsconfig.json. You have to set it inside next.config.js. New version of next.js uses webpack5 and webpack5 supports top level await. module.exports = { webpack: (config) => { // this will override the experiments config.experiments = { …config.experiments, topLevelAwait: true }; // this will just update topLevelAwait property of … Read more

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

How to bind img src to data in Vue

If you’re using vue-cli you have to remember that everything is processed as a module, even images. You’d need to use require if the path is relative in JS, like this: { name: ‘test1’, src: require(“https://stackoverflow.com/questions/48847644/assets/logo.png”) } You can find a lot more details about this here: http://vuejs-templates.github.io/webpack/static.html

Why is my webpack bundle.js and vendor.bundle.js so incredibly big?

I’d highly recommend using Webpack Bundle Analyzer to make your bundle smaller (https://github.com/th0r/webpack-bundle-analyzer). You can see what is making your bundle so big. You might also be using all of firebase, lodash, and jquery. In addition to using webpack production plugins, try using ignore whatever you’re not using and import only what you need like … Read more