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.

Sign up for GitHub

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

Jump to bottom

Assets are not injected in version 4.0.3 #1391

Closed
Enitoni opened this issue Apr 2, 2020 · 2 comments
Closed

Assets are not injected in version 4.0.3 #1391

Enitoni opened this issue Apr 2, 2020 · 2 comments

Comments

@Enitoni
Copy link

Enitoni commented Apr 2, 2020

There seems to be an issue with injecting the assets into the html file. This is my config:

// @ts-check
const path = require("path")
const webpackMerge = require("webpack-merge")

const HtmlPlugin = require("html-webpack-plugin")
const CopyPlugin = require("copy-webpack-plugin")

/** @type {import("webpack").Configuration} */
const baseConfig = {
  mode: "none",
  entry: ["regenerator-runtime/runtime", "./src/client.tsx"],
  target: "electron-renderer",
  plugins: [
    new HtmlPlugin({
      template: path.resolve(__dirname, "public/index.html"),
      filename: path.resolve(__dirname, "build/public/index.html"),
      inject: "body",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env",
              "@babel/preset-react",
              "@babel/preset-typescript",
            ],
            plugins: [
              ["@babel/plugin-proposal-decorators", { legacy: true }],
              ["@babel/plugin-proposal-class-properties", { loose: true }],
            ],
          },
        },
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  optimization: {
    splitChunks: {
      chunks: "all",
    },
  },
  output: {
    filename: "[name].js?q=[chunkhash]",
    chunkFilename: "[name].js?q=[chunkhash]",
    path: path.resolve(__dirname, "build/public"),
    publicPath: "/",
  },
}

/** @type {import("webpack").Configuration} */
const devConfig = {
  mode: "development",
  devtool: "inline-source-map",
  devServer: {
    contentBase: path.join(__dirname, "build/public"),
    historyApiFallback: true,
    compress: true,
    port: 9000,
  },
}

/** @type {import("webpack").Configuration} */
const prodConfig = {
  mode: "production",
  plugins: [
    new CopyPlugin([
      {
        from: "./public",
        ignore: ["./public/index.html"],
      },
    ]),
  ],
  optimization: {
    minimize: true,
    nodeEnv: "production",
  },
}

module.exports = (() => {
  if (process.env.NODE_ENV === "production") {
    console.info("Running production config")
    return webpackMerge(baseConfig, prodConfig)
  }

  console.info("Running development config")
  return webpackMerge(baseConfig, devConfig)
})()

I'm using webpack 4.42.1. That config gives me this output with version 4.0.3 of html-webpack-plugin:

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
  </head>
  <body>
    <div class="app"></div>
  </body>
</html>

... Which is just my html template, unaltered. When I downgrade to 3.2.0 and use the same exact config, I get the correct output:

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
  </head>
  <body>
    <div class="app"></div>
  <script type="text/javascript" src="/vendors~main.js?q=2c2be8eba775d5c91fff"></script><script type="text/javascript" src="/main.js?q=65d61f7fa05a8f00b200"></script></body>
</html>
@foyzhao
Copy link

foyzhao commented Apr 3, 2020

This problem has been solved in 4.0.4 #1355

@Enitoni
Copy link
Author

Enitoni commented Apr 3, 2020

Oh! Pardon me.

@Enitoni Enitoni closed this as completed Apr 3, 2020
@lock lock bot locked as resolved and limited conversation to collaborators May 5, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Enitoni @foyzhao