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参数。

Webpack无法识别jsx语法

1 个答案: