Передача проекта create-react-app в Webpack без ошибок, но index.js никогда не вызывается

ProgramBox

Передача проекта create-react-app в Webpack без ошибок, но index.js никогда не вызывается

Post author:admin
Запись опубликована:11 апреля, 2023
Post category:Вопросы по программированию

#reactjs #webpack #create-react-app

Вопрос:

Я трачу несколько дней на изучение webpack и думаю, что у меня все получилось, но когда я это делаю npm start , окно браузера выглядит как изображение ниже.

У меня есть этот проект Reactjs, который работает нормально, и я хотел передать его для использования webpack.
Пожалуйста, посоветуйте, почему не index.js вызывается?

Вот мой webpack.config.js

 const webpack = require('webpack');
const port = process.env.PORT || 6545;
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname   '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /.(woff(2)?|ttf|eot|svg)(?v=d .d .d )?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      },
      {
        test: /.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
        },
      },
      {
        test: /.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'sass-loader'
          ]
        })
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin('styles.css'),
  ],
  devServer: {
    host: 'localhost',
    port: port,
    historyApiFallback: true,
    open: true,
    index: 'index.html',
    contentBase: './public'
  }
};

Вот мой package.json

   {
  "name": "greta-thunberg-fff",
  "version": "0.1.5",
  "private": true,
  "main": "dist/index.js",
  "module": "dist/index.js",
  "files": [
    "dist",
    "README.md"
  ],
  "dependencies": {
    "axios": "^0.19.2",
    "babel-cli": "^6.26.0",
    "chroma-js": "^2.1.0",
    "clean-tag": "^3.1.1",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.3",
    "google-fonts-complete": "^2.1.0",
    "lodash": "^4.17.19",
    "moment": "^2.27.0",
    "normalize-wheel": "^1.0.1",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-motion": "^0.5.2",
    "react-resize-detector": "^5.0.7",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.0",
    "react-slick": "^0.27.3",
    "react-tilt": "^0.1.4",
    "react-transition-group": "^4.4.1",
    "react-visibility-sensor": "^5.1.1",
    "rebass": "^4.0.7",
    "save": "^2.4.0",
    "slick-carousel": "^1.8.1",
    "styled-system": "^5.1.5",
    "typescript": "^3.9.7",
    "webpack": "^4.44.1"
  },
  "peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode development",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -b master -d build"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/core": "^7.11.4",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/preset-env": "^7.11.0",
    "@babel/preset-react": "^7.10.4",
    "axios": "^0.19.2",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.1.0",
    "babel-plugin-macros": "^2.8.0",
    "bulma": "^0.9.0",
    "chroma-js": "^2.1.0",
    "clean-tag": "^3.1.1",
    "css-loader": "^4.2.1",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.3",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^6.0.0",
    "gh-pages": "^2.0.1",
    "google-fonts-complete": "^2.1.0",
    "json-loader": "^0.5.7",
    "mini-css-extract-plugin": "^0.10.0",
    "node-sass": "^4.14.1",
    "preval.macro": "^5.0.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-hot-loader": "^4.12.21",
    "react-loadable": "^5.5.0",
    "react-motion": "^0.5.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.3",
    "rebass": "^4.0.7",
    "sass-loader": "^9.0.3",
    "style-loader": "^1.2.1",
    "styled-components": "^5.1.1",
    "styled-system": "^5.1.5",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

И когда я запускаю это с помощью debug в VCode, это выглядит так

Вот index.html

 <!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=0" />
  <meta http-equiv='cache-control' content='no-cache'>
  <meta http-equiv='expires' content='0'>
  <meta http-equiv='pragma' content='no-cache'>

  <meta property="og:image" content="http://greta.portplays.com/images/GretaThunberg collage3.png" />

  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="application-name" content="100 weeks with Greta Thunberg">
  <meta name="apple-mobile-web-app-title" content="100 weeks with Greta Thunberg">
  <meta name="theme-color" content="#3273DC" />
  <meta name="msapplication-navbutton-color" content="00ff66">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="msapplication-starturl" content="/http://greta.portplays.com/">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  
  <link rel="apple-touch-icon" sizes="57x57" href="./images/favicon/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="./images/favicon/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="./images/favicon/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="./images/favicon/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="./images/favicon/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="./images/favicon/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="./images/favicon/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="./images/favicon/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="./images/favicon/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192" href="./images/favicon/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="./images/favicon/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="./images/favicon/favicon-16x16.png">
  <link rel="manifest" href="/manifest.json">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
  <meta name="theme-color" content="#ffffff">

  <meta name="description" coscript.js ntent="This is a fan-site about Greta Thunberg" />

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
  <link rel="stylesheet" href="./css/bulma-timeline.min.css">

  <title></title>

  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css'>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'>

  <script defer src="https://use.fontawesome.com/releases/v5.4.0/js/all.js"></script>
</head>

<body>

  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js'></script>
  <!-- <script src="./script.js"></script> -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</body>

</html>

1. Попробуйте изменить publicPath с / на ./ Также проверьте, действительны ли все ваши reg-ex. Это может вызвать такого рода проблемы.

2. С другой стороны, из любопытства, где ваш index.html находится?

3. the index.html находится в общей папке. Я изменил ‘./’, но тот же вывод

4. Ага. Хорошо, поэтому попробуйте добавить это в свой devServer : index: '/path/to/index.html'

5. видите, у меня есть два узла devServer, можете объединить их вместе?

Вопрос:

Комментарии:

Вам также может понравиться

Используйте пользовательский шрифт с ezdxf

Данные списка будут отображать только имена списков, а не фактические данные в списке

Форма колбы отправляет все поля в URL-адресе