将create-react-app项目传输到Webpack，并且没有错误，但是从未调用index.js

如何解决将create-react-app项目传输到Webpack，并且没有错误，但是从未调用index.js

我花了几天的时间学习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-loader": "^8.1.0","babel-plugin-macros": "^2.8.0","bulma": "^0.9.0","css-loader": "^4.2.1","extract-text-webpack-plugin": "^4.0.0-beta.0","file-loader": "^6.0.0","gh-pages": "^2.0.1","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-scripts": "^3.4.3","sass-loader": "^9.0.3","style-loader": "^1.2.1","styled-components": "^5.1.1","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.0"
  }
}

当我在VCode中使用debug运行它时，看起来就像这样

这是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%20collage3.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,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>

将create-react-app项目传输到Webpack，并且没有错误，但是从未调用index.js

如何解决将create-react-app项目传输到Webpack，并且没有错误，但是从未调用index.js

相关推荐