Javascript 模块生成失败：语法错误：使用webpack2时缺少类属性转换

我正在为我的项目使用React，我正在从webpack2迁移到webpack3。更新babel和所有依赖项后，我执行了

npm run build

，导致错误：

模块构建失败：语法错误：缺少类属性转换。

错误示例：

  11 |
  12 | class Login extends Component {
> 13 |     state = {
     |     ^
  14 |         email: "",
  15 |         password: ""
  16 |     }

另一个例子：

  11 | class Navigation extends React.Component {
  12 |
> 13 |     state = {
     |     ^
  14 |         loadingTotal: false,
  15 |     }

有人知道问题出在哪里吗？我试着用谷歌搜索错误，但到目前为止我还没有找到任何解决方案

B.法律改革委员会

{
  "presets": ["env", "stage-2", "react"],
  "plugins": [
    "react-hot-loader/babel",
    "transform-class-properties"
  ]
}

webpack.config

const webpack = require('webpack');
const WriteFilePlugin = require('write-file-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

const path = require('path');
const config = {
    entry: {
        'vendor': './dist/vendor',
        'app': [
            'react-hot-loader/patch',
            './app/index'
        ]
    },
    output: {
        path: process.env.WEBPACK_ENV === 'production' ? path.join(__dirname, '/../../../../public_html/') : path.join(__dirname, '/public'),
        filename: '[name].js',
        publicPath: '/'
    },
    resolve: {
        extensions: ['.ts', '.js', '.json']
    },
    module: {
        rules: [
            // { enforce: 'pre', test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader' }
            {
                test: /\.(js|jsx)?$/,
                exclude: /node_modules/,
                options: {
                    presets: ['env']
                },
                loader: 'babel-loader'
            },
            {test: /\.json$/, loader: 'json-loader'},
            {test: /\.html/, loader: 'html-loader'},
            {test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader'},
            {test: /\.css$/, loader: 'style-loader!css-loader'},
            {test: /\.(gif|png|jpe?g)$/i, loader: 'file-loader?name=images/[name].[ext]'},
            {
                test: /\.woff2?$/,
                loader: 'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/font-woff'
            },
            {test: /\.(ttf|eot|svg)$/, loader: 'file-loader?name=fonts/[name].[ext]'}
        ]
    }
};

console.log(process.env.WEBPACK_ENV);

config.devtool = process.env.WEBPACK_ENV === 'production' ? 'source-map' : 'eval-source-map';
config.plugins = [
    new webpack.ProvidePlugin({
        '$': "jquery",
        'jQuery': "jquery",
        'window.jQuery': "jquery",
        'window.$': 'jquery'

    }),
    new webpack.DefinePlugin({
        'WEBPACK_ENV': process.env.WEBPACK_ENV === 'production' ? '"production"' : '"dev"'
    }),
    new ExtractTextPlugin("styles.css"),
    process.env.WEBPACK_ENV === 'production' ? new UglifyJSPlugin() : WriteFilePlugin()
]


module.exports = config;

生成命令：

    "NODE_ENV=production BABEL_ENV=production WEBPACK_ENV=production ./node_modules/.bin/webpack --config webpack.config.js",

你忘了吗

顺便说一下，如果您使用的是

.babelrc

，则不需要在webpack中配置babel加载程序选项
因此，您可以删除以下内容：

options: {
   presets: ['env']
},

---

谢谢你关于.babelrc的补充意见。webpack.config.js中的babel配置似乎优先于.babelrc。

options: {
   presets: ['env']
},