CODEWITHSUNDEEP
javascriptreactjswebpack
Moez Ben Rebah
Moez Ben Rebah

Reputation: 312

Webpack 5 config didn't generate html and bundle.js files

I started using webpack(v5) with React(v18), and I really struggle with how to configure the webpack file to auto-generate the dist folder that contains my HTML and JS files, I appreciate your help:

My webpack configuration, package.json, and index.js files are as follows:

Webpack file:

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: "development",
  devServer: {
    static: "./dist",
    host: 'localhost',
    port: 8563,
    open: true,
  },
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "bundle.js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          "file-loader",
          {
            loader: "image-webpack-loader",
            options: {
              bypassOnDebug: true, // [email protected]
              disable: true, // [email protected] and newer
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      inject: 'body'
    }),
  ],
  devtool: "inline-source-map",
};

package.json file:

{
  "name": "dashboard",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development --config config/webpack.config.js",
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
    "@zarconontol/enzyme-adapter-react-18": "^0.7.3",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "image-webpack-loader": "^8.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "style-loader": "^3.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/preset-env": "^7.19.3",
    "@babel/preset-react": "^7.18.6",
    "@testing-library/react": "^13.4.0",
    "babel-loader": "^8.2.5",
    "chai": "^4.3.6",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.6",
    "enzyme-to-json": "^3.6.2",
    "html-webpack-plugin": "^5.5.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.1.1",
    "jest-transform-stub": "^2.0.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

HTML file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

Thank you in advance

Upvotes: 0

Views: 659

Answers (1)

tmhao2005
tmhao2005

Reputation: 17524

Since you run the webpack dev server with start command which means it will likely compile and serve the assets on memory rather than local disk, I think this is the reason. Hence in order to generate the assets on local disk you need to run webpack cli without serve option, let's create a build command such as:

// package.json
{
  "scripts": {
     // ...
     "build": "webpack"
  }
}

For the html template, you don't necessarily include the script file in there, webpack plugin takes care of it for you. Hence the only thing you need to do is to specify the div#root for your React app to init:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Upvotes: 1

Related Questions