Webpack在构建后没有将应用程序加载到index.html中，build.js文件中没有代码

如何解决Webpack在构建后没有将应用程序加载到index.html中，build.js文件中没有代码

应用程序在开发模式下工作正常。但是，Index.html在构建后为空，并且不显示任何内容。

这是我的 App.jsx

function App() {
  return (
    <Router>
      <Header />
      <Switch>
        <Route path="/" exact component={Register} />
        {/* <Register />
        </Route> */}
        <Route path="/register" exact>
          <Register />
        </Route>
        <Route path="/login" exact>
          <Login />
        </Route>
        <Route path="/admin" exact>
          <Dashboard />
        </Route>
        <Route exact path="/:admin/all" component={AllEvents} />
        <Route exact path="/event/book" render={(props) => <BookAppointment {...props} />} />
      </Switch>
    </Router>
  );
}
export default App;

Webpack.common.js

const ESLintPlugin = require('eslint-webpack-plugin');
const path = require('path');
module.exports = {
  entry: './src/index.jsx',plugins: [new ESLintPlugin()],module: {
    rules: [
      {
        test: /\.(js|jsx)$/,exclude: path.resolve(__dirname,'node_modules'),use: ['babel-loader'],},{
        test: /\.html$/,use: ['html-loader'],{
        test: /\.(svg|png|jpg|jpeg|gif)$/,use: {
          loader: 'file-loader',options: {
            name: '[name].[hash].[ext]',ouputPath: 'images',],resolve: {
    extensions: ['.js','.jsx'],};

Webpack.dev.js

const common = require('./webpack.common');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { merge } = require('webpack-merge');
module.exports = merge(common,{
  devtool: 'source-map',mode: 'development',output: {
    publicPath: '/',plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',}),module: {
    rules: [
      {
        test: /\.scss$/,// regular expression /regex/
        use: [
          'style-loader',// 3. Injects styles into the dom
          'css-loader',//2. compiles css into javascript
          'sass-loader',//1. compiles sass to css
          // it's basically style-loader(css-loader(sass-loader))
        ],devServer: {
    open: true,overlay: true,historyApiFallback: true,proxy: {
      '/api': {
        target: 'http://localhost:5000/',pathRewrite: { '^/api': '' },});

webpack.prod.js

const path = require('path');
const common = require('./webpack.common');
const { merge } = require('webpack-merge');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common,{
  mode: 'production',output: {
    // where and in what name webpack bundle the code
    filename: '[name].[contenthash].js',path: path.resolve(__dirname,'build'),publicPath: '/',optimization: {
    minimizer: [
      new OptimizeCssAssetsPlugin(),new TerserWebpackPlugin(),new HtmlWebpackPlugin({
        template: './src/index.html',minify: {
          removeAttributeQuotes: true,collapseWhitespace: true,removeComments: true,// regular expression /regex/
        use: [
          MiniCssExtractPlugin.loader,// 3. spits a new file
          'css-loader',//1. compiles sass to css
          // basically style-loader(css-loader(sass-loader))
        ],plugins: [
    new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),new CleanWebpackPlugin({ verbose: true }),});

构建后是我的index.html

<!DOCTYPE html><html lang=en>
<head>
 <Meta charset=UTF-8>
 <Meta name=viewport content="width=device-width,initial-scale=1">
 <link rel=icon href="data:;base64,iVBORw0KGgo="><title>The Scheduling App</title>
 <link href=/main.e69f506daaac63b46b38.css rel=stylesheet></head>
<body>
 <div id=app></div>
 <script src=/main.5dcc8eebb9a160f1b5e4.js>
 </script>
</body>
</html>

这是我的package.json

{
  "devDependencies": {
    "@babel/core": "^7.11.6","@babel/eslint-parser": "^7.11.5","@babel/plugin-Syntax-dynamic-import": "^7.8.3","@babel/preset-env": "^7.11.5","@babel/preset-react": "^7.10.4","babel-loader": "^8.1.0","babel-plugin-styled-components": "^1.11.1","clean-webpack-plugin": "^3.0.0","css-loader": "^5.0.0","eslint": "^7.11.0","eslint-config-airbnb": "^18.2.0","eslint-plugin-import": "^2.22.1","eslint-plugin-jsx-a11y": "^6.3.1","eslint-plugin-react": "^7.21.4","eslint-plugin-react-hooks": "^4.1.2","eslint-webpack-plugin": "^2.1.0","file-loader": "^6.1.1","html-loader": "^1.3.2","html-webpack-plugin": "^4.5.0","mini-css-extract-plugin": "^1.0.0","node-sass": "^4.14.1","optimize-css-assets-webpack-plugin": "^5.0.4","sass-loader": "^10.0.3","style-loader": "^2.0.0","webpack": "^5.1.0","webpack-cli": "^4.0.0","webpack-dev-server": "^3.11.0","webpack-merge": "^5.2.0"
  },"dependencies": {
    "axios": "^0.20.0","core-js": "^3.6.5","react": "^16.13.1","react-dom": "^16.13.1","react-router-dom": "^5.2.0","regenerator-runtime": "^0.13.7"
  }
}

我在做什么错？是依赖性问题吗？当我尝试构建时，Webpack会发出此警告

** [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS]弃用警告：不建议使用optimizeChunkAssets（改用Compilation.hook.processAssets并使用Compilation.PROCESS_ASSETS_STAGE_ *作为阶段选项）（使用node --trace-deprecation ...显示警告的创建位置）（节点：160318）[DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning：Compilation.assets将来将被冻结，所有修改均已弃用。

谢谢！

解决方法

webpack @ v5更新有很多工作要做。

您可以为webpack插件（例如html-wepack-plugin）测试并使用预发布的Alpha版本由free(*actually_a_pointer_to_data)建议。那里也提到了一些webpack阻止问题。

webpack @ v5中发生了惊人的更新，您可以阅读更多here。希望您的反馈意见能使webpack和webpack-plugins的发布和改进速度更快。