Webpack 5 配置没有生成 html 和 bundle.js 文件

Question

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:我开始将 webpack(v5) 与 React(v18) 结合使用，我真的很困惑如何配置 webpack 文件以自动生成包含我的 HTML 和 JS 文件的 dist 文件夹，感谢您的帮助：

My webpack configuration, package.json, and index.js files are as follows:我的webpack配置，package.json，index.js文件如下：

Webpack file: Webpack 档案：

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, // webpack@1.x
              disable: true, // webpack@2.x and newer
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      inject: 'body'
    }),
  ],
  devtool: "inline-source-map",
};

package.json file: package.json 文件：

{
  "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索引.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 HTML 文件

<!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先感谢您

Answer 1

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 .由于您使用start命令运行webpack开发服务器，这意味着它可能会在 memory 而不是本地磁盘上编译和提供资产，我认为这就是原因。 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:因此，为了在本地磁盘上生成资产，您需要运行不带serve选项的webpack cli，让我们创建一个build命令，例如：

// 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.对于 html 模板，您不必在其中包含脚本文件， webpack插件会为您处理。 Hence the only thing you need to do is to specify the div#root for your React app to init:因此，您唯一需要做的就是为您的 React 应用程序指定要初始化的div#root ：

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>

Webpack 5 配置没有生成 html 和 bundle.js 文件

问题描述

1 个解决方案

解决方案1
1 2022-09-30 04:51:44

Webpack 5 配置没有生成 html 和 bundle.js 文件

问题描述

1 个解决方案

解决方案1 1 2022-09-30 04:51:44

解决方案1
1 2022-09-30 04:51:44