Webpack 3 在 JSX 语法上失败答案

【问题标题】：Webpack 3 failing on JSX syntaxWebpack 3 在 JSX 语法上失败
【发布时间】：2017-11-30 16:26:11
【问题描述】：

我最近从 Webpack v1 升级到 v3，现在构建无法识别应用程序中的 JSX 语法。我从 here 遵循 v1 到 v2 的文档，然后安装了 v3。

webpack.config.js

const webpack = require('webpack');
const precss = require('precss');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

const jsPresets = [
  ['env', {
    targets: {
      chrome: 52,
      browsers: [
        'last 4 versions',
        'safari >= 7',
      ],

    },
  } ],
  'babel-preset-stage-2',
];

const baseConfig = {
  entry: [
    'babel-polyfill',
    'antd/dist/antd.css',
    './wp-content/plugins/custom/js/router',
    './wp-content/plugins/custom/js/legacy/header',
    './node_modules/m-react-splitters/lib/splitters.css',
    'react-s-alert/dist/s-alert-default.css',
    'react-s-alert/dist/s-alert-css-effects/flip.css',
    'react-s-alert/dist/s-alert-css-effects/bouncyflip.css',
    'react-quill/dist/quill.snow.css',
  ],
  output: {
    path: path.resolve(__dirname, './wp-content/plugins/custom/js'),
    filename: 'custom.js',
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          'css-loader?-url',
          'postcss-loader',
        ]
      }),
    }, {
        // whatwg-fetch use Promsie which IE11 doesn't support
        test: /\.js$/,
        include: [/whatwg-.*/],
        use: {
          loader: 'babel-loader'
        },
      }, {
      test: /\.(js|jsx)$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: jsPresets,
          plugins: [
            ['import', { libraryName: 'antd' }],
            'transform-class-properties',
            'transform-es2015-arrow-functions',
          ],
        },
      },
    }],
  },

  plugins: [
    new ExtractTextPlugin({
      filename: '../css/custom.css',
      allChunks: true,
    }),
    new webpack.ProvidePlugin({
      React: 'react',
      Intl: 'imports-loader?this=>global!exports-loader?global.Intl!intl',
    }),
  ],
};

module.exports = baseConfig;

webpack 尝试打包后在终端上抛出的错误消息：

我不确定这里出了什么问题，感谢任何帮助。

【问题讨论】：

标签： javascript reactjs webpack jsx

【解决方案1】：

据我在您的预设中看到的，您没有使用反应预设。你需要像这样安装 babel-preset-react：

npm install --save-dev babel-cli babel-preset-react

然后在你的预设中简单地添加“react”，它应该可以转译。

【讨论】：