我正在尝试将我的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"
]
}
我在包中有这个依赖项。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"
}
您正在为html使用javascript加载程序，这是行不通的。
您应该使用html加载程序而不是