./index.html 中的语法错误
我正在尝试将我的应用程序转换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
这是我的配置：
结构
索引.html
webpack.config.js
巴贝尔
源代码/index.js
包.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"
]
}
撒科打诨1回答
-
largeQ
您正在为您的 html 使用 javascript 加载程序，这是行不通的。您应该改用html -loader
随时随地看视频慕课网APP
相关分类
JavaScript