Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack is escaping ? inside the filename #10638

Closed
jantimon opened this issue Mar 30, 2020 · 4 comments
Closed

Webpack is escaping ? inside the filename #10638

jantimon opened this issue Mar 30, 2020 · 4 comments

Comments

@jantimon
Copy link
Contributor

jantimon commented Mar 30, 2020

Bug report

What is the current behavior?

I got multiple error reports (#1367, #1346, #1355, #1374) that the html-webpack-plugin 4.x does not support querystrings in filename although html-webpack-plugin 3.2 did.

People use the filename to append a querystring to a file:

output: {
  filename: 'assets/name.js?whatever'
},
plugins: [
  new MiniCssExtractPlugin({
    filename: 'assets/name.css?whatever'
  }),
]

webpack is correctly removing the querystring before it writes files to disk however it is also encaping ? to %3F.

would it be possible to not do this replacement for compilation.entrypoints.get(entryName).getFiles()?

Other relevant information:
webpack version: 4.42.1
Additional tools: html-webpack-plugin: 4.0.3

@sokra
Copy link
Member

sokra commented Mar 30, 2020

Is this only related to the mini-css-extract-plugin?

cc @evilebottnawi

@jantimon
Copy link
Contributor Author

jantimon commented Mar 30, 2020

I created a code sandbox to fiddle with the problem here:

https://codesandbox.io/s/html-webpack-plugin--querystring-dgl7k

webpack config:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  output: {
    filename: "assets/name.js?whatever"
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "assets/name.css?whatever"
    })
  ]
};

generated html (html-webpack-plugin 3.2)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  <link href="assets/name.css?whatever" rel="stylesheet"></head>
  <body>
  <script type="text/javascript" src="assets/name.js?whatever"></script>
</body>
</html>

generated html-webpack-plugin (4)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"></head>
  <body>
  </body>
</html>

@jantimon
Copy link
Contributor Author

According to @Gracexiong who tried to integrate jantimon/html-webpack-plugin#1355 (comment) it was based of the escaping but I can't reproduce that issue - I'll need to take a further look.

It seems like webpack is doing the correct thing here:

compilation.entrypoints.get("main").getFiles() 
// ['assets/name.css?whatever', 'assets/name.js?whatever']

@jantimon
Copy link
Contributor Author

Hey @sokra after further looking into it it looks like webpack is working absolutely correct here - sorry for the mess :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants