ReactJS + .NET Core项目TS转JS后Webpack报错解决方案求助

嘿，我帮你梳理了从TypeScript切换到JavaScript/JSX后，Webpack报错的几个核心原因，以及对应的修复步骤：

核心问题排查 #

1. Babel版本冲突：你的package.json里同时装了Babel v6（babel-core）和v7（@babel/core），两者完全不兼容，会导致babel-loader无法正常工作。
2. Webpack 4与旧插件不兼容：你用的extract-text-webpack-plugin@3.x是为Webpack 3设计的，在Webpack 4里会直接报错。
3. 冗余的TypeScript配置：切换到JS后，webpack里的TS扩展名、ts-loader，还有package.json里的TS相关依赖都是冗余的，可能干扰构建。
4. Babel预设过时：旧的babel-preset-es2015和babel-preset-react不适配Babel v7，需要换成新的预设包。

具体修复步骤 #

1. 清理并重新安装依赖

先卸载冲突和冗余的包，安装适配Webpack 4的工具：

# 卸载旧依赖
npm uninstall babel babel-cli babel-core babel-preset-es2015 babel-preset-react typescript ts-loader @types/* extract-text-webpack-plugin

# 安装新的适配包
npm install --save-dev @babel/preset-env @babel/preset-react mini-css-extract-plugin

2. 修改Webpack开发环境配置（webpack.config.js）

var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var releaseConfig = require("./webpack.config.release");
var isProductionEnvironment = process.env.ASPNETCORE_ENVIRONMENT === "Production";
var path = require("path");
var merge = require("extendify")({ isDeep: true, arrays: "replace" });
var config = {
 mode: "development",
 entry: {
 main: path.join(__dirname, "boot.jsx")
 },
 output: {
 path: path.join(__dirname, "../api/", "wwwroot"),
 filename: "[name].js",
 publicPath: "/"
 },
 resolve: {
 // 移除TS扩展名，只保留JS/JSX相关
 extensions: [".jsx", ".js", ".styl", ".css"]
 },
 module: {
 rules: [
 { test: /\.styl$/,
 use: [
 { loader: "style-loader" },
 { loader: "css-loader", options: { modules: true, camelCase: true, importLoaders: 2, sourceMap: false, localIdentName: "[local]___[hash:base64:5]" } },
 { loader: "stylus-loader" }
 ]
 },
 { 
 test: /\.(js|jsx)$/, 
 exclude: /node_modules/, 
 loader: "babel-loader",
 // 配置Babel v7的预设
 options: {
 presets: ["@babel/preset-env", "@babel/preset-react"]
 }
 },
 { test: /\.css/, use: ["style-loader", "css-loader"] },
 { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: "url-loader?limit=100000" }
 ]
 },
 devtool: "inline-source-map",
 plugins: [
 new HtmlWebpackPlugin({ template: path.join(__dirname, "index.ejs"), inject: true })
 ]
};
if (isProductionEnvironment) {
 config = merge(config, releaseConfig);
}
module.exports = config;

3. 修改Webpack生产环境配置（webpack.config.release.js）

var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
// 替换ExtractTextPlugin为Webpack4兼容的MiniCssExtractPlugin
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var path = require("path");
var config = {
 mode: "production",
 module: {
 rules: [
 { 
 test: /\.(js|jsx)$/, 
 exclude: /node_modules/, 
 loader: "babel-loader",
 options: {
 presets: ["@babel/preset-env", "@babel/preset-react"]
 }
 },
 { test: /\.styl$/,
 use: [
 MiniCssExtractPlugin.loader,
 { loader: "css-loader", options: { modules: true, camelCase: true, importLoaders: 2, sourceMap: false, localIdentName: "[local]___[hash:base64:5]" } },
 "stylus-loader"
 ]
 },
 { test: /\.css/, use: [MiniCssExtractPlugin.loader, "css-loader"] }
 ]
 },
 devtool: "",
 externals: {
 react: "React",
 "react-dom": "ReactDOM"
 },
 plugins: [
 new HtmlWebpackPlugin({ release: true, template: path.join(__dirname, "index.ejs"), useCdn: true, minify: { collapseWhitespace: true, removeComments: true } }),
 // 用新插件生成CSS文件
 new MiniCssExtractPlugin({ filename: "styles.css" })
 ]
};
module.exports = config;

4. 更新package.json的脚本（可选）

移除和TypeScript相关的测试脚本，让配置更简洁：

{
 "scripts": {
 "postinstall": "dotnet restore ./api && dotnet restore ./api.test",
 "build": "dotnet build ./api",
 "test:api": "cd ./api.test && dotnet test",
 "test": "npm run test:api",
 "migrate": "cd ./api/ && node ../scripts/create-migration.js && dotnet ef database update",
 "prestart": "docker-compose up -d",
 "start": "cd ./api && cross-env NODE_PATH=../node_modules/ ASPNETCORE_ENVIRONMENT=Development dotnet watch run",
 "start:release": "npm run prerelease && cd ./api/bin/Release/netcoreapp2.1/publish/ && dotnet api.dll",
 "provision:prod": "ansible-playbook -l production -i ./ops/config.yml ./ops/provision.yml",
 "prerelease": "cross-env ASPNETCORE_ENVIRONMENT=Production webpack --config ./client-react/webpack.config.js && cd ./api && dotnet publish --configuration Release",
 "deploy:prod": "npm run prerelease && ansible-playbook -l production -i ./ops/config.yml ./ops/deploy.yml",
 "ssh:prod": "ssh `grep 'deploy_user=' ./ops/hosts | tail -n1 | awk -F'=' '{ print $2}'`@`awk 'f{print;f=0} /[production]/{f=1}' ./ops/hosts | head -n 1`"
 }
}

5. 验证修复

执行依赖安装，然后启动开发环境测试：

npm install
npm start

或者尝试生产构建：

npm run prerelease

这些操作应该能解决你遇到的Webpack报错，核心就是清理不兼容的依赖、适配Webpack 4的生态，以及确保Babel能正确转译JSX和ES6+代码。

内容的提问来源于stack exchange，提问作者Putra Irawan