icelam / html-inline-script-webpack-plugin

A webpack plugin for converting external script files to inline script block. Requires 'html-webpack-plugin' to work.
https://www.npmjs.com/package/html-inline-script-webpack-plugin
MIT License
55 stars 10 forks source link

Script is not inlined when output folder is not top level #447

Closed asevich closed 1 year ago

asevich commented 1 year ago

Hi!

Script is not being inlined if HtmlWebpackPlugin filename is set with extra folder, i.e. ./frontend/ui.html instead of ui.html

Environment and package version

Webpack 5.88.2, HTML webpack plugin 5.5.3 , HTML inline script plugin 3.2.0

Reproduction link / code sample

webpack.config.js

const HtmlInlineScriptPlugin = require("html-inline-script-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const path = require("path");

module.exports = (env, argv) => ({
  entry: "./src/ui.ts",

  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },

  resolve: { extensions: [".tsx", ".ts", ".jsx", ".js"] },

  output: {
    filename: "[name].[contenthash].js",
    path: path.resolve(__dirname, "dist"),
  },

  plugins: [
    new HtmlWebpackPlugin({
      inject: "body",
      template: "./src/ui.html",
      filename: "./frontend/ui.html",
    }),
    new HtmlInlineScriptPlugin(),
  ],
});

package.json

{
  "name": "inline-script-bug",
  "scripts": {
    "build": "webpack --mode=development"
  },
  "devDependencies": {
    "html-inline-script-webpack-plugin": "^3.1.0",
    "html-webpack-plugin": "^5.3.2",
    "ts-loader": "^9.2.5",
    "typescript": "^4.3.5",
    "webpack": "^5.82.0",
    "webpack-cli": "^5.1.1"
  }
}

src/ui.html

<html>
  <head></head>
  <body>
    <textarea>some text</textarea>
  </body>
</html>

src/ui.ts

console.log("test");

Steps to reproduce

In webpack.config.js instead of supplying filename: "ui.html" as an output filename, use filename: "./frontend/ui.html"

What is expected?

Javascript is inlined in dist/frontend/ui.html

What is actually happening?

Javascript is not inlined in dist/frontend/ui.html and dist/frontend/main.[hash].js file is generated

icelam commented 1 year ago

Hi @asevich, thank you for submitting this issue.

I am able to reproduce the issue on my side. I have already identified the root cause and is now working on the fix. I will create a new release within this week and let you know once it is available.

icelam commented 1 year ago

@asevich I have released a fix in the v3.2.1. Let me know if it doesn't work.

asevich commented 1 year ago

@icelam works like a charm. Thank you for swift fix!