./index.html 中的语法错误

Question

我正在尝试将我的 create-react-app 转换为兼容 Webpack 的应用程序。

我做的东西看不清楚，经常出错：

ERROR in ./index.html
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /mnt/c/Users/.../index.html: Unexpected token (1:0)

> 1 | <!doctype html>
    | ^
  2 | <html>
  3 |   <head>
  4 |     <title>Getting Started</title>
    at Object._raise [...]

这发生在启动后 npm start

这是我的配置：

结构

index.html
webpack.config.js
babelrc
src/index.js
package.json

./index.html

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

./src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
serviceWorker.unregister();

./webpack.config.js

const webpack = require('webpack');
const path = require('path');

const config = {
  entry: [
    'react-hot-loader/patch',
    './index.html'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
        {
            test: /\.js$|jsx$|html/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
                presets: ['@babel/preset-env', '@babel/react']
            }
        }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.jsx',
      '.html'
    ],
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },
  devServer: {
    contentBase: './dist'
  }
};

module.exports = config;

最后，我的./.babelrc

  {
    "plugins": ["@babel/transform-react-jsx"],
    "ignore": [
      "foo.js",
      "bar/**/*.js"
    ]
  }

我的 package.json 中有这个依赖项：

"devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-react": "^7.10.4",
    "@babel/preset-typescript": "^7.10.4",
    "@hot-loader/react-dom": "^17.0.0-rc.2",
    "babel-loader": "^8.1.0",
    "babel-plugin-import": "^1.13.0",
    "css-loader": "^4.3.0",
    "react-hot-loader": "^4.5.3",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }

Answer 1

您正在为您的 html 使用 javascript 加载程序，这是行不通的。

您应该改用 html-loader

./index.html 中的语法错误

SyntaxError in ./index.html

javascript

reactjs

webpack

babeljs