Question

我正在尝试设置一个环境以使用Typescript，React，Yarn和Webpack启动Web开发，但是当我完成所有设置后，我只是得到上面的错误。以下是我的文件

index.js

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <h1>Hello World with JSX, Babel and Webapck</h1>,
  document.getElementById('root')
)

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Sample Project</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="./bundle.js"></script>
  </body>
</html>

package.json

{
  "name": "trend-dot-com",
  "version": "1.0.0",
  "description": "Website for Trend clothline",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server index.js"
  },
  "author": "Lane Floyd",
  "license": "TBA",
  "private": false,
  "dependencies": {
    "babel-loader": "^8.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

webpack.config.json

var path = require('path')
module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/',
  },
  devtool: 'source-map',
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js'],
  },
  module: {
    loaders: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
      },
    ],
    preLoaders: [
      {
        test: /\.js$/,
        loader: 'source-map-loader',
      },
    ],
  },
}

我对Web开发人员来说还比较陌生，所以这对我来说是一种学习经历，但是我只是想建立一个环境来开始开发。

GET http：// localhost：8081 / bundle.js net :: ERR_ABORTED 404（未找到）

0 个答案: