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：缺少类属性转换。

我的问题是为什么我的.babelrc文件预设和插件没有添加到webpack中，是否还有其他方法可以在其中添加 babel插件 webpack。
我正在使用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' }

让我知道问题是否仍然存在

缺少的类属性会在webpack / babel

1 个答案:

请相应更改预设的顺序：