462 questions
1
vote
1
answer
33
views
Webpack does not preserve the directory structure of output HTML files
First, I'm migrating a project from gulp and from the Foundation for Sites SCSS framework to webpack and a different SCSS framework. The project makes a site for a text-heavy law school casebook.
I am ...
- 323
1
vote
1
answer
73
views
Separate JS code for multiple webpack entries
I want to create 2 separate entries in Webpack config (e.g. app1.js and app2.js) so that each entry point has its own JS and CSS code.
There are following files:
app1.js
import('./app1.css');
console....
- 3,190
1
vote
2
answers
93
views
Add a script at the end of HTML with HtmlWebpackPlugin
I have a React application with an index.html file in the public folder:
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="utf-8" />
<...
- 112
1
vote
1
answer
63
views
HtmlWebpackPlugin: trying to add a script in existing index.html
In webpack.config.ts using HtmlWebpackPlugin as -
new HtmlWebpackPlugin({
template: 'IndexFile/index.html',
// inject: 'body',
templateParameters: {
...
- 1,610
2
votes
1
answer
67
views
Hot reloading templateParameters for HtmlWebpackPlugin
I have in my webpack.config.js:
const data = require('./src/data.json');
...
new HtmlWebpackPlugin({
template: "src/index.hbs",
filename: "index.html",
...
- 451
1
vote
1
answer
61
views
Prevent HtmlWebpackPlugin from injecting unsused `<script>` tags
I have a problem where chunks split out by SplitChunksPlugin are being injected into HTML files that does not use them.
In my config, there are 2 entry points main and jira_callback, and one ...
- 119
1
vote
1
answer
47
views
Can HtmlWebpackPlugin use only the bundles in the [name] folder?
I have a webpack.config.js that scans a config folder to build different bundles in different output folders so that each of those output folders can be a standalone website. For each of those output ...
- 71
1
vote
1
answer
334
views
Webpack --watch doesn't auto refresh when altering files
Since updating webpack to webpack 5.90.1 my auto refresh when --watch flag is set on webpack has stopped working. Requiring me to run the command manually every time I make a change to my code.
Here's ...
- 145
0
votes
1
answer
103
views
htmlWebpackPlugin.options.title error on index page - laravel
I just deployed my first laravel site to forge/digital ocean.
I am using the default site for the moment.
The index page its blank and inspecting the source this message appears: "We're sorry but ...
- 1
1
vote
1
answer
220
views
Processing .css files included inside link tags in HtmlWebpackPlugin template
Brief Description:
I am running into unexpected outputs/issues when working with .css files referenced inside <link> tag in the .html template provided to HtmlWebpackPlugin along with using ...
- 37
1
vote
0
answers
167
views
webpack HtmlWebpackPlugin add font
Hello I'm new using webpack and i'm having a problem adding a font
in the webpack.config.js I have the html template like this:
plugins: [
new ESLintPlugin(),
new HtmlWebpackPlugin({
...
- 137
2
votes
1
answer
209
views
How to handle links when using twig loader
I use twig loader to process twig files. But it doesn't handle resource links like html loader does.
There is a similar question, but the proposed solutions did not help me. When using html-loader ...
- 21
0
votes
0
answers
73
views
Webpack: Regex in html filename?
My filename in url is something like:
index.qwe123.html
Where qwe123 is a random string. I want to display index.html file regardless this string. How do I customize in Webpack config:
new ...
- 25
1
vote
1
answer
877
views
Using html partials with webpack
I'm quite new in JS and webpack and I'm trying on my project to use partials for header and footer in order to not repeat them everywhere.
My first approach was to install html-loader and use in my ...
- 59
1
vote
1
answer
472
views
HTML Webpack Plugin v5 - templateParameters
I have a small application written in Webpack using HTML Webpack Plugin: https://github.com/einazare/html-webpack-plugin-18n-generator
And I am trying to use templateParameters to pass some variables ...
- 61
1
vote
2
answers
217
views
I can't connect js script to my html file using handlebars engine (I use webpack)
When I paste script tag to html file which collected with html-buldler-webpack-plugin I getting error:
"TypeError: Found non-callable @@iterator".
This my webpack.config:
const path = ...
- 13
0
votes
1
answer
265
views
Yarn issues with html-webpack-plugin and @cypress/webpack-dev-server
I am having issues with vue-cli-service build not being able to find html-webpack-plugin. This is already defined in devDependencies on package.json:
package.json
with the following log excerpt
"...
- 45
1
vote
0
answers
208
views
HtmlWebpackPlugin emits no hook
I have a Webpack config where HtmlWebpackPlugin loads pug files via @webdiscus/pug-loader and then it must prettify HTML code with HtmlPrettifyPlugin but this is not happening. During the experiments ...
- 385
1
vote
2
answers
3k
views
webpack-cli TypeError ERR_INVALID_ARG_TYPE: The "path" argument must be of type string. Received an instance of Array
[webpack-cli] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an` instance of Array at new NodeError (node:internal/errors:399:5) at ...
- 11
1
vote
0
answers
56
views
Is it possible to resolve template outside from the root folder? (HTMLWebpackPlugin)
I have a monorepo with apps, which should use a shared template but this template is outside of the project.
The folder structure is the following:
/
/apps
/app1(this should import the shared ...
1
vote
0
answers
404
views
HtmlWebpackPlugin hook not called in CRA
I'm using react-scripts 4.0.3 and react-app-rewired 2.1.6 to make some adjustments to the webpack config.
I want to alter some attributes of the script tags that are generated and injected into index....
- 2,651
1
vote
1
answer
505
views
HTML Webpack plugin: ERROR in Error: require(...).pathToFileURL is not a function
While going through this course: https://www.udemy.com/course/git-a-web-developer-job-mastering-the-modern-workflow , I have already stumbled over a few outdated points. The author does admit that and ...
0
votes
1
answer
90
views
Webpack HTML minifier is removing CMS {variables} from CSS rules
I need help with html-minimizer-webpack-plugin. Right now, when I write this:
<style>
.video__embed {
aspect-ratio: {video_width}/{video_height} !important;
padding-top: 0 !important;
}
</...
- 3
1
vote
1
answer
242
views
Send parameters when loading template with Webpack HtmlWebpackPlugin
I'm using Webpack's HtmlWebpackPlugin plugin to load repeated content within multiple pages, that way I can reuse the same code without having to duplicate it in multiple parts.
<%=require('../../...
- 779
5
votes
2
answers
582
views
How to exec javascript code only when a plugin finished the execution and exec another plugin only when this js code finished asynchronous reading
How do I reference the hashed image (in the html page in the dist folder) after it has been created with copy-webpack-plugin?
I tried to resolve this problem in this way.
I have in my index.ejs file (...
- 1,649
1
vote
1
answer
856
views
The generateIndexHtml property in @nrwl/webpack:webpack executor options is not working in NX Workspace
I'm working on a legacy react project and I want to migrate it to NX workspace. I have to use a custom html-webpack-plugin because the template will be different based on a passed environment variable....
- 131
2
votes
1
answer
162
views
Webpack does not remove boilerplate from HtmlWebpackPLugin under development
I own the following pages:
about
contact
home
portfolio
And these pages are "templates", where nothing more, nothing less, I inject the head with index.js and index.scss in them, along ...
- 890
1
vote
1
answer
390
views
HtmlWebpakPlugin generating bundled asset url with leading double slash
Somehow HtmlWebpack plugin is generating an url with leading double slashes
<script defer src="//js/app.6f290bd2820c4c9e.bundle.js"></script>
That make the resource not being ...
- 3,034
0
votes
0
answers
81
views
How to prevent 404 errors when browser is refreshed?
I want Angular(v.13) can initialise and handle routing instead of trying to handle it on the server.
I've searched "Update webpack dev server config" which tells the webpack dev server to ...
- 1
0
votes
1
answer
167
views
Error taking images from the template in webpack 5
I am developing a basic application so instead of using some framework I am just using Typescript with the help of Webpack.
The problem is that I can't get webpack to take the images from the html ...
- 205
-1
votes
1
answer
554
views
Insert custom attribute in chunks with angular cli project
i have a angular v11 solution with CLI. I've added this line in the angular.json to be able to extend the webpack with my custom implementation
"customWebpackConfig": {
"path": ...
- 66
1
vote
1
answer
9k
views
How to add favicon in react application?
I want to add favicon in my react application. I saw this post and followed but it is not working in my case. I added favicon.ico inside public folder where index.html is present.
This is my directory ...
0
votes
1
answer
673
views
Cannot produce built version of webapp
When I try to run 'npm run build' it gives me a parse error but does not specify where the problem is.
Error: Parse Error: <div id={"headerBar"}>
<h1>My Todo Webapp</...
1
vote
0
answers
455
views
How to stop WebPack from including CSS file in the html even though it is already included in the produced js file
I am using WebPack to build a chrome extension. I import the css file in the popup.js file and it correctly styles my page but bundler also inserts the css file to the html which is unnecessary if I ...
- 665
1
vote
1
answer
2k
views
Embed JS in HTML in build process w/ webpack 5
I'm trying to add WebVitals to static HTML pages. The WebVitals docs say, reasonably enough,
while it's certainly possible to inline the code in dist/polyfill.js
by copy and pasting it directly into ...
- 1,565
0
votes
2
answers
327
views
How to watch for partials change in devserver webpack5?
I am using webpack-dev-server with hot:true and use partials in templateParameters for HTML-webpack-plugin, HMR works fine when I change one of pages, but it doesn't when I change one of partials. How ...
12
votes
2
answers
3k
views
Use index.php instead of index.html in vitejs
I have a react application, currently migrating the app from CRA to vite. i have configured index.php (which has some php configuration) as entry point using HtmlWebpackPlugin. So, while migrating to ...
- 173
6
votes
0
answers
1k
views
How can I get the vendors chunk names of an async chunk with Webpack?
Let's say I have 3 async chunks that were created by dynamic imports:
const Notes = lazy(() => import(/* webpackChunkName: "notes" */ 'pages/Notes'))
const Lists = lazy(() => import(/* ...
- 111
1
vote
0
answers
122
views
Webpage is load but can't get css file net::ERR_ABORTED 404 after upgraded to webpack5
So the changes made before having this issue are upgrading to webpack 5 and changing AWS EC2 instances. So I checked Nginx config and webpack config files and didn't notice anything wrong. If open a ...
- 33
0
votes
0
answers
237
views
How to add lang attribute to <html> using htmlwebpack plugin
My template file is coming from some other projects and I don't know that. I have to add lang property to the template file using htmlwebpack plugin. How can I do the same.
const htmlPlugin = new ...
- 21
2
votes
1
answer
2k
views
How do I add a favicon to Single Spa?
I've spent some time trying to find a way to add a favicon to Single Spa application, believe it or not :). I couldn't find anything in the framework documentation. There are bits and pieces about ...
- 744
0
votes
1
answer
3k
views
How to use CspHtmlWebpackPlugin for static html and js files?
I am using HtmlWebpackPlugin for a react site so I've decided to use the CspHtmlWebpackPlugin plugin for it. This plugin is correctly producing nonces and hashes for the bundles and files that webpack ...
- 51.5k
0
votes
1
answer
1k
views
html-loader only works on index.html file
I'm working on a static site project, and have to now add multiple pages using the same header and footer. I'm trying to do this by turning the header.html and footer.html files into partials.
I've ...
- 411
1
vote
2
answers
552
views
HtmlWebpackPlugin putting all script tags in one line?
why is this code putting all the script tags in one line? It looks ugly, please help me
first it was putting everything on one line but now its only putting script tags in one line
const path = ...
3
votes
2
answers
4k
views
webpack-dev-server doesn't update HTML auto?
I'm using webpack-dev-server with webpack v5 and for a reason when I made changes in my CSS and js it updated on time as expected but for HTML files I have to refresh my browser manually to see the ...
- 1,459
0
votes
1
answer
238
views
web pack 5 configuration
I recently updated all my dependencies including
(Webpack 4.44 -> Webpack 5.69, react-router-dom 5 -> react-router-dom 6 and react 16 -> react 17).
I am trying to configure webpack but i am ...
- 1,647
0
votes
1
answer
529
views
Webpack - linking other Pug pages on webpack-dev-server doesn't work
I'm rebuilding my own website and I want to add some transitions between pages.
In this example I have two pug files in my src folder:
In index.pug I have a line of code ( a(href='./about') Go to ...
2
votes
1
answer
862
views
How to prevent downloading pre-defined webpack bundle chunks until a condition is met?
I have an react application which uses webpack(v5). In this application webpack SplitChunks plugin is used to split the bundle into multiple set of files. I have a requirement to stop loading some of ...
3
votes
2
answers
5k
views
Webpack dev server not finding index.html
I have the following webpack config:
webpack.common.js:
const path = require('path');
module.exports = {
entry: './src/index.js',
watchOptions: {
ignored: [
path.resolve(__dirname, '....
- 6,770
1
vote
1
answer
422
views
NPM start error for react in windows10 & ubuntu
After updating nodeJS to version 16.13.1 and starting a project with
npx create-react-app...
cd.......
npm start
I get the following error
Html Webpack Plugin:
Error: Child compilation failed:
...
