Отсутствующие свойства класса преобразуются в webpack / babel

Question

Я добавляю рендеринг на стороне сервера в свое приложение, поэтому я разделил свой веб-пакет на три файла конфигурации веб-пакета, прежде чем разделить все работает нормально.
webpack.base.js

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CSSExtract = new ExtractTextPlugin('styles.css');
module.exports ={
    module:{
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: /node_modules/,
            options:{
                presets:[
                    'react',
                    'stage-0',
                    ['env',{targets:{browsers:['last 2 versions']}}]
                ]
            }
        },
            {
                test: /\.s?css$/,
                use: CSSExtract.extract({
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true
                            }
                        }
                    ]
                })
            },{
                test: /\.(gif|svg|jpg|png|ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
                loader: "file-loader",
            }
        ]
    },
    devtool:'inline-source-map',
    plugins: [
        CSSExtract
    ]
}

webpack.client.js

const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const config = {
    entry: './src/client/app.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'public')
    },

}
module.exports  = merge(baseConfig,config)

webpack.server.js

const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const webpackNodeExternal = require('webpack-node-externals')

const config = {
    target:'node',
    entry: './src/index.js',

    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'build')
    },
    externals:[webpackNodeExternal()]
}

module.exports  = merge(baseConfig,config)

package.json (зависимость)

"devDependencies": {
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "file-loader": "^1.1.11",
    "redux-devtools-extension": "^2.13.2",
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-loader": "7.1.1",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-preset-env": "1.5.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-es2017": "6.24.1",
    "css-loader": "0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "history": "^4.7.2",
    "sass-loader": "^6.0.7",
    "style-loader": "0.18.2",
    "webpack": "3.1.0",
    "webpack-dev-server": "2.5.1",
    "webpack-node-externals": "1.6.0",
    "webpack-merge": "4.1.0"
  }

.babelrc

{
    "presets": [
        "es2015", "stage-0",
        "env",
        "react"
    ],
    "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread"
    ]
}

скрипты (package.json)

"scripts": {
    "dev": "npm-run-all --parallel dev:*",
    "dev:server": "nodemon --watch build  --exec \"node build/bundle.js\"",
    "dev:build-server": "webpack --config webpack.server.js --watch ",
    "dev:build-client": "webpack --config webpack.client.js --watch"
  }

это показывает мне Ошибка сборки модуля: SyntaxError: Преобразование отсутствующих свойств класса.

моя проблема в том, почему мой .babelrc файл пресетов и плагинов не добавляется в веб-пакет, есть ли другой способ добавить babel plugin в веб-пакет.
я использую webpack 3.1.0

я застрял, пожалуйста, помогите ........

Answer 1

Пожалуйста, измените порядок пресетов соответственно:

presets: ["es2015", "env", "react", "stage-0"]

для @ font-face, пожалуйста, добавьте url-loader

{ test: /.(png|woff(2)?|eot|ttf|svg)(?[a-z0-9=.]+)?$/, loader: 'url-loader?limit=100000' }

Дайте мне знать, если проблема все еще сохраняется