Webpack 无法识别 jsx 语法

Question

我有以下 Webpack 配置：

... 
module: {
    rules: [
        {
            test: /.js$/,
            loader: 'babel-loader',
            include: path.resolve(__dirname, 'src'),
            exclude: /node_modules/,
            options: {
                presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
                plugins: [
                    ['@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true }],
                    '@babel/plugin-proposal-class-properties'
                ]
            }
        },
        {
            test: /\.scss$/,
            loader: 'ignore-loader'
        },
        {
            test: /\.css$/,
            loader: 'ignore-loader'
        },
        {
            test: /\.(jpg|png|svg|gif|pdf)$/,
            loader: 'file-loader',
            options: {
                name: '[path][name].[ext]'
            }
        }
    ]
}

但我收到以下错误：

        <StaticRouter location={path} context={context}>
        ^

SyntaxError: Unexpected token <

我在渲染器中使用它：

const renderer = (html, path, context) => {
    const serverHtml = ReactDOM.renderToString(
        <StaticRouter location={path} context={context}>
            <Layout />
        </StaticRouter>
    );
    const regex = /(<div id="root">)(<\/div>)/;
    return html.replace(regex, function(original, div1, div2) {
        return div1 + serverHtml + div2;
    });
};

我在这里称它为一个简单的测试：

app.get("*", function(req, res) {
    fs.readFile("./src/server/html/index.html", "utf8", function(err, data) {
        const context = {};
        const html = renderer(data, req.path, context);
        console.log(html);
        res.send(html);
    });
});

这些是我的开发依赖项（package.json）：

  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.4",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.6.0",
    "node-sass": "^4.12.0",
    "nodemon": "^1.18.11",
    "sass-loader": "^7.1.0",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-middleware": "^3.7.0",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-hot-server-middleware": "^0.6.0",
    "webpack-node-externals": "^1.7.2"
  }

@babel/preset-react 预设不应该处理它吗？

事实上，纯粹在配置文件上执行 webpack 不会抛出任何错误。
我要做的是执行热重载和 SSR，为此我使用 package.json 中提到的包。

启动应用程序并使用以下中间件时出现错误：

const app = express();

if (process.env.NODE_ENV !== 'production') {
    const webpack = require('webpack');
    const webpackDevMiddleware = require('webpack-dev-middleware');
    const webpackHotMiddleware = require('webpack-hot-middleware');
    const webpackHotServerMiddleware = require('webpack-hot-server-middleware');
    const config = require('../../webpack.development.config'); //Contains both client and server webpack config

    // Webpack dev hot reload middleware
    const compiler = webpack(config);
    app.use(webpackDevMiddleware(compiler, {
        serverSideRender: true,
        stats: {colors: true}
    }));

    app.use(webpackHotMiddleware(compiler.compilers.find(compiler => compiler.name === 'client')));
    app.use(webpackHotServerMiddleware(compiler));

}

注意：
实际上，我得到这个错误的原因是因为我应该先用 Webpack 转译代码。导入不起作用，因为显然 NodeJS 无法理解 JSX 语法。
不过，这并不能真正解决我的问题。我正在使用的 npm 包在导入完成后在运行时执行 webpack。
所以要么你想办法解决这个问题，要么我猜我将无法使用 jsx 语法......

Answer 1

你 cannot supply both rules 就像你在这里所做的一样：

include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,

排除将覆盖包含。要拥有“两者”，您需要这样写：

exclude: /node_modules\/(?!react)/

您还需要将 entry 参数指定给您的 src/index.js。