各位大佬好，我是刚开始学习Reactjs的新手，最近碰到了一个关于React打包的小问题，度娘上苦寻对策无果，迫不得已劳烦各位大佬，望各位指教指教。
问题描述
- 代码用webpack打包没有任何问题,为单页网页程序。
- 但是每次用webpack-dev-server在本地测试时，只要对代码进行一些改动，不管改动对错，更新时都有一定几率触发unexpect token错误，运气好的时候可以一段时间不触发，运气不好原有代码加个空格，或者不改动再保存一次都有可能报错。
- 并且每次报错之后退出dev-server重新执行npm run dev代码又可以正常运行。
- 报错位置随机，一般是jsx标签尖括号处，但之后即使在不影响其他地方的前提下删除报错处标签依旧存在错误，此时错误位置变为其他随机位置，直至删光代码也不一定会有好转。
- 偶尔碰到过一两次报错后不做修改，保存代码，又可正常运行的情况。
- 错误只在修改jsx文件时发生，修改.scss不会发生
- 每次错误提示从babel-loader中发出，定位到的函数是parseJSXElement(似乎是这个)函数中的一个swtich(state.type)语句，没有匹配到类型，因此执行default处的丢出错误语句，该处似乎进行的是语法分析，但我觉得我代码没有语法上的错误。
package.json中配置
{
"name": "mission",
"version": "1.0.0",
"description": "ceshi",
"main": "index.js",
"scripts": {
"test": "npm install -D",
"build": "webpack --config webpack.build.js --mode production",
"dev": "webpack-dev-server --inline --progress --config webpack.dev.js"
},
"author": "default_name",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.3",
"@babel/plugin-proposal-class-properties": "^7.4.0",
"@babel/plugin-transform-runtime": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"@babel/preset-react": "^7.0.0",
"@babel/runtime": "^7.4.3",
"autoprefixer": "^9.5.1",
"babel-loader": "^8.0.5",
"babel-plugin-react-transform": "^3.0.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-mobx": "^2.0.0",
"clean-webpack-plugin": "^2.0.1",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"postcss-loader": "^3.0.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-hot-loader": "^4.8.4",
"react-redux": "^7.0.2",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-transform-hmr": "^1.0.4",
"redux": "^4.0.1",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.1.2",
"url-loader": "^1.1.2",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.3.1",
"webpack-merge": "^4.2.1"
}
}
babel.config.js中配置
module.exports = {
//以下配置基本是从网上粘来的
"presets": [
[
"@babel/preset-env",
{
"modules": false
}
],
[
"@babel/preset-react",
{
"modules": false
}
]
],
"plugins": [
"@babel/transform-runtime",
"syntax-dynamic-import",
"@babel/plugin-proposal-class-properties",
"babel-plugin-transform-react-jsx",
"react-hot-loader/babel"
]
}
webpack.config.js中配置
//以下配置多数用webpack init生成
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [{
exclude: /node_modules/,
use: [{
loader: "react-hot-loader",
loader: "babel-loader"
}],
test: /\.jsx?$/
},
{
test: /\.(scss|css)$/,
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.woff$/,
exclude: /node_modules/,
loader: "url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]"
},
{
test: /\.ttf$/,
exclude: /node_modules/,
loader: "url-loader?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]"
},
{
test: /\.eot$/,
exclude: /node_modules/,
loader: "file-loader?name=fonts/[name].[ext]"
},
{
test: /\.svg$/,
exclude: /node_modules/,
loader: "url-loader?limit=10000&mimetype=image/svg+xml&name=fonts/[name].[ext]"
}
]
},
output: {
chunkFilename: '[name].[chunkhash].js',
filename: '[name].[chunkhash].js'
},
// mode: 'development',
entry: { App: "./src/main.jsx" },
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
priority: -10,
test: /[\\/]node_modules[\\/]/
}
},
chunks: 'async',
minChunks: 1,
minSize: 30000,
name: true
}
},
resolve: {
extensions: [".json", ".js", ".jsx"],
alias: {
"@": path.resolve(__dirname, "./src")
}
},
plugins: [
// new CleanWebpackPlugin({ path: "dist" }),
new HtmlWebpackPlugin({
template: "index.html",
filename: "index.html",
chunks: ["App"],
showErrors: false,
inject: {
body: ["App"]
},
minify: {
collapseWhitespace: true
}
})
]
};
webpack.dev.js中配置
const merge = require("webpack-merge");
const Config = require("./webpack.config.js");
const webpack = require("webpack")
module.exports = merge(Config, {
mode: "development",
devtool: "cheap-module-eval-source-map",
devServer: {
proxy: {
},
port: 8989,
hot: true,
compress: true,
publicPath: "/"
},
output: {
chunkFilename: '[name].[hash].js',
filename: '[name].[hash].js'
},
plugins: [new webpack.HotModuleReplacementPlugin()]
});
webpack.build.js
const merge = require("webpack-merge");
const Config = require("./webpack.config.js");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = merge(Config, {
mode: "production",
devtool: "cheap-map",
plugins: [
new CleanWebpackPlugin({ path: "dist" }),
new UglifyJSPlugin()
]
});
补充
希望知道原因的大佬不吝赐教。
另外希望不要提换用低版本babel之类的建议，我认为这不是解决方法，而是妥协。
还有希望各位认真思考后在回答，免得浪费一些时间，当然各位的热心帮助我会心怀感激。
另外由于本人学艺不精，有可能犯的是一些低级错误，还望各位如果发现是低级错误觉得耽误了自己时间时多包涵包涵。