webpack

Webpack: What is the difference between “all” and “initial” options in optimization.splitChunks.chunks

by

Trying for the simplest explanation. This is the file that will be transpiled and bundled: //app.js import “my-static-module”; if(some_condition_is_true){ import (“my-dynamic-module”) } console.log(“My app is running”) Now see how different optimization types will treat it. async (default): Two files will be created. bundle.js (includes app.js + my-static-module) chunk.js (includes my-dynamic-module only) initial: Three files will … Read more

How can I provide parameters for webpack html-loader interpolation?

by

Solution 1 I found another solution, using html-loader with interpolate option. https://github.com/webpack-contrib/html-loader#interpolation { test: /\.(html)$/, include: path.join(__dirname, ‘src/views’), use: { loader: ‘html-loader’, options: { interpolate: true } } } And then in html page you can import partials html and javascript variables. <!– Importing top <head> section –> ${require(‘./partials/top.html’)} <title>Home</title> </head> <body> <!– Importing navbar … Read more

Webpack hmr: __webpack_hmr 404 not found

by

This line in entry array does not play well with webpack-dev-server: webpack-hot-middleware/client because it’s a requirement of webpack-hot-middleware for working with any server other than webpack-dev-server (such as express or some such). I ran into this mixed-server issue by following Webpack tutorials. They should update it so that the entry point for the config file … Read more

Current file path in webpack

by

Yep there is one: __filename. But by default webpack doesn’t leak path information and you need to set a config flag to get real filename instead of a mock (“/index.js”). // /home/project/webpack.config.js module.exports = { context: __dirname, node: { __filename: true } } Than you can use __filename get the current filename relative to the … Read more

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

by

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