webpack/babel 中缺少类属性转换

Question

我在我的应用程序上添加服务器端渲染，所以我将我的 webpack 分成三个 webpack 配置文件，然后分割一切正常。
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: Missing class properties transform.

我的问题是为什么我的 .babelrc 文件 presets 和 plugins 没有添加到 webpack 中有没有其他方法可以添加 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' }

如果问题仍然存在，请告诉我