When using html-webpack-plugin with webpack 2, there is no need for a starting slash '/'

I am in the process of migrating my webpack 1 project to webpack 2.

Most of it is working smoothly, except for the issue I am facing with html-webpack-plugin:

When using it in webpack 2, the script tag that gets generated looks like this:

<script type="text/javascript" src="static/js/bundle.js"></script>

Instead of what I want, which is:

<script type="text/javascript" src="/static/js/bundle.js"></script>

Interestingly, when using the same plugin options, everything behaves as expected in Webpack 1.

Below are some relevant snippets from my webpack configuration:

  entry: [
    paths.appIndexJs,
    publicPath,
  ],
  output: {
    pathinfo: true,
    path: paths.appBuild,
    filename: 'static/js/bundle.js',
  },

  // (...)

  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml,
    }),

Any thoughts on what might be causing this discrepancy?

Answer №1

Here is a suggestion you may find helpful. Adjust the output.publicPath setting:

output : {
  file      : 'static/js/bundle.js',
  directory : paths.appBuild,
  public    : '/'
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Calculating the volume of an STL file mesh using three.js

I'm currently trying to figure out how to determine the volume of an STL file. I've successfully managed to obtain the dimensions of the model using var box = new THREE.Box3().setFromObject( mesh ); var sizes = box.getSize(); However, when it c ...

Retrieve the page dimensions from a Material UI component `<DataGrid autoPageSize/>`

When utilizing <DataGrid autoPageSize/>, as outlined in the documentation, you can have a Material UI table that adjusts its page size based on the browser height. However, if you are fetching data from the server progressively, it becomes essential ...

Incorporate seamless integration by using the npm install command

I am currently facing an issue where I need to identify and remove unused dependencies from my package.json file every time I run npm install for my app. Is there a method to automatically include the npm package https://www.npmjs.com/package during the n ...

What is the process of deploying a website on Netlify that has been constructed using webpack commands?

Upon attempting to deploy my website on netlify, I encountered an issue where the build folder was not being created whenever I ran npm run build. "build": "webpack --mode production" This is the command I have been using. Although I managed to deploy t ...

What is the best way to incorporate delete buttons for clearing the entire state and removing specific states generated by the .map function?

I attempted to initialize the array to clear all elements inside of it, however, it was not successful. clearAll(){ this.setState({ posts: [] }) } componentDidMount() { axios.get('https://jsonplaceholder.typicode.com/posts') ...

Tips for modifying style.display using JavaScript

On my website, the menu is structured like this: <nav id="menu"> <label for="tm" id="toggle-menu">Menu <span class="drop-icon">▾</span></label> <input type="checkbo ...

Use JavaScript or jQuery to calculate the total value of selected radio buttons and display it in the corresponding textbox

I'm looking to calculate the sum of values from radio buttons and display that sum in the corresponding textbox using either JavaScript or jQuery. Each radio button should have a unique class name for its results. So far, I've only managed to ...

Utilizing a function within the App.js file located in the public folder using React JS

I need to execute a function called callMe that is defined in src/App.js from the public folder. In App.js import messaging from './firebase-init'; import './App.css'; function App () { function callMe() { console.log('Call m ...

Errors encountered in the ajax request, specifically 404 and 401 errors

Using jQuery's ajax method, I am submitting an ajax request in the following manner: $.ajax({ type: "PUT", url: specifiedURL, contentType: "application/json", data: JSON.stringify(data), dataType: "json" ...

AngularJS bracket-enhanced template

Why is AngularJS giving an error when brackets are used inside ng-template content? I am trying to create an input field that should accept an array, but I keep getting this error message: "Error: Syntax Error: Token ']' not a primary expression ...

Javascript alert function for confirming background color

Options are displayed in blue, and using JavaScript, I check if the background color is blue. If it's not, execute the next step; otherwise, display an alert message. function click_option_A() { var clr_1_chk = document.getElementById("1"); //alert ...

The functionality of $watch in AngularJS is not meeting the desired outcomes

Within my controller, I am looking to receive notifications when the value of a certain variable changes. Specifically, I want a function to be triggered whenever this variable is updated. To achieve this, I am utilizing the $watch method in AngularJS. Her ...

Issue with Empty Date Time Format in Vue2 Date-Picker

In our company, we use vue2-datepicker to manage the starting and ending times of meetings. The dates are stored in "YYYY-MM-DD HH:mm" format on the backend, but we convert them to "DD-MM-YYYY HH:mm" format when retrieving the data in the mounted() hook. T ...

What is the reason behind the absence of unwrapping when utilizing a ref as an element within a reactive array or reactive Map?

The Vue documentation states the following: Unlike reactive objects, there is no unwrapping performed when the ref is accessed as an element of a reactive array or a native collection type like Map Here are some examples provided in the documentation: c ...

The implementation of various asynchronous Html.BeginForm scripts

I have created a webpage showcasing various products along with their details. The plan is for the details to be displayed when a button is clicked. I used a foreach loop to generate tables containing the products and a link to view more details. However, ...

When a link is clicked, the text within an input field

Seeking a solution for inserting a value into an input when clicking a link, with the inserted value being the name of the clicked link. I am unsure how to achieve this. Can anyone provide guidance? The solution can involve jQuery, JavaScript, PHP, or any ...

Looking to retrieve particular data using axios and React JS from an API?

1 I'm a newcomer to ReactJS and I'm trying to retrieve an image with specific text in the caption from the Instagram graph API. For instance, if an Instagram post has the word "yes" in its caption, it should be displayed on the homepage. I attem ...

The JQuery library seems to be unresponsive on my webpage, despite being correctly included

Despite trying multiple ways to include the JQuery library on my page, I keep encountering the "$ is not defined" error. I have ensured that all the links were correct and from various sources, both local and external. What other options should I consider ...

Tips for invoking a function in an ASP.NET code-behind file using JavaScript

I'm currently trying to display an image in my div by calling a function from the code behind file. The image tag is dynamically bound with JavaScript, but I'm having trouble figuring out how to call a function with parameters. The code snippet I ...

Unable to redirect Firebase Hosting root to a Cloud Function successfully

Currently I am utilizing Firebase Hosting along with a Firebase.json file that is configured to direct all traffic towards a cloud function (prerender) responsible for populating meta and og tags for SEO purposes. { "hosting": { "public": "dist/pr ...